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 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.

Adding inner padding to your text layers

You can optionally add inner text padding by selecting a Figma text layer in your email while the Settings panel is open, enabling the Inner Padding toggle, then adding any padding values you'd like to apply to the selected text layer.

This will add extra "inner" padding inside of your text layer when it's rendered to HTML, allowing you to specify padding values for certain text layers in your Column without affecting other layers.

You can also optionally override any text layer padding on mobile by enabling the Mobile Padding toggle, then adding any padding values you'd like to apply to the selected text layer, which will only be visible when viewing your HTML email on mobile.

Adding inner padding to your divider line layers

You can optionally add inner padding to your dividers by selecting an Emailify divider layer in your email while the Settings panel is open, enabling the Inner Padding toggle, then adding any padding values you'd like to apply to the selected divider layer.

This will add extra "inner" padding inside of your divider layer when it's rendered to HTML, allowing you to specify padding values for certain text layers in your Column without affecting other layers.

You can also optionally override any Emailify divider layer padding on mobile by enabling the Mobile Padding toggle, then adding any padding values you'd like to apply to the selected divider layer, which will only be visible when viewing your HTML email on mobile.