How to use the Listrak Studio with your Figma Design
The process is designed to eliminate manual production tasks, reduce development time, and help ensure your emails are optimized for rendering and performance before they are sent. Listrak Studio serves as a central workspace for creating and publishing all of the assets that make up your email, from images and reusable content sections to Dynamic content and personalized Listrak tags. The workflow consists of four steps:
Setup: Select, prepare and tag your Figma design for conversion.
Generate: Create responsive, production-ready HTML.
Polish: Review how the email will render across devices before publishing. Make any edits or changes at this step as well.
Publish: Configure campaign details and publish directly to Listrak.
Convert your Figma design into a ready-to-send email
Step 1: Setup Your Figma Design
Open Listrak Studio.
Click Build an email.
Select the Figma design you want to convert. Listrak Studio analyzes the structure of your email and prepares it for conversion into HTML.
Click Appy to [X Number of Layers Selected].
If your email is already tagged, click Save tags.
Once your design is loaded, move to the Tag phase.
In this step, you'll identify the purpose of each design element in Figma by tagging it so the plugin can accurately convert it into email-compatible HTML.
Follow these steps to tag/retag each layer:
Click on a layer inside the email design canvas within the Listrak Studio. This will high-light the layer in the Layer panel and open the Listrak Studio property panel on the right.
The content in the black box which is the area, is the Identified Element that is selected in the canvas. The name is based on the name given to it in the Figma design.
For example, if the selected layer on the canvas is a text element that has the value, "This is a Recommendations" it will look like this:
Find the high-lighted layer in the Layers panel and select the appropriate tag within the Element's section in the property panel.
Common Tag types include: Image, Logo, Button, Nav, Social, Card, Hero, Divider, Background, Spacer.
Optional configurations are:
Layout: The visual arrangement, structure, and design.
Auto, Inline, Columns, Grid.
Mobile alignment: Mobile arrangement of the design.
Left, Center, Right.
Visibility: Where the elements will be displayed.
Everywhere, Hide mobile, Hide desktop, Exclude.
Other Features: Advanced features that use tags to classify the layers in the design. 💡 These sections are optional as not all emails are built with Saved Content, Dynamic Content or Merge Tags.
Item Block: Areas of the design that automatically populates with data in Listrak. Only visible when areas of the design are eligible to be configured for this feature.
⚠️ Item Blocks NEED to be marked as Saved content otherwise the email will NOT push into Listrak. Follow the same process below to do so.
Saved content: This is how you can make a section of the email design a reusable section in Listrak. To configure a part of your email to use as Saved content, follow these steps:
Click on the section of the email that you want to become a reusable section. This will highlight the same section within the design on your Figma canvas.
Check the box next to Save as reusable section.
Choose between:
New One: creates a brand new piece of saved content.
Existing: this uses as Listrak tag [[SC:name]] that already exists and pushes the selected area into that piece of reusable saved content.
Browse: search your existing saved content library and pull/bind one; browsing itself is read-only.
Click Push to Listrak and copy the tag.
Dynamic content: This is how you to create unique portions of your message to show to different audiences. To configure a part of your email to use as Dynamic content, follow these steps:
Click on the section of the email that you want to become a Dynamic content. This will highlight the same section within the design on your Figma canvas.
Check Dynamic container under Dynamic content.
Give the Container a unique name. This becomes the container's name.
Click Declare candidate ONLY if the structures were created separately and not as part of this design. This is to ensure they render correctly when inserted at time of send. If you created the structure as part of your current design, no declaration is required.
If declaring candidates, select all the applicable pieces of content that will be part of the container.
Click Pull & bind.
Merge tags: Allows an email to display personalized content by inserting Listrak tags. Example include a customer's first name, a product title, an image, or a destination URL. Only visible when areas of the design are eligible to be configured for this feature. Current types include:
Journey: fields supplied by a Listrak journey event.
Profile: fields from a subscriber's profile group.
Custom: a complete token supplied by the designer.
📑 Learn more about Merge tags and how to use them in your designs.
Click Save tags when all elements have been tagged.
Untag gives you the option to remove the tag from an element.
Click Continue, at the top, when you are ready to move to the next step.
💡 Helpful Tips
Item Blocks NEED to be marked as Saved content otherwise the email will NOT push into Listrak.
When using Saved content, the tags will automatically be added into your HTML within Listrak Studio.
When using Dynamic content, you will need to complete additional steps in Listrak, learn more here.
The canvas and the layer panel in the Listrak Studio mirrors the selected design within Figma.
Every element in the layer panel is able to be acted on/tagged.
Take the time to tag elements accurately. The more context you provide, the more precise the generated email output will be.
Learn more about how Dynamic Content works in Listrak.
Step 2: Generate Your Email
At the step you will generate and review the code, add links and configure fonts for your design.
First, generate new code or review existing code.
If this is the first time building the email you will see a blank frame. To begin generating, click Generate HTML to have the Listrak Studio build the coded email.
💡 The generate code will automatically save if you leave the plugin.
If returning to this step, the code is displayed in the frame. Choose to Resume or Generate Fresh to finish this step.
Resume: Pick up where you left off.
Generate Fresh: This will refresh the HTML, incorporating any recent changes that have been made during the Setup phase.
Next, add link URLs and configure fonts in the property panel.
Destinations Tab: Add links to any element that is tagged as a logo, navigation links, buttons, social icons or system link*.
To configure:
Click the category to open all the taggable elements within the category.
Enter the URL for each element.
Repeat for each category.
Fonts Tab: Add any font family your design uses and resolve anything that is missing. If you choose to continue, the fonts will use their fallback stack.
To configure:
The first time you build, Listrak Studio automatically resolves any Google fonts. If a font is not recognized as a Google font or a system font, you'll need to identify and resolve the font file before continuing.
Click Continue to Polish, at the top, when you are ready to move to the next step.
💡 Helpful Tips
*System Links are Listrak specific links that direct the user to view in browser or will unsubscribe a contact from a list the message was sent from. These types of elements will automatically apply the correct URL syntax, no need to configure.
Images are linked at the Polish phase.
Learn more about managing Fonts in the Listrak platform.
About Fonts:
If a font is changed in the Figma design a warning will appear in the Font section of the property panel. (make sure to click re-generate to push this change into Listrak Studio). The font that was replaced will still show, but will have a 'MISSING' label. You can now:
Pick from catalog - selects from fonts within the Listrak platform.
Upload font files - upload a file from your desktop.
Add Adobe project ID - enter in the Adobe project ID.
Use a Google font
If the font is associated with the account, you will only need to upload it one time.
Unresolved fonts may continue using their fallback stack.
The plugin warns before continuing with unresolved fonts.
Web-safe fonts do not need a delivery route
Step 3: Polish, Edit and Refine the Email
At this step in the process you now see the rendered email from the output of the code. Use the secondary navigation to review the size, the height, the display version, or the preview type.
Navigation Options:
To change the preview, click on the desktop or mobile options in the nav bar.
You are automatically in Preview mode. To see how it renders on different versions, choose Desktop or Mobile. In Mobile view, select a device width from the dropdown.
To modify the design and add links to images, click Edit.
Select individual elements on the canvas to enable the Layers panel on the left and the Properties panel on the right.
Click inside any property to modify styling, spacing, layout details or mobile sizing.
Note - Layers that are Saved Content are marked with SC next to the number.
To send a test, click Send Test. This will take you into Publish phase, follow those steps to send test message.
Click Save to apply changes
Click Preview and then click Continue to move to the last step.
💡 Helpful Tips
Navigate to the Setup section to complete edits.
Listrak Studio has built in validation check to help identify potential email issues, addressing these issues before sending can help improve the subscriber experience and reduce unexpected rendering problems. Checks include:
Gmail clipping concerns that happens at 102kb.
Mobile rendering limitations.
iOS height restrictions, capping at 5000px.
Edit mode currently provides mobile layout and typography overrides. Desktop padding and font size are inherited from Figma and shown as read-only
reference values. Edit also provides element-specific actions such as links, visibility, image binding, and content integrations.
Changes are reflected in real time, allowing you to quickly review and refine your email.
However, changes made in your Figma file won't automatically update in the Listrak Studio. To do so,
Click Re-gen in edit mode in Listrak Studio to apply updates to the design.
Then click Save to regenerate the HTML.
⚠️ The option to edit individual media queries is not available.
Step 4: Publish to Listrak
During this final phase, configure all required campaign settings, review the content inventory and pre-flight checklist.
Configure the Message Settings on the left panel.
Destination
Select the List from the dropdown.
⚠️ For NextGen Account, the Organization name is not displayed in the dropdown.
Enter a unique Saved Name
Message Metadata
Enter the Subject line
Enter Preheader text
Enter a From name
Enter a From email address
Enter a Test email addresses
Next review the content inventory and the pre-flight checklist on the right.
Content inventory is a list of all dynamic content elements (and saved content) when applicable.
Copy to complete setup when in the Listrak platform.
Pre-flight checklist identifies items requiring attention. Resolve any validation issues before publishing your email. Examples include:
Placeholder images that need to be replaced.
Missing URLs.
Required campaign fields that have not been completed.
Example with items needed to be resolved:
To resolve, click the the action buttons on the right to complete the steps or return to Polish to push any elements into Listrak.
Click Send Test to send to the test email address entered.
Click Create Saved Message to complete and push to Listrak.
💡 Publishing creates or updates a Saved Message; it does not directly attach that message to a campaign.
You pushed your email into Listrak, now what?
There are a few more steps to complete before sending your message such as configurating the email authoring page and configuring dynamic content (when applicable).
Broadcast Messages
Review the pushed email by navigating to your account > then select the list from the list navigation near the headline of the page.
Navigate to Messaging > Email > View Saved Email.
Click the saved name or subject line to get to the email.
Complete any other configurations such as Campaign name, sending date/time, analytics, audiences, adding dynamic content (see below.)
📑 Check out the Email Message Authoring Page Guide for more details.
When ready, test and schedule your message!
Dynamic Content
If using Dynamic content, follow these steps to add the tags and logic needed.
💡 If the Dynamic Content section is not in the authoring page, follow these steps to enable it.
Build the Dynamic content container and add the versions
Create and name the container
Click Add New Dynamic Content Area.
Enter a Dynamic Content Name. ⚠️ This needs to be the same name you used when setting up the container in Listrak Studio.
Create and name the version that will sit inside the container.
Click Add Version. The unique pieces of content that will be displayed based on the logic.
Enter a name for the Version.
Click the Save Icon to the right of the Version name to apply the name.
Add the creative content to the version.
Click the Content Edit Icon to add the HTML content component.
Select an existing dynamic content component.
Click Insert Content to add to the container.
Apply a filter to the version.
Click Add Filter.
Click New Filter.
Build the filter then click Update to apply to the version.
Click the Save Icon to the right of the Version name to save all updates made to the version.
Repeat steps 2-4 to add the additional Versions.
Configure the Default Version - if applicable.
Add the Dynamic Content Tag to the message
Once a Dynamic Content Block has been created it will generate a unique tag that can be placed in a message. Copy the Tag [[DCC:name]] into the body of the HTML where this content is to be displayed.