Free through lesson 3

UI/UX Design and Figma for Beginners

From the principles of spacing and proximity, typography, and color and contrast, through Figma's frames, Auto Layout, and components, information architecture, state design, and responsive layout, translating design tokens into CSS, all the way to prototyping, usability testing, and accessibility. Across 20 lessons, you'll decide for yourself what to build and how it should look, and get all the way to something you can hand off for implementation. Every claim about design is backed by values measured from samples actually rendered in the browser.

Start from lesson 1 Unlock every course

Curriculum

The 20 lessons are grouped into 5 chapters. We recommend working through them in order starting from Chapter 1, but feel free to just skim the parts that interest you. Note: Since Figma's interface changes between versions, the instructions focus on the underlying concepts, which you'll then confirm with HTML/CSS demos. The demos can be previewed right in the browser.

Chapter 1 — Train your eye for UI (lessons 1–4)

You'll verify three core principles - spacing and proximity, typography, and color and contrast - using real numbers like pixel values for spacing and contrast ratios. By the end, you'll be able to break good and bad UI down by criteria and put what makes them work (or not) into words.

1

Spacing and proximity (group what's related)

A spacing scale that keeps every gap a multiple of 4px, and the proximity principle: the more related two elements are, the closer they go. Includes verifying spacing by measuring rendered pixels.

Free
2

Typography (scaling type with a modular scale)

How to set font sizes with a modular scale - 16px base, 1.25 ratio - and use it to create a clear hierarchy for headings. Covers how many steps to use, line height, and Figma text styles.

Free
3

Color and contrast (choosing readable colors by ratio)

Contrast ratio - the brightness ratio between text and background - and WCAG thresholds (4.5:1 body text, 3:1 large text, 7:1 AAA). Run the formula in Python on your brand color, body text, and grays.

Free
4

Breaking down good UI (putting gut feeling into words)

How to break good UI into spacing, typography, contrast, and tap target size, and put each into words. Wraps up the chapter by explaining a good vs. bad button in terms of height and contrast ratio.

🔒 Basic

Chapter 2 — Working with Figma (lessons 5–8)

You'll learn frames and layers, Auto Layout, components and variants, and styles side by side with their HTML/CSS counterparts (nesting, Flexbox, classes, and CSS variables). Because the focus is on the underlying concepts rather than screenshots, this holds up even as Figma's interface changes.

5

Frames and layers (containers and stacking)

How to read Figma's frames (containers) and layers (stacking) by mapping them to HTML nesting and box-sizing. Covers how to name your layers and how to decide what should become its own frame.

🔒 Basic
6

Auto Layout and Flexbox (layouts that adapt to their content)

Mapping Figma's Auto Layout to CSS Flexbox, and arranging elements with just three settings: direction, gap, and alignment. Covers why manually placed elements break, and how to build with nesting.

🔒 Basic
7

Components and variants (one part, many types and sizes)

How to turn a part you reuse into a component, and give it types (primary/secondary) and sizes (sm/md) as variants. Covers how this maps to React props, and tips for not adding too many variants.

🔒 Basic
8

Styles (sharing color and type for one-place changes)

Mapping Figma's shared styles (color and text) to CSS custom properties, so a single change updates everything at once. Covers why you should avoid hardcoding values, and how to name things by role.

🔒 Basic

Chapter 3 — Designing a screen (lessons 9–12)

You'll use information architecture to decide your heading hierarchy, turn that into regions and layout with a wireframe, and design 4 states including loading, error, and empty. By the end, you'll build responsive layouts where the number of columns changes with the available width.

9

Information architecture (structure through heading hierarchy)

Before styling anything, information architecture decides what to show, in what order, and at what level. Covers heading rules - one h1, don't skip levels - and separating meaning from appearance.

🔒 Basic
10

Wireframes (deciding layout without color)

A low-fidelity sketch that drops decoration and decides a screen's structure using only regions and layout. Covers building a skeleton with header, main, aside, and footer landmarks, and when to stop.

🔒 Basic
11

State design (designing empty, loading, and error states up front)

Designing the 4 states every screen needs: loading, error, empty, and data. Covers what gets neglected when you only design the happy path, and the next step to show in empty and error states.

🔒 Basic
12

Responsive design (changing column count with width)

Responsive design that rearranges layout to fit screen width. Covers mobile-first design (narrow widths as default), switching 1 to 3 columns with container queries, and which widths to check.

🔒 Basic

Chapter 4 — Design systems and handoff to implementation (lessons 13–16)

You'll turn color, spacing, and corner radius into named values (design tokens), agree on a naming convention, and hand them to developers as a reference table. By the end, you'll build a button using only tokens and confirm that the design values match the computed CSS values.

13

Design tokens (naming your colors and spacing)

Design tokens bring color, spacing, corner radius, and font size together as named values in one place. Covers the flow for converting JSON tokens into CSS variables, and the idea of naming by role.

🔒 Basic
14

Naming conventions (group-meaning consistency)

A naming convention that keeps token and layer names consistent: lowercase, kebab-case, in a "group-meaning" order. Covers making the rule machine-checkable, and why you name things by role.

🔒 Basic
15

Handoff to developers (sharing a token reference table)

A reference table of token names and values for handing off your design. Covers why to share names, not just values, which spacing/state details get missed, and keeping it updated.

🔒 Basic
16

Bringing it into CSS (building a button with tokens alone)

Turning design tokens into CSS variables and building a button using only var(), no hardcoded values. Covers checking that computed style matches the token, and the link to the HTML/CSS course.

🔒 Basic

Chapter 5 — Validating your design (lessons 17–20)

You'll try out the flow with a prototype that links screens together, then check whether the screen actually works using task-based usability testing and 4 accessibility checkpoints. To close out all 20 lessons, you'll run the measure → discover → fix → re-measure loop and compare the before/after numbers.

17

Prototypes (linking screens to try the flow)

A clickable prototype that links screens together, used to check the flow before implementation. Covers connecting screens as early as wireframes, and building starting from the main user flows.

🔒 Basic
18

Usability testing (can they complete the task?)

Usability testing gives a concrete task instead of asking for opinions, then tracks completion, steps taken, and where people get stuck. Start with about 5 participants, and don't lead them.

🔒 Basic
19

Accessibility (alt text, labels, and contrast)

The first 4 accessibility checks for making a screen usable by more people: image alt text, input labels, button names, and contrast. Covers keyboard operation and what to address at the design stage.

🔒 Basic
20

Running the improvement loop (measure → discover → fix → re-measure)

Design isn't finished once built - covers running the measure → discover → fix → re-measure loop. This final lesson compares before/after numbers for tap size and contrast, and reviews all 20 lessons.

🔒 Basic

Once you've finished all 20 lessons, move on to the Intro to HTML/CSS course to build the screens you designed with your own hands, or the Intro to React course to implement components. A membership unlocks every course.