Figma progress step components

A stepper answers two questions at once: where am I, and how much longer. Checkout, sign up flows, identity verification, workspace onboarding, and any form long enough that showing it on one page would frighten people.

The component itself is small. The decision it supports, whether to break a form into stages at all, is the expensive one. Note what a stepper is not: a progress bar shows a continuous value moving toward an end, while a stepper shows discrete stages with names, and swapping one for the other loses the names.

Three statuses, and exactly one current

Every step here carries a status of incomplete, current, or complete, and the marker comes in two forms: a number, or a check that replaces it once the step is done. Numbers suit flows where people can move backwards and need to keep track; checks suit linear flows where finishing is the whole point.

Either way only one step can be current, which matters in the build as much as the design. The active marker should carry aria-current="step", so that a color change is not the only thing saying where the user is.

Five step bars, and the parts underneath them

The assembled components cover minimal icon rows, minimal icons joined by connecting lines, a text row with a line running under it, centered icons with labels below, and a vertical version where each step occupies a 400px column with room for a description. Each horizontal component ships desktop and mobile layouts, the mobile one built to 343px, so a five-step bar has a defined answer for what happens on a phone rather than an improvised one.

Under all of them sit two base components: a step icon at 24px in sm and 32px in md, and a full step block with label, supporting text, and featured icon options. Editing those two is how you change every stepper in the file at once.

Wiring a flow that knows where it is

In a static mockup you swap statuses by hand. In a prototype that behaves, a number variable holding the current step plus a conditional on each marker gets you a stepper that updates as people move through the flow, and Figma's guide to variables covers the setup.

The flow itself deserves as much attention as the indicator. Nielsen Norman Group's guidance on wizards is worth reading before committing to one: keep steps ordered, make them resumable, and if people need to compare information across stages, a wizard is the wrong container.

Never hide the total either. "Step 2 of 4" is a promise. "Step 2" is a hostage situation.

Labelling steps like a person would

Step labels are the most-skipped copy in a checkout. "Details, Payment, Review" tells someone what is ahead; "Step 1, Step 2, Step 3" tells them what they could already count.

The text line version exists for flows where the words carry the meaning and the markers are just punctuation, and the supporting text slot under each label is where the one-line detail goes that stops people clicking back to check. Keep those labels short: at 343px, a five-step bar leaves under 70px per step, and a label that wraps to three lines on mobile turns a reassuring component into a wall.

When it's time to build, the same steppers exist in code. Untitled UI React progress steps are open source, built with Tailwind CSS and React Aria, with the current step, the completed states, and their semantics handled for you.