Prototyping from Scratch with Figma Course

Lesson 1 • Figma Ecosystem and Account Setup

Covers Figma's web and desktop apps, plan types, and account configuration. Establishes the technical baseline before any design work begins.

Lesson 2 • Essential Keyboard Shortcuts and Settings

Covers the most impactful shortcuts and preference settings for efficient workflow. Speed and accuracy gained here compound across every subsequent chapter.

Lesson 3 • Files, Pages, and Project Organisation

Teaches how to create, duplicate, and organise files and pages within projects. Proper structure prevents confusion in later multi-screen prototyping work.

Lesson 1 • Drawing and Editing Basic Shapes

Covers rectangles, ellipses, polygons, and the star tool with their properties. These primitives form the building blocks of every UI element created later.

Lesson 2 • Vector Pen Tool and Path Editing

Introduces the pen tool for custom vector paths and anchor point manipulation. Custom icons and illustrations built here appear in later prototype screens.

Lesson 3 • Alignment, Distribution, and Spacing

Covers alignment tools, smart distribute, and tidy spacing controls. Precise spacing is essential before introducing auto layout in the next chapter.

Lesson 4 • Understanding Frames vs. Groups

Explains the structural difference between frames and groups and when to use each. Frames are the foundation of screens, components, and auto layout.

Lesson 1 • Fills, Gradients, and Images

Covers solid fills, linear and radial gradients, and image fill modes. These techniques produce polished backgrounds and UI surfaces throughout the project.

Lesson 2 • Building a Type Scale

Teaches how to define a modular type scale for headings, body, and captions. A defined scale ensures visual hierarchy across every screen in the prototype.

Lesson 3 • Text Styles and Style Management

Covers creating, naming, and applying shared text styles across the file. Style management reduces inconsistency before components are introduced.

Lesson 4 • Creating a Local Colour System

Teaches how to define primary, secondary, neutral, and semantic colour tokens as local styles. Centralised colours make global updates instant across all frames.

Lesson 1 • Constraints and Responsive Frames

Covers constraint settings that control how layers behave when a frame resizes. Constraints combined with auto layout produce truly responsive screen designs.

Lesson 2 • Nesting Auto Layout Frames

Teaches how to nest auto layout frames to build complex, adaptive UI structures. Nested layouts are the backbone of card grids, navbars, and form layouts.

Lesson 3 • Introduction to Auto Layout

Explains auto layout's core concept of direction, spacing, and padding. Understanding this model is required before building any responsive component.

Lesson 4 • Building Responsive UI Patterns

Applies auto layout and constraints to build a navbar, card grid, and form. These patterns are reused directly in prototype screens in later chapters.

Lesson 1 • Building a Core UI Component Library

Applies components and variants to build buttons, inputs, icons, and cards. This library is the direct source for all screens built in the prototyping chapter.

Lesson 2 • Component Properties

Covers boolean, text, instance swap, and nested instance properties on components. Properties expose controlled customisation without breaking the component structure.

Lesson 3 • Component Variants

Teaches how to group related component states into a variant set with named properties. Variants power interactive state changes in prototypes without duplicating components.

Lesson 4 • Creating and Using Components

Covers converting frames to main components and placing instances across the file. Components ensure that a single edit propagates to every screen instantly.

Lesson 1 • Prototype Connections and Interactions

Teaches how to add prototype connections, triggers, and destinations between frames. Connections transform static screens into a clickable, navigable prototype.

Lesson 2 • Designing Key Application Screens

Applies the component library to build onboarding, dashboard, and detail screens. Each screen uses auto layout and shared styles established in prior chapters.

Lesson 3 • Planning Screens and User Flows

Covers user flow mapping, screen inventory, and naming conventions before designing. Planning prevents structural rework when linking screens in later sections.

Lesson 4 • Transitions and Animation Settings

Covers instant, dissolve, slide, push, and smart animate transitions. Appropriate transitions communicate navigation direction and interface behaviour clearly.

Lesson 1 • Interactive Components and State Changes

Covers using component variants with prototype connections to simulate state changes. Interactive components reduce the number of frames needed for complex flows.

Lesson 2 • Scroll, Overflow, and Fixed Elements

Teaches vertical and horizontal scroll, overflow clipping, and sticky fixed layers. These settings replicate native scroll behaviour in mobile and web prototypes.

Lesson 3 • Conditional Logic and Actions

Teaches if-else conditions and multi-step action sequences on prototype interactions. Conditional logic enables branching flows that mirror real app decision points.

Lesson 4 • Introduction to Figma Variables

Covers creating number, string, boolean, and colour variable collections. Variables enable dynamic data and state management unavailable in basic prototyping.

Lesson 1 • Usability Testing with Prototypes

Covers planning test tasks, recruiting participants, and running moderated sessions. Structured testing generates actionable feedback for the iteration cycle.

Lesson 2 • Inspect Mode and Asset Export

Teaches developers how to use Figma's inspect panel and how designers export assets. Correct export settings ensure pixel-perfect assets across all target resolutions.

Lesson 3 • Version History and File Maintenance

Covers saving named versions, restoring past states, and maintaining a clean file over time. Version control protects work and supports iterative design across sprints.

Lesson 4 • Analysing Feedback and Prioritising Changes

Teaches affinity mapping, severity rating, and change prioritisation from test findings. Prioritisation ensures the highest-impact issues are fixed before handoff.