Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Figma Noob to Pro
Introduction
Why are you learning Figma? (4:56)
Creating a Figma account (4:11)
Important assets file (1:31)
Figma File interface
File interface overview (1:25)
How to move around (Zooming and Panning) (3:59)
Layer navigation (1:41)
Tools panel (2:28)
Frames (Artboards) (2:48)
Properties panel (0:40)
Mastering the Basics
Fill, strokes, images, and videos (6:53)
Modifying colors from the top down (2:21)
Image options and Cropping (2:41)
Nudging, moving and resizing (6:14)
Scale tool (K) (5:43)
Pen tool (5:41)
Combining shapes (6:40)
Effects (Shadows and Blurs) (4:32)
Constraints (6:08)
Mastering Typography
Text tool (4:04)
Auto width, auto height, fixed width and height, truncation (1:48)
Lists (1:29)
Advanced (Vertical trim, and hanging punctuations) (2:03)
Mastering Styles
Why and How? (6:45)
Color Styles (10:26)
Text styles (7:38)
Mastering Autolayout
Why to use autolayout? (7:38)
Adding autolayout (Direction, padding and Space between) (4:37)
Fixed width, Fill Container, and Hug contents (8:32)
Packed vs Space between (2:22)
Absolutely positioning elements (2:27)
Canvas Stacking, Align text baseline and Stroke inclusion (4:38)
Wrapping + Min and Max Width/Heights (10:09)
Autolayout Quiz
✅ Exercise: Create the structure of an app (DON'T SKIP!) (4:08)
Community and Plugins
Community and Plugins (2:56)
Popular plugins (6:26)
Mastering Components
What are components for, and when to use them. (2:27)
Basics (Creating a component, Detaching, Instances, Resetting specific properties) (4:35)
Creating multiple components instantly (5:19)
Component properties (Boolean, Instance swap, Text, Layer) (5:10)
Exposing nested instances (5:50)
Creating State Variant (5:07)
Interactive Components (2:15)
Creating Size Variant (5:18)
Create Disabled Toggle (Variant Toggle) (3:26)
Simplify all instances (2:19)
Documenting your components (4:50)
✅ Exercise: Create a component yourself (Don't Skip!)
Before going forward! (0:22)
Team Libraries
Why use them? (4:08)
The Basics (7:01)
Mastering Prototyping
Basics (Device Type, Prototype color, Flows, Enabling Scroll) (7:50)
Types of triggers (8:07)
Types of actions (open overlay, swap overlay, scroll, back, links) (6:45)
Instant, Dissolve, and Smart Animate (Along with easing types) (4:52)
Move in, Move out, Push, Slide in, Slide out (6:51)
Sections (2:41)
Correct way to create sidebars, headers and other navigations (4:17)
Sticky and Fixed Items while scrolling (4:08)
Landing page animation on scroll (22:55)
State management for Prototypes (NEW RELEASE) (6:54)
Mastering Variables & Variable Prototyping
What are variables? When to use them? And Variables vs Styles (6:28)
Creating our variable + aliasing + groups (6:16)
Typography variable and gradient update (NEW) (11:31)
Modes, inheritance, Mode Problems (12:01)
Figma Tokens: Primitives, Semantic, and Component Tokens (9:39)
Scoping, publishing variables (2:38)
Advanced Prototyping with Variables (14:34)
✅ Exercise: Variables and Prototyping (9:08)
Designing a Landing Page
The Project and File Template (4:09)
AI to help us get started (7:06)
Rough structure of the page (19:14)
Including large images into Figma (1:51)
Creating basic wireframe (35:44)
Using font awesome in your designs (5:28)
Using Aspect Ratios (3:14)
The 4px 8px grid (9:53)
Creating local styles (typograhpy, colors) (7:03)
Wireframe to Design (42:59)
Making designs responsive (23:42)
Useless Responsive Video (Breakpoints Plugin) (2:54)
Adjusting mobile screens (11:18)
Handoff
Renaming layers and generating updated styleguide (4:16)
Sharing and getting feedback (make read-only) (2:39)
Importing and exporting assets (Original image links) (2:27)
DevMode (16:10)
Documentation (10:27)
Before going forward! (0:22)
Autolayout Quiz
Complete and Continue