: Sketch button symbol: scalable centered text? I use labels, buttons, filters etc with text in them in my design. I created symbols for all of these to keep it easy to organize. However, when
I use labels, buttons, filters etc with text in them in my design. I created symbols for all of these to keep it easy to organize.
However, when I use instances to change the text in these buttons, and the text is longer/shorter the text will either not be centered anymore or simply break off. Is there a way to fix this? I imagines the resizing section could do something but there's no 'center' option.
Is this not a default feature of Sketch? Are there plugin alternatives?
As you can see this is not desired behavior when changing text. I would like the text to be centered at all times and preferably to have the button scale in width with the text as well.
More posts by @Shakeerah625
2 Comments
Sorted by latest first Latest Oldest Best
For a flexible button that leverages the Resizing feature within Sketch, scroll down to the Tips & Tricks section of this article by Michael Fouquet.
Relevant part of the article:
Doesn’t currently handled nested symbol resizing very well. To get around this, we usually create what we call “spacing blocks”. An example of where this might be necessary is buttons; you drop in a button, give it more text than the default and suddenly the padding is out of whack. For this, we have a show/hide spacing block symbol that drops in semi-transparent “blocks”. The designer now just needs to resize the button until the blocks line up.
It seems you are not setting the text-alignment to center for the text in your symbol button.
You need to do this in the text options:
And your text overrides will be centered.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.