This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Complete Figma Course – Designing Mobile & Web App UI/UX
Introduction
Course Promo (1:16)
Introduction to Course (1:29)
Intro to Figma
Designing Our First Mobile UI
Mockup Requirements (3:07)
Mockup Files
The Wireframe (5:20)
Setting up Our Frames (9:41)
Images & Overlays (9:22)
Adding Icons (10:37)
Choosing a Color Scheme (6:56)
Setting Up Color Styles (5:14)
Tutorial Page (10:55)
Components (15:07)
Button Components (5:36)
Using Pages to Organize (5:14)
Payment Page (8:19)
Constraints (6:46)
Constraints Exercise Solution (4:44)
Plugins (4:52)
Completing Our Map Page (6:10)
Completing Our Mobile Mockup
User Experience Design (UX) (6:12)
Using Templates (3:03)
Using Apple Templates & Fonts on Windows
Working on Our Main Pages (7:25)
Designing a Tab Bar for Navigation (6:07)
Request Page (9:09)
Store Cards (11:56)
Adding Constraints to the Request Page (3:40)
Profile Page (7:37)
Applying Constraints to the Profile Page (2:05)
Services Page (7:57)
Adding Sample Data from Google Sheets (4:31)
Finding Custom Fonts to Use (3:07)
Creating Text Styles (7:29)
Applying Text Styles Everywhere (7:14)
Finishing Touches (6:46)
Prototyping
Creating Prototypes (3:06)
Adding Connections between Frames (3:35)
Scrolling in Prototypes (4:27)
Testing on a Real Device (1:51)
Using Overlay for Popups (6:00)
Openning Links (2:23)
Adding Animations (2:53)
Page Transitions (2:18)
Interactive Maps (1:53)
Playing GIFs (3:20)
Smart Animate (5:57)
Interactive Components (5:02)
Interactive Components Exercise Solution (2:19)
Creating New Flows (3:54)
Teams & Sharing
Sharing Our Files (2:25)
Working with Teams (3:49)
Exporting from Figma
Creating Exports (3:34)
Code Handoff (1:20)
Designing a Web App UI
Project Outline (2:24)
Starting with a Template (5:17)
Login Page (8:45)
Creating Image Masks (2:28)
Dashboard Page (9:07)
Auto-Layout (8:18)
Adding Sample Data (7:44)
The Completed Web Mockup
Version History (2:00)
Conclusion
Well Done! (1:05)
Creating Image Masks
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock