Documentation
What is Figma Bubble?
Bubble is the basic message container for conversational UIs. It wraps user and assistant messages, helping distinguish speaker roles while preserving readable text layout and content rhythm.
When to Use Bubble?
Use Bubble for any one-to-one or group chat experience, especially when you need clear turn-taking between participants. It is also useful for displaying rich message content such as markdown, code, or inline actions.
How to Design Bubble?
Define variants for sender roles, message density, and status. Keep text width comfortable, set consistent paddings and corner radii, and ensure contrast and spacing support long conversations on both desktop and mobile.
How Bubble Component is Designed in Ant Design System for Figma?
In Ant Design System for Figma, Bubble follows Ant conversation patterns with consistent tokens for color, type, and shape. The component structure supports role variants and integrates naturally with Sender, Prompts, and other Ant Design X building blocks.
Related components
This component is part of the Ant Design System for Figma. Browse Ant Design Figma templates or view kit pricing.