Changing the default auto-layout item spacing for your layers โ
By adjusting the Item Spacing property for your Row, Column or other Emailify layout layers (like a Wrapper, Hero or Social icons container), you can define the default amount of spacing in-between the child elements inside of that layer.
For example, setting an item spacing value of 16 to a Column layer will distribute an even amount of spacing (16 pixels) in-between any elements (eg. text, images, buttons etc) inside of that Column layer.
Adding custom vertical spacer elements to your columns โ
If you've already set your default item spacing, but still need an extra bit of vertical spacing between certain layers in your Column, you can add a special Emailify spacer element by clicking on your "Column" layer, then selecting the "Spacer" item from the Quick Add dropdown menu at the bottom of the plugin, and then clicking the Add + button to insert the spacer layer into your Column.
After the spacer 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.
Custom spacer elements will also have the default Item Spacing of its parent element surrounding it, so you take this into account when specifying the Height value of your spacer.
Adding automatic vertical item spacing between your column layers โ
If you'd like to have a column layout style where one layer of content is at the top (eg. a text layer) of the column and the other layer is always at the buttom (eg. a button layer), with variable amount of spacing in between (depending on the content length), you can do this by setting your "Column" layer's vertical auto-layout setting to Fill container, and then setting the Item Spacing auto-layout setting to Auto.
Override the item spacing value for mobile. If you're using this method to create a split vertical layout for your desktop design, you should also add a mobile override value for the Item Spacing by clicking on the same "Column" layer you applied the above steps to, then click the Settings button, enable the Item Spacing mobile override toggle, and enter a number value of your choice (in pixels) to make the item spacing a static and consistent size on mobile (regardless of the "auto" spacing size on desktop is).
Adding custom vertical margin spacing between your text layer paragraphs โ
You can customize the vertical spacing between paragraphs in your Figma text layers by opening the Figma text properties panel, then adjusting the Paragraph spacing value under the Basics tab. This will determine how much margin-bottom to add to the <p> tags inside that text layer's content when your HTML email is generated.
Please note that if you've added any extra paragraph lines (eg. pressing Enter or Return twice to create a double space), the empty extra paragraph will still be included, and any custom paragraph spacing will also be added as margin-bottom underneath that, too. You can optionally remove these extra/blank paragraphs (as per the video above) to have finer control over the paragraph spacing in your text instead.
You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.