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.



Vorschau
Screens erkunden
Sehen Sie das messaging-Mobile-App-Design in der Vorschau, vollständig editierbar in Sleek.
Über 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.
Was enthalten ist
Enthaltene Screens
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
Wichtige 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
Zielgruppe
Für wen es ist
Anwendungsfälle
Was Sie bauen können
- 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
So nutzen Sie dieses Template
- 1
Template öffnen
Stöbern Sie in den Screens und sehen Sie das komplette Design in der Vorschau, um zu prüfen, ob es zu Ihrer Idee passt.
- 2
Dieses Template nutzen
Öffnen Sie mit einem Klick Ihre eigene, vollständig editierbare Kopie in Sleek.
- 3
Mit KI bearbeiten
Palette umstylen, Layouts ändern und Screens hinzufügen oder entfernen – einfach indem Sie beschreiben, was Sie wollen.
- 4
Exportieren und launchen
Exportieren Sie Ihr Design oder geben Sie es an Entwickler weiter, und bauen Sie weiter Richtung Launch.
Häufig gestellte Fragen
Verwandte Mobile-App-Templates
Beginnen Sie mit dem Design Ihrer messaging-App
Nutzen Sie es in Sleek und machen Sie es zu Ihrem: Palette umstylen, jeden Screen mit KI bearbeiten und nach Code oder Figma exportieren.
Dieses Template nutzen







