Why Figma?
Figma is one of the most popular and powerful design tools out there. Its flexibility and collaborative features make it a favorite among designers, marketers, and brands around the world. If you’re looking to create visually stunning emails for Klaviyo, Figma is going to be your new best friend.
But it’s not enough to just make emails look great, you also need to make sure they actually work for your subscribers. In this quick guide, we’ll cover why designing with more than just images matters, along with all the practical nuts and bolts of getting Figma designs into Klaviyo.
Before you dive in, check out this video for a step-by-step walkthrough on moving your Figma designs right into Klaviyo.
Best practices for designing email templates in Figma
Keep these important considerations in mind when designing Klaviyo email templates in Figma.
Build a brand board in Figma
Create a library of reusable sections, like headers, footers, product friends, buttons, etc. in Figma.
When you are designing, you can build up from these blocks so you don't need to start from scratch every time.
Create a central frame with:
- Font sizes
- Brand colors
- Font styles
Keep this handy for fast, on-brand designs every time.
Add links and alt text
When you are creating designs in Figma, keep the call to action (CTA) in mind. Whenever a customer clicks on a part of your email, they should be sent to a relevant section of your website. You can add links in Figma or in Klaviyo. Don't forget your logo, products, and social icons: the whole experience should be interactive.
One of the basics of accessible emails is including alt text with every image. This helps learners with visual impairments understand your content and also appears if your email images fail to load.
Alt text should be detailed, and every single piece of text in an image should be included in the alt text.
Design mobile-first
These days, most of your customers will open your emails on their phones. Plan accordingly, and design for mobile first.
Use these strategies for mobile-first design:
- Don't go too small on font size. Use sizes of 15-18 for maximum readability.
- Limit columns and side-by-side content.
- Include a clear, obvious CTA that is easy to tap (minimum 44px height)
Finally, always preview on mobile in Klaviyo's template editor and with your preview emails!
Follow design and accessibility best practices
Get your content in front of the most people with these best practices:
- Create footer blocks from actual text or HTML (not an image).
- Design "above the fold": place the most important information at the top.
- Keep your Figma frame at least 600px wide.
- Create emails that are less than 60% images. Most of your email should be rich text and HTML for the best deliverability and user experience.
- Design with the audience's background and knowledge level in mind.
Design for dark mode
Dark mode is a visual preference some of your customers choose that swaps light and dark background and text colors. It can help your customers reduce eye strain, but it also affects how your emails render in inboxes.
Keep dark mode in mind as you design in Figma. In the example here, Nani exported their logo as an image, so it kept the light background. They built the header bar in Klaviyo, so colors are inverted in dark mode. This design is readable in both light and dark modes.
Follow these tips for best results in dark mode:
- Use logos and images that look great on light and dark backgrounds.
- Add a light-colored shadow to a dark logo with a transparent background so it stands out in dark mode.
- Use image files that include background colors rather than using a transparent background.
You've designed your email in Figma - what's next?
Once you're happy with your beautiful Figma email templates, there is one last step: exporting from Figma and into Klaviyo so you can send out your emails. Here are a few ways to get your designs from Figma into Klaviyo.
Export content as images
Steps to export images from Figma:
- In Figma, click the arrow next to the Frame icon on the lower toolbar, then select Slice.
- Drag and drop to select the image in your template. Make sure your slice is 600 pixels wide (the width of your email template).
- Select your slice, then click Export.
Steps to import images into Klaviyo:
- Open a Klaviyo email template where you want to add in your Figma designs.
- Add an image block to your template.
- Click Select image and select the slice you just exported.
- Add a link and alt text to the image.
- Recreate buttons, text, and product blocks using Klaviyo's built-in template editing features. Use your brand library to match your brand's exact style.
Check out the video above to see how this looks in practice.
Why avoid image-only emails
Designing emails using a single, big image might seem quick, but it’s not a great customer experience:
- Accessibility: Screen readers can’t “read” images with text baked in.
- Load times: Large images mean slow-loading emails (especially on mobile).
- Spam filters: Emails with too many images often end up in Junk.
- Responsiveness: All-image emails usually don’t adapt to small screens.
Bottom line: Use real text as much as possible, and reserve images for visuals/logos/illustrations. Aim for emails that are less than 60% images.
Export content as HTML
Note: This strategy requires external plugins as well as some knowledge of HTML.
Steps to export from Figma:
- Choose a plugin to export HTML from Figma. Some great options include Pushed AI, Email Love, Emailify, and Marka.
- Right click on your email in Figma and select your plugin. Follow the plugin's directions to export or copy the email's HTML.
Steps to import into Klaviyo:
- In Klaviyo, navigate to Templates, then click Import.
- Upload the HTML file or paste in the HTML you copied.
- Give your template a name, then click Import template.
- Your template is now saved in your template library for use in email campaigns and flows.
Learn more about how to import a custom HTML template into Klaviyo.
Klaviyo also supports hybrid templates, which allow you to combine features of Klaviyo's drag-and-drop template editor with custom HTML blocks.
If you are comfortable with HTML, when you export HTML from Figma, you can copy only the HTML of the block you want to use. Then, in the Klaviyo email template editor, add this to the source code of a text block to combine your custom HTML with drag and drop features. Read more about hybrid email templates that combine HTML with the drag and drop editor.
Always preview your emails
Regardless of which strategy you use, preview how your email looks on both desktop and mobile.
From the template editor, send yourself a preview email. Open this email on as many devices as you have access to so you have an idea of how the email will look on several different devices and in both dark and light mode. Use different email clients, like Gmail, Outlook, Yahoo, etc. to open the email to note differences in how a given design appears in each.
You can also use inbox testing to preview what your email looks like on different devices.