Before We Begin
- This tutorial assumes you’re already familiar with Sketch Symbols
- If you haven’t used the Paddy Sketch plugin before by David Williames, here’s a great video tutorial.
- Make sure you have Font Awesome. I’ve used the pro version, but there’s lots of icons in the free version too.
Sketch Symbol Setup
Create Separate Artboards:
- Icon Left — Light
- Icon Left — Regular
- Icon Left — Solid (if you have the pro font)
- Icon Right — Light
- Icon Right — Regular
- Icon Right — Solid (if you have the pro font)
Dynamic Padding with Paddy
You’ll see in the layers list, the background layer has [16 24] in it. This is referring to the padding between the text/icon, and the edges of the button. 16px top and bottom, 24px left and right. This means that when you use symbol overrides, the padding will stay consistent and will automatically resize your button.
Now that your symbols are setup, you can use your buttons! You should already be familiar with text overrides. To change an icon, simply enter the icon name in the override field, and you’re done!