Social · Soft Bubble Chat
Messaging App UI Design Template
Ripple is a warm, bubbly messaging app UI for founders and designers building a chat product, with gradient sent bubbles and emoji reactions.
Preview
Explore the screens
Preview the messaging mobile app design, fully editable in Sleek.
About the Messaging App
Ripple is a messaging app UI design template built around a Soft Bubble Chat look: a clean white canvas, soft ink text, and quiet grey metadata. Received messages sit in soft pebble-grey bubbles while sent messages ride a teal-to-blue gradient, the same gradient that powers the send button, unread badges, and active states. Fully rounded 22px bubbles with gentle tails and rounded avatars with online dots make every screen feel friendly and close.
The template ships six connected screens that form a complete messaging flow: a Chats list with previews and unread badges, a Conversation thread with gradient and grey bubbles, an emoji reaction, and an image message, a pill compose bar, an alphabetized Contacts list, a Calls log with voice and video types, a New Message recipient search, and a Profile with status and settings. The signature press-and-hold reaction row that sticks emoji to a bubble's corner is shown right in the thread.
Use it in Sleek and make it yours: restyle the gradient, edit any screen with AI by describing the change, and add the flows your app needs. Export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, all far faster than starting from a blank canvas.
What's inside
Screens included
Chats
A conversation list with a search bar, a row of recent avatars with online dots, last-message previews, timestamps, and gradient unread badges. The home screen users open into.
Conversation
A thread of grey received bubbles and teal-blue gradient sent bubbles with a thumbs-up and heart reaction, an image message of a cabin, and a pill compose bar with a gradient send button. Where the actual messaging happens.
Contacts
An alphabetized contact list with rounded avatars, status lines, online dots, and an A-Z scroll index on the right. Makes finding people quick.
Calls
A recent calls log with All and Missed tabs, type icons for incoming, outgoing, missed, voice and video, durations, and timestamps. Missed calls stand out in red.
New Message
A recipient search with Create New Group and Add New Contact shortcuts plus a suggested contacts list. The entry point for starting a chat.
Profile
A circular avatar with a camera badge, name, phone number, an About status line, and Notifications and Privacy preference rows. Where users manage their account.
Design & features
Key features
- Soft Bubble Chat aesthetic on a clean white canvas
- Teal-to-blue gradient sent bubbles versus soft pebble-grey received bubbles
- Press-and-hold emoji reactions that stick to a bubble's corner
- Fully rounded 22px bubbles with gentle tails
- Pill compose bar with a gradient circular send button
- Rounded avatars with online status dots
- Unread gradient badges and read receipts
- Flat four-tab bar for Chats, Contacts, Calls, and Profile
Audience
Who it's for
Use cases
What you can build
- Launch an MVP for a messaging or chat product
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent chat UI off to developers
- Explore a redesign of an existing messaging app
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Frequently asked questions
Related mobile app templates
Start designing your messaging app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.
Use this template