Skip to content
search icon
clear
Component Status

Figma

Stepper is now available as a variant in the library

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Stepper component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component is located, click and drag it into the frame/artboard.

How to use

  1. Place the first Stepper on your frame/artboard. 2.Toggle the grid layout on/off by using the following shortcut:
    Mac: Control + G PC: Ctrl + Shift + 4
  2. Locate the Design tab in the Inspector Panel.
  3. Rename the title.
  4. Add a description if needed, if not hide the layer.
  5. Resize the stepper to the width and height needed. Keep in mind that maximum width for the Stepper is 451 px
  6. Choose the state and type of your Stepper in the control panel
  7. If using the icon stepper, change the icon:
    • Locate the icon in the Assets Panel
    • Drag and drop the icon into the Placeholder icon
  8. Repeat steps 1–9 until all steps are inserted.
  9. Top align the steps. Make sure to use 8 px spacing between each step.
  10. Select all the stepper layers and convert them to a frame/artboard by using the following shortcut:
    • Mac: Command + Option + G
    • PC: Ctrl + ALT + G
  11. Make sure to name the new group.
  12. Locate the Design tab in the Inspector Panel.
  13. Under the Constraints section, set up constraints.
Edit this page on GitHub