Here’s how you can create a Figma Breadcrumb Component (Stepper) using nestled components, auto-layout, and constraints & resizing.
It’s not always that easy to create responsive and dynamic components in Figma that adjust well to being re-sized. The breadcrumb or stepper elements can one of those difficult components to create. Especially if you want to create a breadcrumb with lines and arrows that grow with the size of the container.
When creating components in Figma (for example to be used in a Design System), one must think like a front-end developer. And that means thinking strategically before building the component.
I usually ask myself these following questions before creating a component:
- What parts does this component consist of?
- Are there any sub-parts in the components that should be dynamic and changeable? Color palettes, changeable text, shapes, etc.
- Does this component need to be responsive? Should it be stretchable and squeezable?
In the case of creating a Figma component of a UI breadcrumb or stepper, the answer is yes to all of the questions.
See also: 7 Best Figma Plugins (2021) Design Systems & Developers
Tutorial & Explanation
To give you a visual overview first, here’s the breadcrumb stepper component built-in Figma for a Design System. I made them for both dark and light mode themes, which is why they are double.
My vision was to create a component that is reusable, responsive, and dynamic.
Step-by-Step Guide
1. Create a component
- Create a component (Named e.g. “Breadcrumb Stepper”)
2. Create two properties in the component
- Create two properties in the component (Name e.g. “Step” and “Component”)
- You can create properties by clicking on the “…” on the right sidebar, to the right of Variants (see Image below)
3. Create the “Step” components
Create the components that are going to be nestled into the breadcrumbs/stepper.
In the image below are four examples of such components. The components can of course be edited later (changing the number from 1, to a 2, 3, 4 etc, as well as changing the text).
So this is essentially the step where you create the UI mockups for the breadcrumb.
- The focused step is the step the user is currently on. The unfocused step the earlier or forthcoming steps.
- I call them “Primary” and “Secondary”
Settings for the entire component
- In the “Constraints” settings, choose “Scale”on both vertical and horizontal
- This will allow for resizing of the element
Settings for the group inside the component
- In the “Constraints and Resizing” settings, choose “Hug contents” on both vertical and horizontal
- This will help to keep all the elements in place
Settings for the group of the circle with number
- In the “Resizing” settings, choose “Fixed width” and “Fixed height”
- This will make sure that the circle and its content won’t become distorted when you resize the entire component. The circle will stay a circle with the number centered.
4. Create the breadcrumb/stepper component in the other property you created
Build the breadcrumb components using the components we made in the last step in the “Step” property. This will make sure that the nestled components are linked and can be changed across all documents simultaneously.
Add as many “Step” components as you want, as well as a line to the right side of each “Step” component, except for the last one. If you want to add more steps later, you can easily copy and paste any of the steps (except the last one).
Settings for the entire breadcrumb component
- In the “Constraints and Resizing” settings, choose “Center” for the horizontal and “Hug contents” for the vertical
- This will make sure that the component is center to the width of the container, and that content will be aligned/hugged towards the vertical center.
Settings for each “Step” component in the Breadcrumb
- In the “Resizing” settings, choose “Fixed width” for the horizontal and “Fixed height” for the vertical
- This will make the breadcrumb responsive! You will now be able to drag and squeeze the width of the breadcrumb!
Settings for each line in the Breadcrumb
- In the “Constraints” settings, choose “Scale” for the horizontal and “Top and bottom” for the vertical
- This will make sure that the length of each line between the steps will adjust to the width of the breadcrumb.
Yay! Now you have your finished responsive Figma breadcrumb component!
Thank you for reading, and I really hope this was helpful.
