Paddy … a really simple solution to a problem we all have whilst designing buttons …
We all make buttons. They are everywhere in our site and application designs. In Sketch, there is really no easy way to handle buttons. Once you have made one, you are good until you have to make the next one, then you have to resize that rectangle so that it fits your new label, constantly checking the distances to make sure it is all spaced correctly.
Creating a dynamic button in Sketch with Paddy is easy. I will walk you through setting up your button, figuring out the padding values and using symbols to see the real value of this plugin. We will also create a button with an icon. Before we start, be sure to download the plugin here : https://github.com/DWilliames/paddy-sketch-plugin or use SketchRunner to install it.
We are going to be using the Layer padding feature for these buttons. Tutorials about the other features will be coming later.
STEP 01 : Create your button and give it a simple label.
STEP 02 : Figuring out your padding values.
Once your label is where you want it, simply select the text and hold the option key while hovering your mouse cursor inside the button. Sketch will show you the distance of the label from the edges of your button.
STEP 03 : Group your button elements.
Select your text and button and click the Group button in the toolbar or use the shortcut, CMD + G.
STEP 04 : Once grouped, we can use Paddy.
First, select your grouped button. Then select Paddy from the plugins menu or use SketchRunner. Be sure to select “Padding for Selection”
STEP 05 : Add the padding values.
The dialog box for Paddy is fairly simple. All you need to do is enter the values that we found earlier, 12 16 12 16. Paddy sets these values in this order, top right bottom left. This is just like CSS. Paddy also lets you shortcut these values like CSS. For instance, you can use a single value like 20, which would apply 20 to all 4 sides. You can also use two values like 20 40, which will apply 20 to the top and bottom, and 40 to the right and left. For this example, we are going to use 12 16 12 16. (we could of also used 12 16) Once you have done that just click ok.
STEP 06 : Paddy Magic.
After doing that your button will not look much different. But. now we can do some Paddy magic! Click inside your button to the text and change it to something long like “Good designers want to be proved wrong, bad designers hope to be proved right.” (this is a nice quote from Andy Budd) Once you have done that, you only need to click outside the text label and voilà!, your button will resize to the padding that we set.
If you look at details of the button in layers panel, you will see that the button layer has a [12 16] appended to it. This is all that the plugin does, it appends those values to the bottom most layer in the group, you can actually change the values there and you will have applied the plugin as if you used the Paddy dialog box.
STEP 07 : Paddy works with symbols too!
Makes it easier to change the button labels. Let’s give it a try. First, create a symbol out of our button by clicking the “Create Symbol” button (there is no shortcut unless you something custom.) The Create new Symbol dialog box will appear. Let’s name this symbol something simple, “text button” and click ok.
STEP 08 : Override that symbol.
Now that our button is a symbol, it is very easy to change the label and allow Paddy to resize our button. Select your new button symbol. One the right the Overrides panel will appear. Type your new label and press enter/return. Thats it! your button is freshly Paddy’ed.
STEP 09 : Lets do a bit fancier button and add an icon.
Create a new button with your icon. Like we did in Step 2, we are going to figure out the padding that we need to set. However, instead of measuring the distance from the text, we are going to select both the icon and the label and measure from there. To do this, select both the icon and label, holding the option key while you place your mouse cursor inside the button to see the measurements.
STEP 10 : Repeat
The rest is simple. Group the three elements just like we did in step 3. Run Paddy and use the values we found in step 9, 8 16 7 8. Let’s skip ahead and make it a symbol and call it “icon button”
Now, there is one special thing that you have to do to make sure that our icon is not going to get all stretched when we change our label. Click the Symbols page in the Pages panel on the left side of the Sketch interface. Next, click into the icon so that it is selected. On the right side of the Sketch interface you will see the Constraints panel. Here we can tell the icon how to behave when the button is resized. Be sure to select “Fix Width” and “Fix Height.” Also select the top and left handles, telling the icon to stay pinned to the top and left side of the button.
STEP 11 : Set some Constraints
With the icon’s constraints set, we can now change our label. Return to the symbol instance of our button and use the overrides panel to change the label.
If you want the icon on the right side, you can do the same thing as mentioned above, just flip where you label and icon are.
Conclusion : That’s it! Now you can make buttons that will always keep their shape. Think of all the time you will save not having to resize buttons all day!
If you love this plugin, why not shout David Williames (the creator of Paddy) a coffee ☕️ via PayPal to share the love! It will definitely help him to be able to support this plugin further. You can also follow him on the twitter @davidwilliames
**Note** Since I’ve posted this, David has said that nested symbol support has been asked for a lot and that he is working on it. Stay tuned!
This is the first in a series of articles that will soon be coming to sketchtools.co. There is nothing there yet, but follow me on twitter or here on Medium to find out when there is.
