Do you guys recommend constructing emails on Klaviyo’s editor or designing on figma and then slicing and inserting into Klaviyo? I like that the figma alternative gives you more customization but would like to know how everyone else is using Klaviyo.
Best answer by Taylor Tarpley
View original
+60
Hi
Welcome to the Community! Happy to help!
Ultimately it’s up to you! However, if you do use Figma, it should be noted that when uploading Figma designs to Klaviyo, you will need to either:
If you upload image files, I’d ensure that you follow our documentation on how to ensure quality image resolution for uploaded files!
If you go the HTML route, you should be able to export the HTML of the design from Figma and upload it into Klaviyo as an HTML email. In addition, I'd like to highlight some of the info listed in our guide on Custom CSS, Javascript, and HTML in Klaviyo, we only recommend using custom HTML under certain circumstances or if you have access to a developer that's able to troubleshoot the code. While our product does support custom HTML however so your developer or a Klaviyo partner will need to set this up for you or do any troubleshooting that might arise.
With that being said, certain HTML and CSS elements are not currently supported. For example, if you are looking to make your email interactive in Gmail by using certain CSS attribute selectors, you may see your template trigger an error in Klaviyo. Klaviyo also does not currently support certain operators (like ~) in email templates and this may limit the extent to which certain custom HTML and CSS can be used. If your template contains HTML or CSS that isn't fully supported, then you'll start seeing some inconsistencies.
If you find that any of your HTML is not rendering properly when importing from Figma, then I recommend reviewing this section of the guide, which takes you through some troubleshooting steps. However, the best way to prevent running into possible issues is to build the templates directly using our template editor.
Finally, here’s a helpful video on how to use Figma <> Klaviyo. I also wonder if any of our Community Champions have any experience uploading templates or images from Figma and can share their advice?
-Taylor
This is very helpful! Thank you so much.
+2
Working directly with the Klaviyo builder seems to be the easiest way for us. We use Figma to create some hero images but then build the rest of the email in the Klaviyo editor. There are also some newer editors out there that work directly with Klaviyo and can do some newer stuff that Klaviyo doesn’t support. Zaymo is building an email editor that supports a bunch of out of the box interactive widgets (like abandoned carts, reviews, forms, subscriptions) that make it super easy for subscribers to take action right in the email.
+1
Figma shines for unique and creative email designs. If you go that route, converting your Figma masterpiece into a functional email requires HTML expertise. This can be tricky, as it needs to work perfectly across different email platforms and devices. Companies like Email Uplers specialize in this conversion process, ensuring your email looks pixel-perfect, is responsive across devices, and adheres to accessibility standards.
For simpler designs, Klaviyo's drag-and-drop editor is a great option. It's user-friendly and lets you build emails quickly, but it offers less design flexibility compared to Figma.
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
