Specialized Digital Design

UI Component Design

Stop designing screens. Start designing components.

12 lessons4 modules9h 45m durationbeginner level

Instructor: StretchLearn Faculty

About this course

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.

Curriculum

Module 1: From Screens to Components3 lessons

What a Component Actually IsPreview45m
The Grid, the 8-Point System, and Spacing Tokens🔒45m
Naming, Variants, and the State Matrix🔒45m

Module 2: Design Tokens and Accessible Foundations3 lessons

Design Tokens for Colour, Type, and Radius🔒50m
Colour Contrast and WCAG by Default🔒50m
Touch Targets, Hit Areas, and Focus Rings🔒45m

Module 3: Building the Core Components3 lessons

Buttons: Variants, Hierarchy, and States🔒50m
Form Fields: Inputs, Labels, Validation, and Errors🔒55m
Modals and Navigation: Overlays, Bars, and Tabs🔒55m

Module 4: Cards, Documentation, and Handoff3 lessons

Cards: Containers, Hierarchy, and Flexible Content🔒45m
Documenting Components in Figma and Storybook🔒50m
Developer Handoff and the Pre-Ship Review🔒50m