# Social media app chat

> A messaging chat list and thread for Figma: stories with online dots, conversations with previews, bubbles with times and a composer, light and dark.

Messaging in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a chat list with a new message button, a Search field, stories with online dots and conversations from matt911 to priya_47, and a thread with Matteo Ribeiro, Online now, ending on a message field with camera, emoji and send.

Page: https://www.appetiteui.com/screens/social/chat. Every screen of the app: https://www.appetiteui.com/docs/screens-social.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Chats | Stories with online dots and the list of conversations | Top Bar, Search, Avatar, Button, Navigation |
| Chat | One conversation and its reply field | Top Bar, Avatar, Button, Composer (Input) |

- Chats, light: Social app Chat list: a new message button, a Search field, a row of stories with online dots, and conversations from matt911 to priya_47, each with a message preview and a camera button
  Picture: https://www.appetiteui.com/images/au_social_chats_light.webp (dark: https://www.appetiteui.com/images/au_social_chats_dark.webp)
- Chat, light: Social app Chat thread with Matteo Ribeiro, Online now: received and sent message bubbles with times, and a message field with camera, emoji and send buttons
  Picture: https://www.appetiteui.com/images/au_social_chat_light.webp (dark: https://www.appetiteui.com/images/au_social_chat_dark.webp)

## How the screen follows the chat pattern

| Rule | On this screen |
| --- | --- |
| The composer stays put | The composer is the Composer type of Input, pinned to the bottom of the thread with camera, emoji and send inside it. |
| A reply can be more than text | Between people a reply is text, so the thread uses bubbles with a time under each, received on one side and sent on the other. |
| Show the state, not a spinner | Presence is a state on the Avatar, the online dot, and Online now under the name in the top bar, rather than a separate status line. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Chats, Chat |
| Search | Chats |
| Avatar | Chats, Chat |
| Button | Chats, Chat |
| Navigation | Chats |
| Composer (Input) | Chat |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Control corner | 8 pt | Fully round | `platform/control/corner` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Text field | iOS / Text Field | M3 / Text Field, Filled or Outlined, 56 high | Material has Enabled, Focused, Error and Disabled states |

## Related

- Social media app: [Social media app feed](https://www.appetiteui.com/screens/social/feed)
- Social media app: [Social media app profile](https://www.appetiteui.com/screens/social/profile)
- Docs: [Social app screens, every screen and token](https://www.appetiteui.com/docs/screens-social)
- Pattern: [Chat screens](https://www.appetiteui.com/screens/patterns/chat)
- AI chat app: [AI chat app](https://www.appetiteui.com/screens/ai-chat/chat)
- Docs: [AI](https://www.appetiteui.com/docs/ai-component)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [AI app screens](https://www.appetiteui.com/docs/screens-ai)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Figma MCP for mobile: make your agent build with your components](https://www.appetiteui.com/blog/figma-mcp-for-mobile-apps)