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!