Messaging
Chat panel: header, Messages slot, composer.
In Figma
Section titled “In Figma”From guidelines/components/messaging.md
Properties, variants and anatomy of the Figma components.
Variants: 1
| Property | Type / options |
|---|---|
| Messages | slot (any content) |
Message bubble
Section titled “Message bubble”Chat message: Received or Sent; text or file.
Variants: 4
| Property | Type / options |
|---|---|
| Name | text |
| Time | text |
| Message | text |
| Direction | Received · Sent |
| Type | Text · File |
Message input
Section titled “Message input”Composer for chat and comments.
Variants: 1
| Property | Type / options |
|---|---|
| Placeholder | text |
Message bubble
Section titled “Message bubble”Do
- Show sender, time and read state.
- Group consecutive messages from one sender.
- Use the brand bubble for the current user.
Forbidden
- Never put long documents in a bubble — attach a file.
- Never mix alignments for one sender.
- Never remove timestamps.