Skip to main content

Stepper

Not in SB​

Steppers guide users through the steps of a task, creating clear pathways that help users navigate complex processes with confidence and clarity.

When to Use​

When a task is more advanced or complicated, visual help from a stepper lets the user know where they are in the current process.

Guidelines​

  • Avoid titles that are too long. Titles should be to the point and short, no more than three words if possible
  • Keep the item labels as short as possible
  • Use meaningful item labels that explain the function
  • Item labels should be in the active tense
  • Do not mix nouns and verbs. Pick one or the other
  • Always use icons that clearly communicate their intended purpose

Implementation in Figma​

  1. In Figma go to the Assets Panel and search for Stepper.
  2. Drag and drop the component in your frame.
  3. Rename and resize the component if needed.
  4. Choose the variant from the Design Panel.