- Anima for Sketch
- Anima for Sketch
- Install Plugin
- Install Plugin
- Create a Project
- Create a Project
- Preview & Sync Project
- Preview & Sync Project
- Upgrade a Team
- Upgrade a Team
- Tutorial Files
- Tutorial Files
- Introduction
- Introduction
- Pins
- Pins
- Stacks (Flexbox)
- Stacks (Flexbox)
- Padding
- Padding
- Screen Presets
- Screen Presets
- Keyboard Shortcuts
- Keyboard Shortcuts
- Symbols
- Symbols
- Examples
- Examples
- Introduction
- Introduction
- Links
- Links
- Breakpoints
- Set Homepage
- Breakpoints
- Set Homepage
- Hover Effects
- Hover Effects
- Entrance Animation
- Entrance Animation
- Fixed Position
- Fixed Position
- Text Input & Forms
- Text Input & Forms
- Videos/GIFs/Lottie
- Videos/GIFs/Lottie
- Embed Code
- Embed Code
- Interaction & Animation
- Interaction & Animation
- Interactions Intro
- Interactions Intro
- Samples
- Samples
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Publish Website
- Custom Domains
- Custom Domains
- Analytics
- Analytics
- Project Settings
- Project Settings
Getting Started
Layout
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
Padding
What is Padding?
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.
How To Use Padding
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
Padding Controls
- Click the Padding input toggle 🔁 or click below the Padding values to switch input modes
- Click & drag a label to adjust the Padding values
Symbols — Padding Overrides
- 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
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 for Nested Symbols
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]
❗️Important
Make sure that Padding and Stack for Neste Symbol is enabled from the Anima Settings.
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!