Figma Workflow · Page 1 of 8

The Figma workflow

Figma is where you design a website before you build it. Learn the six stages of the workflow and how each one turns into HTML and CSS later in the course.

Design in Figma the way the browser builds a page: with reusable styles, boxes that grow to fit their content, and layouts that stretch.

Lesson Overview

Find your way around Figma
Sign in, learn the five areas of the editor and set up a file.
Build a style guide
Color variables, text styles and a spacing scale.
Auto Layout
Padding, gap, and the difference between Fixed, Hug and Fill.
Components and variants
Build a button once, then reuse it with a hover and a current-page state.
Design responsive frames
One page at phone, tablet and desktop widths, on a column grid.
Prototype and hand off
Link frames, test the flow, export assets and read the design as code.
Quick Tips
Quick fixes for common Figma tasks and problems.

Figma changes often

Figma updates its interface several times a year, so a button may move or get a new name. The ideas on these pages stay the same. If you can’t find something, search for it in Figma’s Help Center (opens in a new tab) or use the search in Figma’s main menu.