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.



미리보기
화면 살펴보기
Sleek에서 완전히 편집 가능한 messaging 모바일 앱 디자인을 미리 보세요.
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.
구성 내용
포함된 화면
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.
디자인 & 기능
주요 기능
- 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
오디언스
이런 분께 맞습니다
활용 사례
이런 것을 만들 수 있습니다
- 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
이 템플릿 사용 방법
- 1
템플릿 열기
화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.
- 2
이 템플릿 사용
한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.
- 3
AI로 편집
원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.
- 4
내보내고 출시
디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.
자주 묻는 질문
messaging 앱 디자인 시작하기
Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.
이 템플릿 사용







