<aside> 👀 This was designed before Figma introduced Variants as a feature

</aside>

Step 1

Arrange all the elements you would for a button with the 'worst case scenario' in mind

Step 2

Design the button keeping the 'worst case scenario' mind. In most cases this could be the 'focussed' state

Step 3

Componentise

Step 3

Stretch test

<aside> 👀 This is now possible in Figma without needing to double click as Figma's 'hug and fill' property works even with 'auto-layout' elements.

</aside>

The below shown example is sure to happen. For now since we also want to maintain the integrity of the 'auto-layout' property, we'll ignore this. Although it is still possible to stretch the element by double clicking (to get one layer deeper) and then stretching the button.