Design & ContentBeginner
UI/UX Design with Figma
Design apps and websites people love: research, wireframes and beautiful screens in Figma.
41 lessons6h 24m of video1 quiz1 practical task Certificate
What you'll learn
- Explain the difference between UI and UX
- Use the design thinking process to solve problems
- Plan simple user research
- Use Figma: frames, shapes, text, auto layout and components
- Design and prototype a mobile app screen
Course content
Part 1. Thinking like a designer6 lessons
Part 2. Designing in Figma35 lessons
- Figma in 13 minutes: crash courseby Flux Academy13 min
- Full video (optional): Figma tutorial for beginners (full walkthrough)by Kevin Stratvert1h 13m
- Introductionby Kevin Stratvert1 min
- First run flowby Kevin Stratvert2 min
- File browserby Kevin Stratvert4 min
- Figma editor layoutby Kevin Stratvert1 min
- Framesby Kevin Stratvert3 min
- Panning and zoomingby Kevin Stratvert1 min
- Rename framesby Kevin Stratvert1 min
- Pagesby Kevin Stratvert1 min
- Add frame fill / backgroundby Kevin Stratvert3 min
- Design propertiesby Kevin Stratvert1 min
- Add rectangle shapeby Kevin Stratvert3 min
- Place imageby Kevin Stratvert2 min
- Layout gridby Kevin Stratvert1 min
- Add textby Kevin Stratvert2 min
- Add navigation frameby Kevin Stratvert2 min
- Design iconsby Kevin Stratvert11 min
- Community assetsby Kevin Stratvert4 min
- Componentsby Kevin Stratvert3 min
- Constraintsby Kevin Stratvert5 min
- Design component cards & spacingby Kevin Stratvert6 min
- Masksby Kevin Stratvert1 min
- Stylesby Kevin Stratvert2 min
- Auto layoutby Kevin Stratvert5 min
- Prototypeby Kevin Stratvert4 min
- Share with othersby Kevin Stratvert1 min
- Export designsby Kevin Stratvert1 min
- Wrap upby Kevin Stratvert1 min
- Full video (optional): Wireframe, mockup & design an app in Figmaby freeCodeCamp.org1h 26m
- Introductionby freeCodeCamp.org1 min
- Wireframingby freeCodeCamp.org30 min
- UI Layoutby freeCodeCamp.org36 min
- Mockupby freeCodeCamp.org20 min
- Capstone project: Design an app screen that solves a local problem · 🎓 Capstone project
Capstone project: Capstone project: Design an app screen that solves a local problem. You finish by building something real; a mentor reviews it before your certificate is issued.
About this course
UX (user experience) design is about making products easy and enjoyable to use. UI (user interface) design is how they look. In this course you'll learn the design thinking process, how to research users, how to sketch wireframes, and how to design real app screens in Figma — the free tool used by teams around the world.