Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Figma for Web Designers 2.0
Figma Foundations
Welcome to the course! (3:14)
Getting started in Figma (8:30)
Settings (1:24)
Frames (5:56)
Grids and guides (10:57)
Moving and navigating (8:05)
Text (13:01)
Shapes and colors (31:36)
Pencil and Pen (14:19)
Comment (2:57)
Actions (and keyboard shortcuts) (4:38)
Layout basics (30:57)
Image/video (20:49)
Organising your files (5:23)
Components and Prototyping (an introduction) (26:53)
Auto layout
Auto layout: Introduction (12:27)
Auto layout: Creating responsive designs Pt. 1 (Desktop) (51:01)
Auto layout: Creating responsive designs Pt. 2 (Mobile) (10:17)
Styles and variables
Styles (and logo design) (35:23)
Variables (26:45)
Illustration
Effects (hero section imagery) (34:41)
Hero section buttons and layout (33:36)
Features section: Layout (28:55)
Features section: Adding imagery (9:36)
Features section: Device mockup (Figma community) (20:49)
Masks (11:04)
Gradients (30:35)
Finessing the design so far (8:20)
Boolean operations (18:37)
From wireframe to final design
Pricing cards wireframe (20:23)
Pricing cards visual design Pt.1: styling (19:36)
Pricing cards visual design Pt.2: details (35:58)
UI slider wireframe (19:06)
UI slider visual design (39:45)
Components, variables, and prototyping
Prototyping: Links (Navigate to, Scroll to) (15:24)
Components, variables, and prototyping (FAQ) (35:50)
Components, variables, and prototyping (Feedback modes) (54:36)
Variable modes (16:29)
Responsive layouts
Mobile homepage design (54:27)
Mobile menu: design (38:00)
Mobile menu: prototyping (19:13)
Mirror (Figma mobile app) (1:36)
Min/max width (and desktop fixes) (11:28)
Plugins
Plugins (9:51)
Hand-off and collaboration
Exporting assets (8:07)
Collaboration (7:05)
Handing off to developers (4:23)
Certification and next steps
Certification & Project brief (3:16)
What’s next? (1:43)
Effects (hero section imagery)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock