Adding border strokes to your layout elements
You can add a solid border to layers (for example, Row, Column, Button etc) in your email designs by clicking 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.
Note that email clients do not support gradient borders, so if you use a gradient fill on your Figma stroke, it will fallback to the first solid color of your gradient in the final HTML export.
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 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.
Note that email clients do not support gradient borders, so if you use a gradient fill on your divider, it will fallback to the first solid color of your gradient in the final HTML export.
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.
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 your layer, then setting a rounded corner value on your layer using the Corner Radius property in Figma.
Heads up for image based content. If you apply a mobile border radius that is smaller than the desktop radius, the image is exported as a square JPG to preserve the full image area. This allows the smaller radius to be applied on mobile, but means the radius is not baked into the PNG. As a result, Outlook will render the image with square corners, since it does not support CSS border radius.
Note that email clients do not support border radius for border strokes, so if you use a border radius on a layout element that contains a Figma stroke, it will fallback to non-rounded square borders in the final HTML export.
Important notes on using border radius with strokes
Border radius will work reliably on any Column layers that also have a stroke applied. However, it will not work on Row layers, as these are HTML tables (which sadly don't support border radius for strokes).
Unfortunately, border radius is not supported in any versions of Outlook, so those clients will always fall back to square corners regardless of the setup.
For best results, please apply the corner radius directly to the Emailify Column layer that has the stroke, rather than a Row or Wrapper, just still being mindful that they will not render the rounded corners when viewed in any version of Outlook.