Adding dynamic and personalized content using Emailify

Video Tutorial: Add dynamic content to HTML emails in Figma

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

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

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

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'll 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 (eg. https://mycdn/img.jpg) or a dynamic variable for your email platform's templating language (eg. { variable.my_image }) which will be automatically added to the src attribute of the <img /> tag when the HTML is exported.

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

Adding dynamic color variables ​

If you'd like to make any background color, text color or stroke color in your email designs render as a dynamic code snippet (eg. ) instead of its normal hex value from the Figma color (eg. #000000); you can do this by creating a Figma color style and ensuring the color style Name contains double curly brackets (eg. ), 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.

Looping a Data Table Row with dynamic data ​

If you're using a Data Table and need to iterate over some data in your email marketing platform, you can apply a for loop by clicking on a Data Table Row inside of your Data Table, then clicking the Settings button in the plugin header and adding your templating syntax for a loop into the Opening Code Wrapper (eg. {% for product in collection.products %}) and Closing Code Wrapper (eg. {% endfor %}), which will autamatically inject these opening and closing tags around the <tr></tr> HTML table row element in your exported code.

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.