Step by Step Guide to
Mastering Pushed.AI Features

Learn to create and organize professional email designs in Figma for seamless Klaviyo export using the powerful Figma-to-Klaviyo plugin.

icon_2 icon_4 icon_5 icon_6

STEP 01

Initialize Your Figma File

step_1

Start by launching Figma and create a new file

Click the “New design file” button in the upper-left of your workspace.

Name your file appropriately, such as “Holiday Sale Email Campaign”

Double click on the file name to rename it from “untitled”

step_1_1

STEP 02

Setting up your Email Canvas

step_2

Select the frame tool at the bottom of your figma app.

Click and drag to create a frame. Set width to 600px (not mandatory at this stage). Choose the height as per your convenience. Name it appropriately “email_campaign.”

Name your file appropriately, such as “Holiday Sale Email Campaign”

Once you add auto layout. Make sure to set the auto layout settings as such -

  1. Width hug or fixed to 600px
  2. Height must be hug
  3. Flex direction - vertical
  4. Align - center-top
  5. Spacing - 0px
  6. Padding Horizontal - 0px
  7. Padding Vertical - 0px
step_2_1

STEP 03

Create your first frame component

step_3

Upload your logo to Figma. Name the header component clearly.

After uploading your logo, resize it and right click to add Auto Layout. Once you add auto layout. Make sure to set the auto layout settings as such -

  1. The logo element can be of any width, but preferably keep it 600px
  2. Height - hug
  3. Align - Center
  4. Padding vertical - Appropriate size (I have used 24px here)

Your header component should look like this

step_3_1

STEP 04

Creating image components

Simply select your header frame and drop into your email canvas

After completing your header component, select the header frame and drag it into the email canvas.

step_4

Once you drop in the header component, make sure to select it, and change the width to fill. This will make sure the element is dynamic for smaller screens.

step_4_1

STEP 05

Adding header component

Drop an image inside your file. Create an auto layout. Name it appropriately.

Your auto layout must have the content clipped and your align settings should be centered.

step_5

Select the image inside the layout and set layout settings.

step_5_1

Once done, drop the image component inside your email canvas.

step_5_2

STEP 06

Creating text block components

step_6

Select text blocks, apply Auto Layout, and set appropriate padding, gap, and alignment.

Text blocks should have appropriate sizes. Make sure the heading size is not too big, to avoid overflowing on mobile devices.

Select the text block/s inside your layout. Make sure to set width to fill.

Once done you can drop them inside your canvas.

step_6_1

STEP 07

Creating horizontally spaced column layouts

Flex direction horizontal will create a layout with horizontally spaced columns.

step_7

The horizontal components should have width of fill.

step_7_1

STEP 08

Creating buttons

Same as creating layouts. But you can spice it up with background colors and corner radii.

step_8

STEP 09

Configuring the footer

step_9

Create a Footer Frame: Drop it at the end of your body on the email canvas.

Include Footer Details:

  1. Add contact information, legal disclaimers, and social media icons.
  2. Keep the design simple and legible.

STEP 10

Make sure your layers are properly ordered

Check the layer panels on the left. Make sure all layers are properly named.

step_10

STEP 11

Optimization for Export

Preview for Mobile: Temporarily resize the canvas to 320px wide to ensure mobile responsiveness.

step_11
step_11_1

Check for Overflows: Ensure no text or elements overflow their frames.

STEP 12

Using the Plugin for Export to Klaviyo

Select your email canvas and launch the pushed.ai plugin

step_12
step_12

You should see the Pushed AI pop up like this. Make sure to fill up all the relevant details.

Do not forget to add links, alt text and adjust plugin settings such as smart send or alt text conversion.

step_12_1

Important: Make sure your Klaviyo API key is added correctly.

step_12_1

STEP 13

Export to Klaviyo

Click the Create Template or Create Campaign button to send your design slices directly to Klaviyo.

step_13

STEP 14

Review in Klaviyo

  • Check Each Email Slice: Once imported, review each slice in Klaviyo for accuracy.
  • Make Adjustments: Modify any content or settings in Klaviyo as needed.

CONCLUSION

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!

Frequently Asked Questions

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.

  1. Open Figma and go to the Plugins section under the Community tab.

  2. Search for the "pushed.ai" and click 'Install' or download here

  3. Access it anytime from the Plugins menu in Figma.

  1. Use the Frame tool (F) in Figma to create sections like the Header, Body, and Footer.

  2. Name each frame clearly (e.g., "Header", "Main Image", "CTA Section", "Footer").

  3. Ensure alignment, spacing, and use auto-layout to keep designs responsive.

  1. Open the plugin in Figma

  2. Go to the Account Settings tab.

  3. Enter your Account Name and click "Add Account"

  4. Go through the authorization flow with Klaviyo

  1. Make sure all frames are organized properly using frames and child frames.

  2. For best results, keep your images under 1mb.

  3. Ensure the design stays within 600px width for best results.

  4. Preview the export in Klaviyo to identify alignment or rendering issues.

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.

We currently only integrate with Klaviyo but are exploring other ESPs such as Yotpo.

Yes, pre-built templates are available for download in our Playground > Examples page.

  1. Use auto-layout in Figma for flexible spacing and alignment.

  2. Test your design by resizing the canvas to 320px (mobile view) to ensure it adjusts properly.

  3. Preview on mobile and desktop from Klaviyo

  1. Check that all frames use consistent padding, margins, and alignment in Figma.

  2. Use auto-layout to maintain structure across sections.

  3. Verify in Klaviyo's email preview that no elements are out of place.

  1. 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.

  2. Instead of exporting as a campaign, export as a template and access the email in your template section of Klaviyo.

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.

While you can't pull in dynamic events/links currently, future updates may allow additional capabilities.

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.

  1. 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.

  2. You can reference past campaigns in Settings → Campaigns