I’ve often been frustrated at how much time I spend adjusting spacing between items after making changes in Sketch. Luckily, there are plugins that help greatly with productivity. Are they perfect? No. Do they work well enough to be worth exploring? YES!
The big picture
Paddy plugin describes itself as “Automated padding and spacing for your Sketch layers”. I’ve found it most useful and intuitive to use with buttons, and I keep the spacing job for Anima’s “Auto Layout” plugin.
Anima’s plugin is actually a very broad plugin with many facets - I’ll concentrate on the “Stacked Group” feature, which is basically a fancy group that does everything you ever wished Sketch had incorporated into their app in the first place! It means being able to choose how you want your stack aligned and how much space you want there to be between each element in your stack. Stacks can also be nested, which makes it very powerful indeed! Think of all those vertical spacings you’ve pixel-pushed up and down… you can now automate them all.
In the following example I use paddy to automatically change the background of my button to the new text size. I then use the Anima plugin with it’s “Stacks” feature to automatically distribute the padding between each button:
The way this works in Paddy is very simple. - From the Plugins menu, just write in the values of the padding you want as you would with CSS. Afterwards, editing those values can be done right in the item name. Paddy works as a symbol, which makes using it with simple buttons fantastic.
Anima - Stacked groups
Stacked groups are simple and intuitive to use. Select elements to group, click on the little folder icon, choose how to align the elements and how much spacing you want. You can always edit these values by selecting the stack and returning to the anima plugin which installs itself in the bottom right of inspector bar.
This combination of Paddy and Anima’s stacks works especially well with menus. Watch here as editing a menu bar just automatically adjusts all of the spacing and stays pinned to the right of the page, instead of having to fiddle around with spacing. The Pin settings can be found just underneath Stacked groups in the plugin console.
Stacked groups for content
Using stacked groups and nested Stacked Groups is exceptionally practical in regards to reordering content blocks. Text blocks auto-adjust their vertical spacing; as do photos… text blocks with special spacing under photos.. Whatever you can imagine. It is a valuable time saver. All it requires is a bit of planning to figure out which items get grouped with what, but I was very pleasantly surprised at the ease-of-use of this plugin once I gave it a try!
But seriously.. That penguin can fly, right?
I haven’t come across many bugs, which is why I’m suggesting these plugins - but of course, they add a layer of complexity to layouts. Some strange changes can happen if you aren’t used to these plugins. Make backups of your files! Especially if you might share them with people who don’t have the same plugins. This is a wise course of action for any Sketch add-on.
I hope you’ve been inspired to give these plugins a try. You might find yourself using these plugins differently according to your needs - my goal is to show how useful they can be and encourage everyone to explore these. I think they will prove to be a big time-saver.