Listrak Studio plugin for Figma

00:00 Introducing Listrak Studio for Figma

My name is Marshall Gerz, and I'm a Solution Developer here at Listrak. Today, we're going to talk about pushing content and building emails with Listrak Studio, Listrak's Figma plugin. When we first open Listrak Studio, we're presented with three options: build an email, push dynamic content, or push content to Listrak's Media Library. If you're working with Listrak Composer, one of the more time-consuming parts of using Figma or other design software is getting your images ready for email.

00:37 Pushing Images to the Listrak Media Library

Typically, after creating images in Figma, you need to export them, potentially use third-party software to compress the files for email, and then upload them to Listrak's Media Library or another content delivery network (CDN). With Listrak Studio, you can simplify that process. You can select any piece of content you've designated as an image and push it directly to the Listrak Media Library.

For example, I can select my hero image, choose the folder where I want to store it in Listrak, and adjust the compression settings. I might change the file format to PNG and select a smaller compression size to meet the 55 KB limit. Once I've made those selections, I can push the image into Listrak, where it's ready to use in Listrak Composer.

01:35 Turning Figma Designs into Email HTML

Another option in Listrak Studio is to build an email directly from a Figma design. Rather than exporting individual images, I can take an existing Figma frame, generate the HTML, and bring it into Listrak. To get started, I select Build an Email. Listrak Studio then displays an overview of the steps involved in turning the design into HTML and pushing it into Listrak.

02:05 Tagging Design Layers for HTML Generation

Once I click Get Started, the first step is to tag a few layers in the Figma design so the HTML generator knows how each element should behave. In this example, I've already tagged 10 of the 41 layers, including backgrounds, buttons, and images. These tags tell the HTML generator how certain elements should render in the email and whether they need specific controls.

You don't need to tag every layer. For this particular email, I've only tagged 10 layers. Once the layers are tagged, I have two options: I can select Resume to pick up where I left off on an email I've already been working on, or I can generate fresh HTML.

02:59 Previewing and Editing Your Email

I'll select Resume since I've already been working on this email. From here, I can see an HTML preview of what the email will look like. You'll notice I have a placeholder for a piece of saved content in the footer, which I'll add shortly. I can also preview the email at different mobile screen sizes to make sure it displays properly across different viewport widths.

If I want to make adjustments, I can select Edit or press E to enter edit mode. For example, I want to adjust one of my buttons to match the styling of another button in the email. The existing button has a fixed width of 280 pixels and a mobile line height of 2.5. I'll apply those same settings to the other button, changing its width to 280 pixels and its mobile line height from 1 to 2.5.

Now the buttons have a consistent look and feel, making them easy for recipients to tap or click. Once I'm satisfied with the changes, I select Save.

04:27 Adding Reusable Saved Content

Next, I want to add a footer to the placeholder for saved content in my email. I'll select Mark as Saved Content, which gives me the option to either push a piece of HTML into the content library or pull in content that's already been saved.

Since I have a footer I've previously created, I'll select Browse Library, find that footer, and choose Pull and Bind. This brings the saved footer directly into my email, allowing me to reuse content I've already created for my marketing sends. From here, I can preview how the footer renders on desktop and mobile. Everything looks good, so I don't need to make any additional changes. I'll select Save to continue.

05:19 Preparing and Publishing Your Email

Now I'm ready to publish my email in Listrak. I'll select Continue, which brings me to a pre-flight checklist on the right-hand side. This checklist confirms that my images are hosted, my saved content has been pushed or pulled from Listrak, my button URLs are bound, and all fonts are resolved. I can also review the content inventory for the saved footer I added earlier.

Next, I'll give my message a name, ‘Marketing Send October,’ and enter ‘New Season, New Look’ as the subject line and ‘What You've Been Waiting For’ as the preheader. The from name and from email address will be pulled directly from my list settings. Once everything is ready, I'll select Create a Saved Message. Just like that, my message is saved in Listrak on the selected list and is ready to send.