Figma App Build: Research → Prototype (Components & Iteration)
In this video, I’ll take you step by step through my Figma app build workflow starting with competitor research and inspiration using Mobbin, then moving into prototyping, components, and iteration.
You’ll see exactly how I go from early insights → wireframes → polished prototype, all inside Figma. This process works whether you’re building a product for a startup, enterprise, or just leveling up your workflow.
What you’ll learn:
➡️ How to leverage Mobbin to study real user flows & inspiration
➡️ Turning research insights into a scalable Figma prototype
If you’re serious about mastering Figma workflows and connecting research to real UI, this walkthrough is for you.
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
🚨 Support UI Collective & join the academy: https://uicollective.co/academy
↪️ Need a design system? (also included in the academy): https://collectivekit.co/
Build the Figma Variable library showcased: https://youtu.be/L-tpK7Eeuow
Agenda
0:00 An Introduction
0:34 Mobbin Intro
1:04 Generating Requirements with Chat GPT
6:31 Mobbin Introduction
8:10 Competitor Research
10:26 Prepping Figma File
11:55 Competitor Research
13:46 Identifying Premium Components
19:53 Component Prep
22:22 Half Circle Graph Component
33:04 Circle Graph Component Prep
43:22 Understanding User Thinking Micro Tutorial
44:54 Insights & Dashboard Breakup
46:47 Quick Actions
51:53 Goal Widget
1:01:03 Transactions
1:09:02 Visual Design Tweaks
1:14:25 Insights Page
1:27:40 Transactions Page Research
1:33:04 Transaction Component Prep
1:38:52 Transaction Page Design
1:45:41 Transaction Graph Design
1:55:28 Budget Page Research
1:58:09 Budget Component Prep
2:04:25 Budget Page Design
2:14:48 Budget Modal Designs
2:25:28 Savings Goal Research
2:28:21 Savings Goal Component Prep
2:31:37 Savings Goal Page Design
2:36:26 Goal Index Page Design
2:51:41 Visual Design Polishing
2:52:40 Design Handoff Prep
2:56:57 Bottom Navigation Build
3:05:33 Prototype Polish
3:07:40 Figma File Handoff Prep
3:15:38 Outro
You’ll see exactly how I go from early insights → wireframes → polished prototype, all inside Figma. This process works whether you’re building a product for a startup, enterprise, or just leveling up your workflow.
What you’ll learn:
➡️ How to leverage Mobbin to study real user flows & inspiration
➡️ Turning research insights into a scalable Figma prototype
If you’re serious about mastering Figma workflows and connecting research to real UI, this walkthrough is for you.
📣 Save 20% on the Annual Mobbin plan: http://mobbin.com/uicollective
🚨 Support UI Collective & join the academy: https://uicollective.co/academy
↪️ Need a design system? (also included in the academy): https://collectivekit.co/
Build the Figma Variable library showcased: https://youtu.be/L-tpK7Eeuow
Agenda
0:00 An Introduction
0:34 Mobbin Intro
1:04 Generating Requirements with Chat GPT
6:31 Mobbin Introduction
8:10 Competitor Research
10:26 Prepping Figma File
11:55 Competitor Research
13:46 Identifying Premium Components
19:53 Component Prep
22:22 Half Circle Graph Component
33:04 Circle Graph Component Prep
43:22 Understanding User Thinking Micro Tutorial
44:54 Insights & Dashboard Breakup
46:47 Quick Actions
51:53 Goal Widget
1:01:03 Transactions
1:09:02 Visual Design Tweaks
1:14:25 Insights Page
1:27:40 Transactions Page Research
1:33:04 Transaction Component Prep
1:38:52 Transaction Page Design
1:45:41 Transaction Graph Design
1:55:28 Budget Page Research
1:58:09 Budget Component Prep
2:04:25 Budget Page Design
2:14:48 Budget Modal Designs
2:25:28 Savings Goal Research
2:28:21 Savings Goal Component Prep
2:31:37 Savings Goal Page Design
2:36:26 Goal Index Page Design
2:51:41 Visual Design Polishing
2:52:40 Design Handoff Prep
2:56:57 Bottom Navigation Build
3:05:33 Prototype Polish
3:07:40 Figma File Handoff Prep
3:15:38 Outro