Design a Banking App in Figma | Step by Step
59.4K views · 2025-06-10
UI Design
Today you’ll build a complete mobile banking app in Figma from scratch. We’ll cover competitive research, AI‑generated graphics, variable‑driven design systems, and advanced interactive prototyping. By the end, you’ll have a polished case study ready for your portfolio and the exact workflow used by top finance brands to ship secure, conversion‑optimized experiences.
Drop your questions in the comments, and subscribe for weekly deep dives on fintech UI/UX, design systems, and product strategy. Let’s level up your skills—and your earning power—together.
LINKS:
Join the Academy: https://uicollective.co/
Need a design system? (also included in the academy): https://collectivekit.co/
We build enterprise design systems: https://designsystemlabs.co/
Mobbin: https://mobbin.com/?via=uicollective
Build the variable library used: https://youtu.be/otYX8H0AwAU
0:00 An Introduction
0:20 Welcome Page Research & Design
10:24 AI Generated Graphics
21:11 Onboarding Research & Design
45:47 Linking Account Pages
1:21:24 Dashboard Research
1:24:57 Dashboard Design
1:45:10 Transactions Design
1:45:12 Card Page Design
2:10:05 Interactions
2:24:37 Advanced Prototype Interaction Example
*Note: the swipe between card interactions (both ways) would need to be done at a frame level and not component level.
#FintechDesign #FigmaTutorial #MobileBanking
Drop your questions in the comments, and subscribe for weekly deep dives on fintech UI/UX, design systems, and product strategy. Let’s level up your skills—and your earning power—together.
LINKS:
Join the Academy: https://uicollective.co/
Need a design system? (also included in the academy): https://collectivekit.co/
We build enterprise design systems: https://designsystemlabs.co/
Mobbin: https://mobbin.com/?via=uicollective
Build the variable library used: https://youtu.be/otYX8H0AwAU
0:00 An Introduction
0:20 Welcome Page Research & Design
10:24 AI Generated Graphics
21:11 Onboarding Research & Design
45:47 Linking Account Pages
1:21:24 Dashboard Research
1:24:57 Dashboard Design
1:45:10 Transactions Design
1:45:12 Card Page Design
2:10:05 Interactions
2:24:37 Advanced Prototype Interaction Example
*Note: the swipe between card interactions (both ways) would need to be done at a frame level and not component level.
#FintechDesign #FigmaTutorial #MobileBanking