Harsha Vardhan N
Padding is the space inside a design element that separates its content from the border, enhancing better readability and layout organization. In this guide, we will help you add padding using Auto Layout through a demonstration to get you covered.
Add Padding in Figma
- Open Figma on your browser and sign in with your credentials. Next, open the design you’re working on from Recently viewed. If you haven’t started yet, click on New design file.
- After the new or existing design is loaded, navigate to the layer to which you want to add padding. For demonstration, we have added a text box and typed in the text.
- To apply auto layout to a layer, it must be a group or a frame. However, you can leave Figma to make the changes by right-clicking on the layer and selecting Auto layout from the options.
- Once the Auto layout is applied, the layer is converted to a frame, and you will find the Auto layout section added to the Properties panel.
- Auto layout offers horizontal and vertical padding. In this scenario, the padding applies to the text inside. Let’s first add the horizontal padding by dragging the slider or manually input the value.
- The option to add vertical padding is next to horizontal padding. Adjust the value or move the slider to notice the vertical padding added.
Pro Tip: The best part of Auto layout is that it allows flexibility in setting individual padding. This comes in handy if you have different padding requirements for different sides.
Wrapping Up
Congratulations on learning how to add padding in Figma!
While the functionality of auto layout can vary based on the design you’re working with, the process remains the same. Hence, we suggest you experiment more with Auto Layout to use it to its full potential.
Related Reading
How To Resize Frame in Figma with Content
