Mobile app version of vmapp.org
Login or Join
Shakeerah625

: 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

@Shakeerah625

Posted in: #SketchApp #Workflow

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Shakeerah625

2 Comments

Sorted by latest first Latest Oldest Best

 

@Correia448

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.

10% popularity Vote Up Vote Down


 

@Jessie844

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme