Adding borders and content dividers to your email layouts

Adding border strokes to your layout elements ​

You can add a solid border to layers (eg. Row, Column, Button etc) in your email designs by clicking on the layer, then applying a Figma stroke to it, and this will automatically be included as a CSS border in the final HTML exported from Emailify.

To add some buffer between the border and inner contents of your layer, you may consider applying padding to those layers after applying your border.

Adding divider lines between your content layers ​

If you need to add a divider line in between any content layers inside of a Column in your email layouts, you can add a special Emailify divider element by clicking on your "Column" layer, then selecting the "Divider" item from the Quick Add dropdown menu at the bottom of the plugin, and then clicking the Add + button to insert the divider line layer into your Column.

After the divider layer has been added to your Column, you can drag and drop the layer in your layers panel to re-order which layers it sits between, and then you can adjust the size of it by adjusting the Height of the layer in its Figma layer properties panel or adjust the background color of it by changing the Fill of your layer in Figma to any solid color.

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.

Adding border radius for backgrounds to your layout elements ​

If you have a background fill set on your Row or Column layout element (without a stroke), you can add a rounded corner effect for your background by clicking on your layer, then setting a rounded corner value on your layer using the Corner Radius property in Figma.