FREE TUTORIALS · Learn from zero to expertBusiness DirectoryPut Your Business Ad Here — Free
Independent course disclaimer · expand / collapse

These are independently developed tutorials. Technology names belong to their respective owners; no endorsement is implied. Examples are educational, not guarantees. Verify commands, costs, security, browser support, and framework versions before production use. Google Translate requires internet and can make mistakes. Terms · Privacy · Legal.

Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.
EasyTutorGuide · Free practical course · Six levels

Figma — from absolute beginner to advanced professional practice

Start without knowing any terminology. Work through the chapters in order, read the small explanations, edit the code, check the visible output, and answer twenty practice questions in every chapter.

145 chapters6 levels20 answered questions per chapterMobile + RTL/LTRYouTube narration flow

Start Chapter 1

Level 1 · Absolute Beginner

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 1: What Figma Is and How It Fits
  2. Chapter 2: Create Your First Design File
  3. Chapter 3: Canvas and Page Navigation
  4. Chapter 4: Frames versus Groups
  5. Chapter 5: Create Your First Frame
  6. Chapter 6: Work with Shapes
  7. Chapter 7: Add and Format Text
  8. Chapter 8: Build a Basic Button
  9. Chapter 9: Align and Distribute
  10. Chapter 10: Layers and Layer Order
  11. Chapter 11: Use Constraints
  12. Chapter 12: Color Styles Basics
  13. Chapter 13: Fill and Stroke
  14. Chapter 14: Corner Radius and Shadows
  15. Chapter 15: Import and Crop Images
  16. Chapter 16: Inspect Design Properties
  17. Chapter 17: Create a Simple Card
  18. Chapter 18: Build a Mobile Screen
  19. Chapter 19: Build a Desktop Screen
  20. Chapter 20: Zoom and Shortcuts
  21. Chapter 21: Use Layout Grids
  22. Chapter 22: Export PNG SVG and PDF
  23. Chapter 23: Share and Review a File
  24. Chapter 24: Project: App Welcome Screen

Level 2 · Foundation

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 25: Auto Layout Basics
  2. Chapter 26: Horizontal Auto Layout
  3. Chapter 27: Vertical Auto Layout
  4. Chapter 28: Auto Layout Spacing
  5. Chapter 29: Auto Layout Padding
  6. Chapter 30: Hug Contents Behavior
  7. Chapter 31: Fill Container Behavior
  8. Chapter 32: Fixed Size Behavior
  9. Chapter 33: Nested Auto Layout
  10. Chapter 34: Responsive Header Layout
  11. Chapter 35: Responsive Card Grid
  12. Chapter 36: Reusable Components
  13. Chapter 37: Create Component Instances
  14. Chapter 38: Instance Overrides
  15. Chapter 39: Component Variants
  16. Chapter 40: Interactive Components
  17. Chapter 41: Prototype Links
  18. Chapter 42: Prototype Starting Points
  19. Chapter 43: Hover and Pressed States
  20. Chapter 44: Overlays and Dialogs
  21. Chapter 45: Smart Animate Concepts
  22. Chapter 46: Variables Basics
  23. Chapter 47: Color and Number Variables
  24. Chapter 48: Project: Responsive Product Card

Level 3 · Intermediate

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 49: Local Variables and Collections
  2. Chapter 50: Variable Modes
  3. Chapter 51: Boolean State Variables
  4. Chapter 52: String and Number Variables
  5. Chapter 53: Bind Variables to Properties
  6. Chapter 54: Prototype Set Variable Action
  7. Chapter 55: Prototype Conditional Logic
  8. Chapter 56: Build Interactive Tabs
  9. Chapter 57: Build Interactive Toggle
  10. Chapter 58: Build Search Form Prototype
  11. Chapter 59: Build Multi Step Checkout
  12. Chapter 60: Design System Color Tokens
  13. Chapter 61: Design System Typography
  14. Chapter 62: Design System Spacing
  15. Chapter 63: Semantic Naming Conventions
  16. Chapter 64: Create Button Component Set
  17. Chapter 65: Create Form Field Component
  18. Chapter 66: Create Navigation Component
  19. Chapter 67: Variants and Properties
  20. Chapter 68: Publish Team Libraries
  21. Chapter 69: Manage Component Updates
  22. Chapter 70: Design Handoff to Developers
  23. Chapter 71: Add Developer Annotations
  24. Chapter 72: Project: Clickable Mobile App

