StretchLearn Course

Stop designing screens. Start designing components.

Build buttons, forms, modals, navigation, and cards with every state, variant, and the spec developers actually need.

Beginner9 hr 45 minSelf PacedRegistered

Course Overview

What this course is designed to develop

This course teaches you to design UI components the way a product team actually ships them: a button is not one rectangle but a matrix of states and variants tied to named design tokens. You will build buttons, text fields, modals, navigation bars, and cards in Figma, covering hover, focus, active, disabled, loading, and error states, and write a handoff spec that engineers can build from without guessing. Every choice is grounded in real standards, WCAG 2.1 contrast ratios, platform touch-target minimums, the 8-point grid, and modern systems like Material Design 3 and Radix UI.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Design any UI component as a complete state and variant matrix rather than a single static appearance

Apply WCAG 2.1 contrast and platform touch-target minimums to make components accessible by default

Build reusable components in Figma using component properties, variants, and auto layout

Define and apply design tokens for colour, spacing, type, and radius so components stay consistent

Document buttons, forms, modals, navigation, and cards in a developer handoff spec that prevents rework

Run a self-review against an accessibility and consistency checklist before any component is shipped

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: From Screens to Components

Reframe a component as a matrix of states and variants tied to tokens, and set up the grid, spacing, and naming foundations everything else depends on.

3 lessons

What a Component Actually IsContent · 45 min

Preview Enabled

The Grid, the 8-Point System, and Spacing TokensContent · 45 min

LMS Access

Naming, Variants, and the State MatrixContent · 45 min

LMS Access

Module 2

Module 2: Design Tokens and Accessible Foundations

Define the colour, type, and radius tokens your components draw from, and bake in accessibility, contrast and touch targets, so every component is usable by default.

3 lessons

Design Tokens for Colour, Type, and RadiusContent · 50 min

LMS Access

Colour Contrast and WCAG by DefaultContent · 50 min

LMS Access

Touch Targets, Hit Areas, and Focus RingsContent · 45 min

LMS Access

Module 3

Module 3: Building the Core Components

Design the four workhorse components, buttons, form fields, modals, and navigation, with full state matrices, variants, and accessibility built in.

3 lessons

Buttons: Variants, Hierarchy, and StatesContent · 50 min

LMS Access

Form Fields: Inputs, Labels, Validation, and ErrorsContent · 55 min

LMS Access

Modals and Navigation: Overlays, Bars, and TabsContent · 55 min

LMS Access

Module 4

Module 4: Cards, Documentation, and Handoff

Design flexible card components, document the whole library, and hand it to developers with a spec and a final accessibility and consistency review.

3 lessons

Cards: Containers, Hierarchy, and Flexible ContentContent · 45 min

LMS Access

Documenting Components in Figma and StorybookContent · 50 min

LMS Access

Developer Handoff and the Pre-Ship ReviewContent · 50 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

ui designdesign systemscomponent designfigmadesign tokensaccessibilitydeveloper handoffinteraction states