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.

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.