Introducing Padding in Sketch with Anima

Stacks Gets Upgrades Too

Published in

Design + Sketch

3 min readOct 31, 2018

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML, CSS, or React code.

Starting today, it also lets you add padding to your groups and symbols 🎉

Padding means that when you change the content, the background changes dynamically with it. It works great when used with Stacks or Pins. And when used inside Symbols.

How Do I Use It?

Here’s the basic flow:

Group a Text layer with a background Rect.
Click the Padding icon.
Adjust the distance you’d like that background Rectangle to keep from the text.
Edit the values to see it in action.

Padding Controls

Click below the Padding input to toggle modes (See gif).
Click & Drag a label to adjust the Padding values (See gif).

Symbols — Padding Overrides

Select the Padding group and click Create Symbol.
Change the text value using Overrides to see the Padding applying in real-time.
It will also resizes the Symbol instance.

Padding + Stacks = 💥

Stacks allows layers to push each other, and keep a constant spacing between them.

To see how Padding and Stacks play together:

Stack some groups with Padding.
Adjust the Padding of the Padding Group to see how it works.
Advanced: Create a Symbol from that Stack and edit Overrides.
Advanced 2: Add a background with padding to the whole Stack.

Padding + Pins

To see how Padding and Pins play together:

Create a group with Padding.
Pin it to the right of the Artboard.
Edit content to see it in action.

Padding Limitations

Sadly, we don’t support nested symbols with overrides yet (i.e symbol with padding inside a symbol with Stack). If you find it limiting for your use-case, you can vote for Anima features here.

Edit 11/14: Padding now supports Nested Symbols