Chat App UI Design in Figma – Build a Messaging App from Scratch

In this video, I designed a modern Chat App UI from scratch using Figma. You'll see how I created 3 essential screens — user feed, chat list, and message view — all with a clean, dark mode aesthetic.

Whether you're a beginner in UI/UX design or looking for inspiration for your next mobile app project, this breakdown will give you ideas on layout, color, and structure.

🎁 Grab the design file here → https://www.figma.com/community/file/1530534801504302441

Chapters:
00:00 - Intro
01:30 - Setup: Color Styles
04:24 - Screen 1: Home UI Design
13:20 - Adding Plugins in Figma
20:55 - Components: Story Section
36:00 - Components: Post Section
57:00 - Adding Images
01:05:10 - Bottom Navigation Bar
01:17:40 - Screen 2: Chat List Design
01:33:10 - Screen 3: Chat Conversation UI
01:49:00 - Prototyping Scroll (Horizontal & Vertical)
01:51:55 - Prototyping Follow Button
01:53:20 - Prototyping Like & Save Button
01:55:25 - Prototyping: Link All Screens

🔧 Tools Used: Figma
🎨 Focus: Mobile UI, Dark Mode, Chat App Screens

Subscribe for more UI design walkthroughs, app UI concepts, and beginner tips!

—

💬 Have questions? Drop them in the comments.

👉 Watch next: https://www.youtube.com/watch?v=iRFBjcCb60o&t=573s
👉 Video Mentioned: https://www.youtube.com/watch?v=APyurkBpKmc&t=197s

#figma #uidesign #chatapp #figmatutorial