listebilde
>

A more automated workflow in Sketch

Claudelle Girard 
20. april 2018

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.

Some specifics

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:

Animated gif of buttons resizing
> Automatic button resizing

Paddy plugin

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.

Screenshot of the Paddy plugin user input field
> Input field for Paddy in the Plugins menu

Screenshot of Paddy's editable values
> Editable Paddy values directly accessible in the Layers List

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.

Screenshot of Stacked Groups window in Anima plugin
> Stacked Groups window in Anima plugin

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.

Animated Gif of auto-adjusting menu layout
> Auto-adjusting menu using Paddy, Anima’s Stacked groups, and Pin feature.

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!

Animated GIF of auto-adjusting text blocks
> Blocks keep all of their vertical spacing after inserting text

Animated GIF of auto-reordering content
> Reordering content with Stacked Groups
Penguin meme
> How I feel using these plugins

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.

Paddy:

https://github.com/DWilliames/paddy-sketch-plugin


Anima:

https://www.animaapp.com/

Temaer