Figma Course

Lesson 1 • Files, Pages, and Project Organization

Teaches how to create, name, and organize files and pages. Proper structure prevents confusion in multi-page or team projects.

Lesson 2 • Essential Keyboard Shortcuts

Covers the most impactful shortcuts for selection, zoom, and tool switching. Speed habits formed early compound throughout the entire course.

Lesson 3 • Interface Layout and Navigation

Introduces every panel, toolbar, and menu in the editor. Students gain spatial awareness of the workspace to work without hesitation.

Lesson 1 • Working with Primitive Shapes

Covers rectangles, ellipses, polygons, and stars with precise dimension controls. These shapes are the atomic building blocks of every design.

Lesson 2 • Boolean Operations and Path Editing

Teaches Union, Subtract, Intersect, and Exclude to combine shapes into complex forms. Boolean logic dramatically expands icon and shape creation speed.

Lesson 3 • Alignment and Distribution Tools

Covers align, distribute, and tidy-up controls for precise spatial arrangement. Consistent spacing is foundational to professional-quality layouts.

Lesson 4 • Vector Drawing with the Pen Tool

Introduces anchor points, bezier handles, and path editing. Custom icons and illustrations require these vector fundamentals.

Lesson 1 • Creating and Applying Local Styles

Teaches how to save colors, text styles, effects, and grids as reusable local styles. Styles enforce consistency and accelerate design iteration.

Lesson 2 • Fill Types and Color Picker

Covers solid fills, linear and radial gradients, image fills, and the color picker controls. Color accuracy is essential for brand-consistent design work.

Lesson 3 • Stroke and Effect Properties

Teaches stroke weight, position, dash patterns, and layer effects like drop shadow and blur. Effects add depth and polish to UI components.

Lesson 4 • Opacity, Blend Modes, and Masking

Introduces layer opacity, blend mode options, and mask creation techniques. These controls enable advanced visual compositions within any design.

Lesson 1 • Constraints and Responsive Frames

Covers constraint settings for non-Auto Layout layers and responsive frame resizing. Constraints ensure elements stay anchored correctly across screen sizes.

Lesson 2 • Auto Layout Fundamentals

Introduces horizontal, vertical, and wrap Auto Layout modes with padding and gap controls. Auto Layout replaces manual repositioning when content changes.

Lesson 3 • Nested Auto Layout Structures

Teaches stacking Auto Layout frames inside each other to build complex UI patterns. Nesting is how real-world components like cards and navbars are built.

Lesson 4 • Grids and Layout Guides

Introduces column, row, and grid layout guides for structured screen design. Grids align designs to real-world development breakpoints and spacing systems.

Lesson 1 • Creating and Using Components

Covers how to convert frames into main components and place instances. Components are the core unit of scalable, maintainable design systems.

Lesson 2 • Organizing a Component Library

Teaches naming hierarchies, grouping with slashes, and publishing a shared library. A well-organized library is the backbone of team-wide design consistency.

Lesson 3 • Instance Overrides and Properties

Teaches text, fill, visibility, and swap overrides on instances without breaking the main component link. Overrides enable flexible reuse across screens.

Lesson 4 • Component Variants

Introduces the Variants feature to group related component states into a single set. Variants streamline state management for buttons, inputs, and cards.

Lesson 1 • Prototype Connections and Flows

Covers creating connections between frames, setting starting points, and defining flows. Flows let stakeholders experience a design as a navigable sequence.

Lesson 2 • Smart Animate and Micro-Interactions

Introduces Smart Animate to tween matching layers between frames. Micro-interactions elevate prototype fidelity and demonstrate motion design intent.

Lesson 3 • Triggers and Actions

Teaches click, hover, drag, key press, and mouse enter triggers with corresponding actions. Trigger-action pairs define how interactions feel and behave.

Lesson 4 • Transitions and Animations

Covers instant, dissolve, move in/out, push, and slide transitions with easing curves. Transitions communicate spatial relationships between screens.

Lesson 1 • Real-Time Collaboration Features

Covers multiplayer cursors, observation mode, and follow mode for live co-design. Real-time features reduce async back-and-forth in distributed teams.

Lesson 2 • Developer Handoff with Dev Mode

Introduces Dev Mode for inspecting spacing, colors, typography, and exported assets. Dev Mode bridges the gap between design intent and implementation.

Lesson 3 • Exporting Assets and Specs

Teaches export settings for PNG, SVG, PDF, and WebP at multiple resolutions. Proper export configuration ensures assets render correctly in production.

Lesson 4 • Sharing Permissions and Access Control

Covers view, edit, and comment permission levels for files and projects. Correct permissions protect design assets while enabling stakeholder access.

Lesson 1 • Versioning and Design QA

Covers named version saves, branch-and-merge workflows, and design QA checklists. Versioning and QA processes protect design integrity across iterative releases.

Lesson 2 • Multi-Brand and Theming Strategies

Teaches using variable modes to switch between light/dark and brand themes instantly. Theming at the variable level eliminates duplicate component sets.

Lesson 3 • Plugins, Widgets, and Automation

Introduces the Figma plugin ecosystem, widget creation basics, and automation use cases. Plugins extend Figma's native capabilities and eliminate repetitive manual tasks.

Lesson 4 • Advanced Component Architecture

Covers slot-based components, base components, and component composition patterns. Advanced architecture reduces component count while increasing design flexibility.

Lesson 5 • Design Tokens and Variables

Covers Figma Variables for color, number, string, and boolean tokens with modes. Variables enable multi-theme and multi-brand design from a single source of truth.