When generative AI hit the mainstream, the demand for chat interfaces in UI design spiked dramatically. Service bots became ubiquitous. Products started putting chat interfaces into everything.

Over the past few years of building chat interfaces for prototypes, we've developed a set of patterns that makes the process a breeze and we've collected them in a Figma template that anyone can use in their own designs. Our use case is usually to animate a conversation between one or more personas and possibly a bot, but the techniques and principles we use apply to a broad range of situations not just chat interfaces.

Follow along in our tutorial or grab the template and use it as the starting point for your design.

The template features a few components for building a chat conversation between two or more parties, and a sequence of frames that animate that conversation.

The speech bubble component is designed to be flexible enough to accommodate any amount of text while optionally resizing to fit any parent container.