Advanced Figma Settings

Set up auto-detected preview text, prototype links, and footer detection for one-click Figma to Klaviyo exports.

These three settings turn the Figma plugin into a true one-click solution. When all three are enabled, you select your frame and click "Send to Klaviyo" - the preview text, link addresses, and footer are all pulled directly from your Figma file. No manual entry needed.

Click the gear icon in the plugin header to access these settings. By default, they are all turned off.

Auto-Detect Preview Text

When enabled, the plugin automatically pulls your email preview text from your Figma file - no need to type it manually in the plugin each time.

Preview text is what recipients see in their inbox next to the subject line before opening the email. Setting it up in Figma keeps it visible to your design team and synced with each email.

Figma Layer Setup

The plugin looks for a group named "Preview Text" (case-insensitive) inside the same parent frame as your email design. It reads the last text layer in that group.

Your Figma layers panel should look like this:

The other groups shown in the screenshot like "Subject Line" and "Audience" are not necessary - only the "Preview Text" group is required for auto-detection.

Key details:

• The group must be named "Preview Text" (any casing works - "preview text", "PREVIEW TEXT", etc.)
• Place the group as a sibling of your email design frame, inside the same parent
• The plugin reads the bottom-most text layer in the group. We recommend adding a label as the top text layer (e.g. "Preview Text:") to keep things organized, but it's not required - a single text layer works fine
• You can still override the detected text manually in the plugin before uploading

Auto-Detect Prototype Links

This is the recommended way to add click-through URLs to your email sections. Instead of typing links manually in the plugin, you add them directly to your CTA buttons in Figma using the Prototype interaction feature. The plugin reads these links and automatically maps each one to the correct email section.

How to Add Links in Figma

1

Select your CTA button layer

In your email design frame, click on the button or element you want to be clickable in the final email.

2

Open the Prototype tab

In the right sidebar of Figma, click the Prototype tab (next to Design and Inspect).

3

Add an "On Click → Open Link" interaction

Click the + next to "Interactions" to add a new interaction. Set it to:

• Trigger: On Click
• Action: Open Link
• URL: paste your destination URL (e.g. https://yoursite.com/summer-sale)

4

Repeat for each CTA button

Add a prototype link to every button in your email that should have a unique URL. The plugin maps each link to the email section that contains it based on its vertical position in the design.

Important: Use Frames, Not Groups

The outermost collection of elements in your email design must be a frame, not a group. If it's a group, the "Add interaction" button won't appear in Figma's Prototype tab. Convert the outer group to a frame if you don't see the interaction option.

If all sections share the same link

If your entire email should link to a single URL, you only need to add one prototype interaction - add it to the lowest CTA button in your design. Each link covers its own section and every section above it (up to the next link), so a single link at the bottom will apply to the entire email.

How link mapping works

The plugin assigns links based on vertical position. Each link covers its section and all sections above it, up to the next link. For example, if you have three CTA buttons with different URLs, the top link covers the top sections, the middle link covers the middle sections, and the bottom link covers everything from its position up to the middle link. Any sections without a link above them use the brand's default website URL set in your Brand settings.

Auto-Detect Footer

Why use this?

Most emails have a footer section - unsubscribe links, social icons, legal text - that should stay together as one piece. Without footer detection, the slicing algorithm might cut through the middle of your footer, splitting it across two sections and breaking the layout.

When this setting is enabled, the plugin identifies your footer and forces a clean slice at the top edge of it. This guarantees the footer is always exported as its own standalone section - which also makes it easy to swap out with a Klaviyo Universal Footer Block later.

How to set up in Figma

All you need to do is name the group or frame that contains your footer content "Footer" (case-insensitive - "footer", "FOOTER", etc. all work).

Your layers panel should look something like this:

Key details:

• The footer group or frame must be inside your email design frame (not a sibling)
• The name just needs to contain "footer" in any casing
• The plugin forces a hard slice at the top edge of the footer, so everything below that line becomes one section
• Tell your designers to put all footer elements inside one group and name it "Footer"

Frequently Asked Questions