The first time you run the Emailify plugin on a Figma page that doesn’t contain any existing Emailify container frames, the plugin will automatically prompt you to name and create your first frame to get started.

Under the Add New Blank Emailify Frame tab, give your email a name (eg. “My Email Template”) and then click the Add New Emailify Container button to add your empty email frame to your Figma page.

This new special Figma frame created by the plugin will automatically be recognized by the Emailify Figma plugin as an email, and allow you to start adding layouts and components to it using the plugin’s design features.

If you’re new to the plugin or want some inspiration, you can duplicate any of the free Emailify Figma templates here (or browse them directly from the plugin’s “New Emailify Container” popup modal).

​
Adding additional Emailify containers

You can add as many additional Emailify container Figma frames as you need, and each container will be treated as a seperate email by the plugin.

If you’ve already added an Emailify frame to your page, you can add a new blank Emailify frame at any time by clicking on the + (Plus) icon button in the Emailify plugin header, which will prompt you to name and create a new blank email Figma frame.

You can also copy + paste and existing Emailify frame that you’ve worked on if you don’t want to start from scratch. Copying and pasting components from inside one Emailify frame into another also works, too.

​
Selecting an Emailify frame

To select an email to start adding components to, you can either select it from the drop down box in the Emailify plugin header, or you can simply click on the parent frame itself on the Figma canvas.

Clicking on an email option using the select box will also automatically shift the focus on your Figma page onto the selected email.

Checking which email frame is active The email name that’s currently shown as being selected in the Emailify plugin header drop down box always indicates which email is currently selected.

​
Mobile breakpoint for the emails

The HTML emails exported from Emailify have a single “breakpoint” that’s automatically set by the width of the desktop frame in Figma; for example, if your Emailify frame is 600px, the mobile styles/overrides will start showing at 599px and below.

Keeping the width of the email between 600px-640px is typically recommended, as some email client/app’s inbox reader panels can be less than 700px wide, which would render the mobile styles at that width instead of the desktop layout. Keeping your Emailify frame width in Figma between 600-640px wide will ensure that the desktop layout always gets rendered across any mail clients or apps, on desktop or tablet.

Was this page helpful?

How Emailify WorksSet Email Background Color