Adding dynamic and personalized content using Emailify

You can add dynamic content to your emails using a combination of merge tags (provided by your email marketing platform) and custom code blocks (in the syntax that your email marketing platform uses).

Video Tutorial: Add dynamic content to HTML emails in Figma

This video walks through how to add dynamic content to HTML emails in Figma using the Emailify plugin.

Video Tutorial: Adding a dynamic product feed to your Klaviyo emails in Figma

This video walks through how to add custom Klaviyo product feeds into custom HTML templates with the Emailify Figma Plugin.

Video Tutorial: Create Klaviyo abandoned cart flow email template in Figma

This video walks through how to add custom Klaviyo abandoned cart flows into custom HTML templates with the Emailify Figma Plugin.

Adding platform specific personalization content ​

You can add personalised text for things like people's names by adding the merge tags from your email service provider (for example, MailChimp, Klaviyo etc). You can do this by adding your merge tag into your Emailify text content layers.

As an example, adding Hello, %FIRSTNAME% or Hello, *|FNAME|* (depending on your platform's syntax and values) to your Figma text layer's content will make merge tag will automatically be swapped out with the real data when the email gets sent out.

As these tags will be different based on the platform you're using to send your emails, please reference your own email service provider's template documentation to find out which tags are available to use.

Some platform specific template variable documentation ​

Links to some (but not all) popular platforms are listed below:

Add if/else logic between your Row, Wrapper or Hero Layers ​

You can use the 🧑‍💻 Custom Code layer type to insert custom templating logic between the rows in your designs; you need to make sure the syntax is correct for the email marketing platform that you're using; but it would look something like:

{% if customer_type == 'premium' %}

Emailify Row Here

{% else %}

Another Emailify Row Here

{% endif %}

Add personalized/dynamic images ​

You can override the image URL for a certain image layer in your email designs by adding a value to the Override Image Src input field. You can either use a URL for an image that's already uploaded somewhere (for example, https://mycdn/img.jpg) or a dynamic variable for your email platform's templating language (for example, { variable.my_image }) which will be automatically added to the src attribute of the <img /> tag when the HTML is exported.

Optionally setting the height (with an "auto" width) for a dynamic image ​

For dynamic images where you want to control the height while letting the width adjust naturally (as the dimensions of the dynamic image file URL may not be known ahead of time), you need to do the following in Figma:

  1. Enable Lock aspect ratio on the image layer in the Figma UI.
  2. Set a "Max height* value for the image layer in the Figma UI.

Once these are set, the image will render with a fixed height (matching your max-height in Figma) and an auto-adjusted width, instead of the default behavior (fixed width, auto height). This ensures that your dynamic images maintain the correct vertical space while preserving their natural aspect ratio.

This behavior only applies to images using dynamic URLs; static Emailify-exported images or images in MJML platforms are not affected.

Truncate long custom text content ​

Adding long dynamic text content tags to your email designs can sometimes affect the design by artificially increasing the height of certain elements or background images, etc, where the final content (eventually replacing the dynamic placeholder content tags) in your email send may be shorter than the length of the dynamic content tag itself.

To mitigate this effect, you can set your Figma text layer to be truncated onto any maximum number of lines that you specify, which you can do by following the steps below:

  1. Click on your Text layer in the Figma Emailfiy frame design
  2. Set the Text layer's text sizing setting value to Auto width
  3. Open the Type settings panel (by clicking the ... icon)
  4. Set the Truncate text option to Truncate enabled
  5. Set the Max lines property (underneath) to the maximum number of lines your text should overflow onto
  6. Set the Text layer's Auto layout Horizontal resizing property value to Fill container

This will only apply the truncation in your Figma canvas, to avoid the full dynamic text value taking up more height than it should; the final HTML export won't include any kind of truncation, as the dynamic text will automatically be swapped out for real content when the final email is sent to your audience via the email marketing platform you're using the dynamic content tags for.

Adding dynamic color and font family variables ​

Dynamic color variables ​

If you want to make any background color, text color or stroke color in your email designs render as a dynamic code snippet (for example, {{ primary_color }}) instead of its normal hex value from the Figma color (for example, #000000); you can do this by creating a Figma color style and ensuring the color style Name contains double curly brackets (for example, {{ my_color_var_name }}), and that Name value from your color style will automatically be used as the color, background-color or border-color CSS value when the HTML is generated from the Emailify plugin.

Dynamic font family variables ​

Similarly, if you want to make any font-family CSS value color render as a dynamic code snippet (for example, {{ customer.font_family }}) instead of its normal font value from the Figma color (for example, Arial, sans-serif); you can do this by creating a Figma text style and ensuring the text style Name contains double curly brackets (for example, {{ my_font_var_name }}), and that Name value from your color style will automatically be used as the font-family, CSS value when the HTML is generated from the Emailify plugin.

Looping a Data Table Row with dynamic data ​

To iterate over data from your email platform, select a Data Table Row and open Settings. Add the loop syntax to Opening Code Wrapper (for example, {% for product in collection.products %}) and Closing Code Wrapper (for example, {% endfor %}). Emailify inserts the tags around that row's <tr></tr> element in the exported HTML.

Once you've added your wrapper tags to the Data Table Row layer, you can populate the dynamic content inside the layers of your row as needed.

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.