Level 4 · Advanced

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 73: Advanced Auto Layout Patterns
  2. Chapter 74: Responsive Breakpoint Design
  3. Chapter 75: Design for RTL Languages
  4. Chapter 76: Accessibility Contrast Testing
  5. Chapter 77: Keyboard Navigation Planning
  6. Chapter 78: Accessible Form Flow
  7. Chapter 79: Screen Reader Annotations
  8. Chapter 80: Touch Target Sizing
  9. Chapter 81: Design Empty States
  10. Chapter 82: Design Error States
  11. Chapter 83: Design Loading States
  12. Chapter 84: Motion and Reduced Motion
  13. Chapter 85: Responsive Typography
  14. Chapter 86: Design Charts and Dashboards
  15. Chapter 87: Information Architecture
  16. Chapter 88: Wireframe User Flows
  17. Chapter 89: Prototype Decision Branches
  18. Chapter 90: Overlay Interaction Patterns
  19. Chapter 91: Design Tables and Filters
  20. Chapter 92: File Organization for Teams
  21. Chapter 93: Component Governance
  22. Chapter 94: Dev Mode Inspection
  23. Chapter 95: Export SVG Correctly
  24. Chapter 96: Project: Accessible Dashboard

Level 5 · Expert

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 97: Large Scale Design Systems
  2. Chapter 98: Token Naming Architecture
  3. Chapter 99: Token Modes and Themes
  4. Chapter 100: Build Themed Components
  5. Chapter 101: Component Property Strategy
  6. Chapter 102: Component Documentation
  7. Chapter 103: Design Audit and Consistency
  8. Chapter 104: Design QA Review
  9. Chapter 105: Create a Usability Test Prototype
  10. Chapter 106: Recruit and Write Test Tasks
  11. Chapter 107: Capture Usability Observations
  12. Chapter 108: Iterate Based on Findings
  13. Chapter 109: Structure Multi Page Files
  14. Chapter 110: Team Branching Concepts
  15. Chapter 111: Review and Comment Workflow
  16. Chapter 112: Developer Handoff Checklist
  17. Chapter 113: Asset Optimization
  18. Chapter 114: Handling Localization
  19. Chapter 115: Design Realistic Forms
  20. Chapter 116: Design Responsive Tables
  21. Chapter 117: Prototype Data Heavy Screens
  22. Chapter 118: Prototype Microinteractions
  23. Chapter 119: Design for Performance Budgets
  24. Chapter 120: Project: Storefront Design

Level 6 · Mastery

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 121: Plan a Product Design Project
  2. Chapter 122: Research Constraints and Goals
  3. Chapter 123: Create a User Journey
  4. Chapter 124: Define Personas Carefully
  5. Chapter 125: Map End to End Flow
  6. Chapter 126: Low Fidelity Wireframes
  7. Chapter 127: High Fidelity Screen Design
  8. Chapter 128: Reusable Component Architecture
  9. Chapter 129: Interactive Prototype Variants
  10. Chapter 130: Advanced Variables Workflow
  11. Chapter 131: Accessibility Design Review
  12. Chapter 132: Mobile and Desktop Adaptations
  13. Chapter 133: Design System Documentation
  14. Chapter 134: Developer Handoff Packages
  15. Chapter 135: Compare Design with Browser Output
  16. Chapter 136: Run a Moderated User Test
  17. Chapter 137: Run an Unmoderated User Test
  18. Chapter 138: Synthesize Usability Issues
  19. Chapter 139: Prioritize Design Iterations
  20. Chapter 140: Present Design Decisions
  21. Chapter 141: Share Prototype Access Safely
  22. Chapter 142: Capstone: Education Platform
  23. Chapter 143: Capstone: Booking Experience
  24. Chapter 144: Portfolio Case Study Assembly
  25. Chapter 145: Mastery: Full Product Design Audit

How to learn like a complete beginner

You do not need to learn every word in one reading. Read the lesson, type the example, look at its real output, change one part, and explain what changed. Return when you have forgotten something. For frameworks requiring an installer or compiler, the source must be tested in a real project—not only in the browser-only illustration.

Suggest an improvement or share a learning idea on the blog.

Disclaimer, trademarks and learning guidance

Independent educational material. External names are used solely to identify subjects. These tutorials are not official training or certification. Output may vary by browser and software version. If a framework requires a build tool, the standalone browser demonstration is an illustration, not execution of the framework source. Always test your own code before publication. Legal notice.