Creating your first Emailify email Figma frame

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.

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.

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.

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.