Figma and Klaviyo ...yay or nay?

Adding to @StefanUE excellent answer here, if you are using any dynamic codes, you would do that directly in Klaviyo’s template editor with a Text Block so that the dynamic code can render the code properly.  You can see more about that here (for Shopify here):

• How to create unique coupon codes for Shopify

What @StefanUE said is how we use Figma with Klaviyo!

Great answer here from @StefanUE - the second bullet point is also how we use Figma. Our designer creates the email template in there, we collaborate internally and with our clients on the template built out and load the templates using Klaviyo’s blocks. 

In the designs we also build both Desktop & Mobile versions of each email so the implementation team is clear on how the final design should look inside Klaviyo. 

Wow, what a great discussion to see in the community!

One more thing I’d add to help your team @jocelyn8 - Figma’s a great place to start design creation for elements where you want to ensure dark mode does not change any of the color formatting.

You might find there are a few email sections (my team calls them building blocks) that you’ll want to reuse consistently across a variety of emails for flows and/ or campaigns. One example is a pre-footer section that might give a quick reminder of your brand ethos. 

This could be initially created as a design in Figma, then exported as an image file. Then you could save that email section as a “universal content” block in Klaviyo. That becomes a templated building block you can use as many times as you need across any email. Helping your team get faster and more efficient, while also ensuring you get good use out of existing assets!

Warmly,

Gabrielle

Great breakdown from ​@StefanUE on the two approaches. Just want to add - the image-slicing workflow he described has gotten a lot easier since this was posted.

There are now Figma plugins that automate the entire slice-and-upload process. You design your email in Figma (or any tool), and the plugin exports it as a Klaviyo drag-and-drop template automatically — handles the slicing, image compression, alt text, and CTA links.

A few options depending on what you need:

• Emailify — exports as HTML/MJML, supports 30+ ESPs. Best if you want true HTML output.
• Grotto Slice — takes the image-slicing approach but automates it entirely. It auto-slices into optimized sections, generates AI alt text, and pushes a complete template to Klaviyo. Built specifically for Klaviyo. Most popular among agencies who specialize in Figma to Klaviyo and manage multiple accounts. 
• Marka — another Figma-to-HTML option with good Klaviyo support.

For the dynamic codes question - any image-based approach won't support Klaviyo dynamic variables within the image sections themselves. You'd use Grotto Slice or similar for the visual design sections, then add text blocks with dynamic content directly in Klaviyo's editor for personalization. Works well as a hybrid.