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 🎉
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.
- 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.
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
Stacks are a popular feature, and today we have a few treats for Stacks fans:
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.
You can now use negative values. Main use-case here is overlapping border.
Click the spacing label and drag it to the sides. Happy times.