Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: 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.. Machine-readable page: /emailify/design/email.md.

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 + 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 Click on the parent frame itself 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 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.