Design system
Steps
Last updated 15 January 2026
The Insites Step component allows you to highlight how many steps there are in your Form/Process. And of course, this can be customised to your need as well! Can you add an Icon? Yes, of course. Change the Label? 100%!
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Steps
| Properties | Options | Notes |
|---|---|---|
| Inline | True, False | Set to true to align the bullet and label horizontal and false for vertical. |
| Indicator | Default, Number, Icon | Select the type of indicator to use for the step. |
| State | Default, Current, Complete | Select the state of the step. |
| Hover | True, False | Set the state of the step to hover. |
| Error | True, False | Enable to use error state of the step. |
| Show Progress Bar | True, False | Set to false for the last step. Horizontal resizing for Step Item and .Master layers should be updated to Hug. |