HowTo: Sketch Smart Layout for buttons with icons and labels

HowTo: Sketch Smart Layout for buttons with icons and labels
If you haven’t heard, sketch has released their biggest feature since symbol overrides.

Smart Layout, brings a huge amount of flexibility to symbols and ultimately reduces the need to have so many symbols showing different variations. For example, when creating symbols for table views we would have to create separate symbols for different permutations, 2 lines of text, 3 lines etc. Now with this new feature, we can just do one symbol and resize it as we would in development.

Buttons with icons

Buttons are one of the simplest and most powerful applications for this new feature.

Producing a symbol for a button with an icon has always been a fiddle. Previously, you had to do some wizardry with rotating nested symbols and it was always a confusing pain. If you don’t believe me go read this guide that I’ve had bookmarked for the last 18months to reference every time I’ve tried to do this https://medium.com/sketch-app-sources/sketch-hacks-make-a-resizable-button-with-icon-label-totally-native-edition-6a1ff5b48e0e

Fortunately, I never have to read that super helpful, but long, blog post again! We can do that same job really easily with the new Smart Layout feature.

Create your button

Here we have a simple button with an icon, all lovingly aligned and ready to be made into a symbol.

Smart button in sketch

Create the symbol

The first thing we want to do is create the symbol and choose the correct dropdown from the smart layout picker. In this case, we need to select ‘Horizontally Center Layout’.

Sketch smart layout buttons

Fixing the icon

The horizontal center layout will take care of most of the symbol but we need to make sure that our icon stays proportional as currently, it will move around with the text. To do so just fix its size and pin it if you want it to stay to one side.

Smart buttons in sketch

And that’s it!

Seriously it is now that simple! Just go back to your layout, type in the text you want for the button and it will magically realign keeping the symbol and the text in the right place every time.

Smart Buttons in sketch

Further reading

For more information on smart layout, we’d recommend looking at the official guide here: https://medium.com/sketch-app-sources/sketch-58-smart-layout-117616e6c241


Looking for something else?

Search over 400 blog posts from our team

Want to hear more?

Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!