<aside> 🔗 Medium Link: https://chinguyenthuy.medium.com/sketch-how-to-make-scalable-symbol-1-button-8f6add97d9dd
</aside>
The container does not scale to the size of the content. 🥴
<aside> 🔥 If you’re having this problem, you are in the right place! This article may help you.
</aside>
Do you want your symbol will work like this?
<aside> 🔥 Let me show you how by utilizing Styling and **Smart Layout** 😉
</aside>
There are 2 settings needed for the label in the Inspector panel: Resizing & Alignment
⚙️ Resizing: Pin to the left, top, and right. (Benefit: keep the label's position relative to the rectangle)
⚙️ Alignment: Auto width and aligned centre(Benefit: allow the size of the text to grow centrally when the content grows)
There are 2 settings needed for the component in the Inspector panel: Symbol Masters & Layout.
⚙️ Symbol Masters: Adjust content on resize(Benefit: the layer to resize relative to the art-board when it grows)
⚙️ Layout: Horizontal
ℹ️ Something to take note of about Layout setting: The direction-setting depends on how the design system defines the location of the button.
If you want your button content to grow from right to left, or the buttons are always positioned on the right side of the screen, then the layout here should be Horizontal from Right to Left.
Button grows from Right to Left
If the buttons are set to put on the left side of the screen, the setting should be the other way round, from Left to Right
Button grows from Left to Right
The component should be lay-outed centred if you want the button to expand on both sides.
If there is any rule for the minimum width for the button component in the design system, you can set it here. No matter how short the label is, the container always remains the minimum width.
Minimum width setting