In this quick tip I’ll show you a really easy way to add padding and spacing to your designs in Sketch.
Watch the Screencast
A Common UI Design Problem in Sketch
Let me begin by showing you a problem you might have faced many times when working in Sketch. Let’s say you want to create a simple button; you would start with a rectangle shape on the artboard, give it an appropriate color, then you would add text to it on another layer. Lastly, you’d align the objects, group them together, and you’d be done.
Let’s now imagine you want to create another button; similar, but with different text. You’d likely duplicate the one already made, then change the text.
Assuming you want to keep the same lateral padding on each one, you’d then alter the widths of the rectangles depending on how you want them to appear. A manual process:
This might seem like a simple task, but if you have to do this over and over it can actually be really time consuming.
The Solution: Paddy
So let me introduce Paddy; a plugin for Sketch which will save you bags of time.
Setting Padding
Begin by installing the plugin, then, with some text selected on your artboard go to Plugins > Paddy > Enter padding for selection. In the dialog which pops up you can set the padding just as you would in CSS. For example, entering a value of 10 20 will give you 10px of padding on the top and bottom, with 20px to the right and left.
Paddy will then automatically create a backround rectangle, sized exactly as you wanted. But here’s the cool part: when you change the text, the background rectangle will retain the padding measurements you set previously.
Editing the layer name from Background (10 20) to, say, Background (20 20) will change the padding to reflect the new values.
Setting Spacing
This also works when adding spacing between objects. Imagine we have two buttons and we want to add 50px of spacing between them. We select both buttons, then go to Plugins > Paddy > Spacing for selection and we can then enter the value we want. We’d use v units to define vertical spacing, or h units for horizontal.
In this case we’ve used 50v in order to space our two buttons exactly 50px apart, vertically.
As you can see, the button groups have been wrapped in another group, which holds the spacing value. If we were to add another button within this group, it too would inherit the same spacing. And if we were to alter the padding values, or the text length within one of these buttons, the whole thing would be recalculated and repositioned for us.
Conclusion
Paddy is a great plugin; I recommend you download it and take a look at some of the others things it can do. It will definitely save you time!
