Progress steps
Multi-step flow indicator for onboarding, checkout and setup wizards.
In Figma
Section titled “In Figma”From guidelines/components/progress-loading.md
Properties, variants and anatomy of the Figma components.
Progress steps
Section titled “Progress steps”Multi-step flow indicator.
Variants: 2
| Property | Type / options |
|---|---|
| Orientation | Horizontal · Vertical |
Single step for Progress steps.
Variants: 6
| Property | Type / options |
|---|---|
| Title | text |
| Supporting text | text |
| Show supporting | boolean (on) |
| Orientation | Horizontal · Vertical |
| Status | Complete · Current · Upcoming |
Progress steps
Section titled “Progress steps”Do
- Use for flows of 3–7 steps and show completed, current and upcoming states.
Forbidden
- Never use steps to move between unrelated pages — use Tabs.