Hi everyone,
I’m running into an issue with Auto Layout and component variants and I’m not sure what the correct approach is.
I have a button component with two variants:
- Default
- Hold / While pressing, where the button slightly scales up (as a press feedback)
When the component is used on its own, the scale difference between Default and Hold works as expected.
However, when I place the button inside a mobile screen frame with Auto Layout, I need to set the button to Width = Fill container to make it responsive. The problem is: in this case, when I switch to the Hold variant, the scale effect is no longer visible: Default and Hold look identical, because Auto Layout keeps the width constrained to the parent.
So my questions are:
- Is this a known limitation of Auto Layout with scaling variants?
- Is there a recommended way to represent a Hold state that involves scaling when the component must use Fill?
- From a handoff perspective, should this kind of interaction be documented rather than visually simulated in Auto Layout?
Any best practice or workaround would be appreciated. Thanks!