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?