Built with ❤️   in NYC & TLV
Padding means that when you change the content, the background changes dynamically with it. It works great when used with Stacks, Pins, and inside Symbols.
Here’s the basic flow:
- Create a Text Layer and select it
- Click the Padding icon in the Layout tab
- Adjust the distance you’d like that background rectangle to keep from the text
- Expand the Padding Group and select its Background Layer to customize it
- Click the Padding input toggle 🔁 or click below the Padding values to switch input modes
- Click & drag a label to adjust the Padding values
- Select the Padding group and click ‘Create Symbol‘
- Change the text value using Overrides to see the Padding applied in real-time
- It will also resizes the Symbol instance
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
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
Example: You have a button Symbol with Padding inside a post cell Symbol that has a Stack and also has Padding.
Here’s how it looks with Overrides:
Sketch Sample File: [Download]
Make sure that Padding and Stack for Neste Symbol is enabled from the Anima Settings.