Hi Figma Community!
I'm working on building a robust Stepper component for my companies design library, and I've hit a bit of a snag with Auto Layout and responsiveness when combined with multiple components.
What I've Achieved So Far:
I've successfully built a functional Stepper component that allows designers to:
- Switch between different numbers of steps (e.g., 3-step, 4-step, 5-step variations).
- Control the state of each step (inactive, active, completed - where completed steps show a checkmark instead of a number).
- Toggle the visibility of optional text titles beneath each step indicator.
The Challenge: Responsive Behavior with Auto Layout
Where I'm struggling is making the entire stepper component responsive while preserving all the variant functionality. My goal is to allow designers to drag an instance of the Stepper and resize its overall width. When they do this:
- The step indicators (circles with numbers/checkmarks) should remain a fixed size.
- The optional titles beneath the indicators should also maintain their size and relative position.
- Only the progress bar segments connecting the step indicators should shrink or expand proportionally to fill the available space.
I'm finding it difficult to configure the Auto Layout settings (Hug, Fill, Fixed, spacing, etc.) across the nested variants and individual step elements to achieve this specific resizing behavior without breaking the ability to easily switch step counts or update states.
My Question for the Community:
Does anyone have experience building a similarly complex, responsive component with nested variants? I'd be incredibly grateful for any advice, best practices, tutorials, or even example Figma files that demonstrate how to structure the layers and apply Auto Layout properties to:
- Allow the connecting lines (progress bar segments) to "Fill container" effectively. I think part of the issue is the order im grouping my components. I can make the progress bar responsive but then it causes other parts of the component to break.
I feel like I'm so close, but I'm missing a key insight into how Figma handles Auto Layout in these more advanced scenarios.
Thanks in advance for any help or pointers you can offer!