Figma Stepper

Q: Which components pair with the stepper?

Checkout , Forms and Login Pages carry the flows a stepper tracks, built on the same variables.

Figma Stepper

Preview

Figma Stepper

Figma Stepper Component

Checkouts, onboarding and setup wizards need to show where the user stands. The stepper does that: a row of steps with the current one highlighted and the finished ones marked. Frames X ships two sets, StepperNumeric with numbered circles and Stepper with plain markers, 40 variants each: Horizontal and Vertical types, two to six items, Medium and Small sizes, labels on or off.

Count the real steps before picking a variant. Three to five reads at a glance, and a six-step flow is usually two flows pretending to be one.

What is in the stepper kit

StepperNumeric. Numbered circles with a connector line, for flows where order matters and users may go back.
Stepper. The same structure with plain markers, for compact flows where numbering would add noise.
Steps. Every item carries Incomplete, Focused and Complete states, in Medium and Small sizes at 40 and 32px, horizontal and vertical.

How to make a stepper in Figma

Build one step first. A circle with a number, a label beside or under it, and Incomplete, Focused and Complete as variant states.
Add the connector. A thin line between steps, set to fill, so the row stretches with its container.
Stack steps and connectors in auto layout: horizontal for checkouts, vertical for settings and sidebars.
Turn the row into a component set with Type, Size, Items and Labels properties, one set covering two to six steps.
Wire the prototype so Next moves the Focused state one step forward and marks the previous one Complete.

Stepper UI best practices

Name the steps. Labels like Shipping, Payment and Review let users judge the whole trip before step one.
Let users click a completed step to go back and fix a typo instead of restarting the flow.
Use the vertical type when steps carry content. Settings and review screens can expand under each step.
Keep one flow per stepper. When a step grows sub-steps, give it its own screen instead of nesting markers.
Collapse optional steps instead of showing eight circles on step one. A shorter row gets more users past the start.

Stepper Anatomy

Set	Variants	Properties	Copy to Figma
StepperNumeric	40	Type Horizontal, VerticalSize Medium, SmallItems x2, x3, x4, x5, x6Labels True, False
Stepper	40	Type Horizontal, VerticalSize Medium, SmallItems x2, x3, x4, x5, x6Labels True, False

The file carries two stepper sets with 80 variants: StepperNumeric and Stepper, each in Horizontal and Vertical types, two to six items, Medium and Small step sizes at 40 and 32px, with labels on or off.

Stepper AI prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a Stepper component set in Figma. Step: a circle with a number, 40px Medium and 32px Small, with Incomplete, Focused and Complete state variants bound to neutral and brand variables. Connector: a thin line set to fill between steps. Row: steps and connectors in auto layout, Horizontal and Vertical types, Items from x2 to x6, optional text labels beside or under each step. Add Type, Size, Items and Labels variant properties. Then make a second set with plain markers instead of numbers for compact flows.

Figma stepper FAQ

What is stepper UI?

A progress control for multi-step flows: a row of steps with the current one highlighted and the finished ones marked. Checkouts, onboarding and setup wizards are the usual homes.

What is the difference between a stepper and a progress bar?

A progress bar shows how much of one task is done. A stepper shows named stages the user moves through, so it fits flows where each step has its own screen or form.

How many steps should a stepper show?

Three to five reads at a glance. The sets go up to six items, and past that the flow usually wants to be split or some steps want to collapse.

Is this the same as the plus-minus stepper input?

No. The quantity control with minus and plus is the counter. The stepper on this page tracks progress through a flow, and search uses one word for both.

Which components pair with the stepper?

Checkout, Forms and Login Pages carry the flows a stepper tracks, built on the same variables.

Source