Learn to create and organize professional email designs in Figma for seamless Klaviyo export using the powerful pushed.ai plugin.
Here are your most common questions answered! If you have any questions left after going through this doc, please send them over to support@pushed.ai and we are happy to help you out and hop on a call!
Answer: The Pushed.ai plugin allows you to design complete emails in Figma and export them directly into Klaviyo as production-ready HTML. It streamlines the process of creating, customizing, and sending email campaigns so you can focus on creating rather than importing.
Answer:
Open Figma and go to the Plugins section under the Community tab.
Search for the “pushed.ai” and click ‘Install’ or download here
Access it anytime from the Plugins menu in Figma.
Answer:
Use the Frame tool (F) in Figma to create sections like the Header, Body, and Footer.
Name each frame clearly (e.g., “Header”, “Main Image”, “CTA Section”, “Footer”).
Ensure alignment, spacing, and use auto-layout to keep designs responsive.
Answer:
Open the plugin in Figma
Go to the Account Settings tab.
Enter your Account Name and click “Add Account”
Go through the authorization flow with Klaviyo
Answer:
Make sure all frames are organized properly using frames and child frames.
For best results, keep your images under 1mb.
Ensure the design stays within 600px width for best results.
Preview the export in Klaviyo to identify alignment or rendering issues.
Answer: Yes! You can add custom alt text and configure URLs for each frame in the plugin editor before exporting. This ensures accessibility and proper linking in Klaviyo.
Answer:
We currently only integrate with Klaviyo but are exploring other ESPs such as Yotpo.
Answer:
Yes, pre-built templates are available for download in our Playground > Examples page.
Answer:
Use auto-layout in Figma for flexible spacing and alignment.
Test your design by resizing the canvas to 320px (mobile view) to ensure it adjusts properly.
Preview on mobile and desktop from Klaviyo
Answer:
Check that all frames use consistent padding, margins, and alignment in Figma.
Use auto-layout to maintain structure across sections.
Verify in Klaviyo’s email preview that no elements are out of place.
Answer:
Yes, the plugin supports designing email templates for flows such as abandoned cart, post-purchase, and welcome series. Once exported, you can configure these emails within Klaviyo’s Flow Builder by linking the exported templates to the appropriate triggers.
Instead of exporting as a campaign, export as a template and access the email in your template section of Klaviyo.
Answer:
Currently, the unsubscribe link is managed by Klaviyo to ensure compliance with email regulations. Future updates may allow additional formatting options for the unsubscribe link.
Answer:
While you can’t pull in dynamic events/links currently,future updates may allow additional capabilities.
Answer:
Absolutely. You can design universal blocks (e.g., headers, footers, product grids) in Figma and save them as reusable components. These can then be exported as part of your email template for consistent branding across campaigns.
Answer:
If you need to make changes to a design after it has been uploaded to Klaviyo, simply update the frames in Figma and re-export the email. The updated template will overwrite the existing one in Klaviyo, ensuring your changes are reflected without starting from scratch.
You can reference past campaigns in Settings → Campaigns
By following this guide, you can effectively use the Figma-to-Klaviyo plugin to create professional and
responsive email campaigns. Properly organizing your design frames in Figma ensures a streamlined workflow and
high-quality email results.
For further assistance, feel free to reach out to our support team at support@pushed.ai or consult the
plugin’s help documentation. Happy designing!