​
Adding padding to your layout layers

To set the height of your layout layers and specify the amount of spacing at the top or bottom of them, you can adjust the Vertical Padding auto-layout property in Figma.

To set the width of the inner content inside your layout layers and specify the amount of spacing on the left or right of them, you can adjust the Horizontal Padding auto-layout property in Figma.

You should always use Padding to set the height of any Row or Column layer (with the layer’s auto-layout height property set to Hug). Setting Fixed heights in Figma won’t be carried over to the final HTML, as the height of elements in HTML are determined by the size of their content (plus any top/bottom padding), so using Padding is the most reliable way to visually design your emails for exporting to HTML.

​
Adding outer padding around multiple Row layers

If you have multiple rows that you’d like to add padding around, you can add a special Wrapper layout layer to your email by clicking on your Emailify frame, selecting Row Wrapper from the Quick Add dropdown menu options, and then clicking Add + to insert it into your email as a new Figma layer.

After you’ve added the Wrapper to your design, you can move your Row(s) into the new Wrapper layer and adjust you can adjust the Horizontal Padding and Vertical Padding auto-layout properties in Figma to create outer padding around the Row layers inside of your Wrapper.

Was this page helpful?

Background ImagesSpacing Between Layers