Introducing Padding in Sketch with Anima

Stacks Gets Upgrades Too

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

Stack Upgrades

Stacks are a popular feature, and today we have a few treats for Stacks fans:

Symbol Resizing

If you have a single Stack in a symbol, it will now resize the symbol instance for overrides. This is optional, but default for new Stacks is On.

Negative Spacing

You can now use negative values. Main use-case here is overlapping border.

Scrubbing Spacing

Click the spacing label and drag it to the sides. Happy times.

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram, and vote for new features at UserVoice.

Stay creative!
❤️ Anima team