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