Before We Begin

Sketch Symbol Setup

Create Separate Artboards:

  • Icon Left — Light
  • Icon Left — Regular
  • Icon Left — Solid (if you have the pro )
  • Icon Right — Light
  • Icon Right — Regular
  • Icon Right — Solid (if you have the pro font)
Notice that both the icon and text layers have the same line height of 24px. This ensures correct padding when scaling.

Dynamic Padding with 

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.

Icon Overrides

Now that your symbols are setup, you can use your ! 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!



Source link https://blog.prototypr.io/buttons-with-icons-sketch-paddy-font---713b5c0b56f?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here