I’m currently refining my design system in Figma and have encountered a challenge in managing autonomous components (like buttons or links that work independently) versus nested components that need to be part of a structured list or group to function properly.
For example, I’ve created a Stepper Item component that represents a single step in a stepper flow. To create a complete stepper, multiple Stepper Items need to be combined. The challenge is that the number of these nested components can vary depending on the project, which complicates things:
- Option 1: I could create variants for each possible configuration (a stepper with 3 steps, a stepper with 4 steps, a stepper with 5 steps, etc.), but this quickly becomes unmanageable due to the sheer number of potential combinations.
- Option 2: I could create a default component with a large number of nested components (like a Stepper with many Stepper Items) and control their visibility as needed. However, this approach could result in heavy and bloated files if applied across multiple components.
I’m looking for a more efficient and lightweight way to handle these “Nested Component List” based components. Have any of you faced similar challenges? How do you approach this situation to keep your design systems flexible and easy to maintain?
I call it “sets” and rely on instance swap property. As an example, I am going to use a dropdown list/menu, but the idea expands over any component that has dynamic repeated content.
A dropdown list component has a prop items
By default, the items property is linked to a set that contains a single group made of 10 list items. As you can see I can have up to three groups from the instance swap menu.
A group is a component that is made of a list group header and a few items
Items in a group is an instance of another component that contains list items only. They are swappable and I have multiple sets of 5, 10, 15 and 20 list items
And this is how it works all together
Hope that helps.
Here is another example of the same approach but for navigation
This method proved itself to be efficient since I only use layers I need with no overhead.
Hi @Pavel_Kiselev
Indeed, your suggestion aligns perfectly with Option 1 that I mentioned, and that’s basically how I do it now, but you’re doing it even better! It does require creating a lot of variants for all components, but it works.
It would be great if Figma could develop a “number” property that allows dynamically controlling the number of nested components.
Thanks a lot for describing your solution; it’s really helpful!
It does not require variants, but components. I use instance swap to keep memory use under control
