Creating your first Emailify email Figma frame

Every email design in Emailify starts with a special blank email Figma frame, which you'll be able to fill up with Emailify layouts and content.

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 open the New Email modal so you can choose how you want to start.

The New Email modal includes four tabs: Blank Template, Layouts, Figma Templates, and AI Designer (BETA).

Under the Blank Template tab, give your email a name (for example, "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 use Layouts, try the Randomize subcategory, duplicate Figma Templates, or use AI Designer (BETA) from the New Email modal.

Adding additional Emailify containers ​

Add as many Emailify container frames as you need. The plugin treats each container as a separate email.

If you've already added an Emailify frame to your page, you can add a new blank Emailify frame at any time by clicking 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 and paste an existing Emailify frame if you don't want to start from scratch. Copying and pasting components from inside one Emailify frame into another works, too.

Selecting an Emailify frame ​

To select an email and start adding components, use the dropdown box in the Emailify plugin header or click the parent frame on the Figma canvas.

Clicking 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 email width between 600px and 640px is typically recommended because some email client or app reader panels can be less than 700px wide. A narrower reader panel may render the mobile styles instead of the desktop layout. Keeping your Emailify frame between 600px and 640px wide helps the desktop layout render consistently across desktop and tablet email clients.