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
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)
Create Disabled Toggle (Variant Toggle)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock