Adding Emailify starter components to your email

The quickest way to start adding layout components to your email is by adding common design components directly from the Emailify plugin.

To browse the components available in the Emailify plugin, you can click on any of the category tabs under the plugin header bar. Clicking each tab will reveal the components that the category contains, which you can scroll up and down to visually browse the subcategories inside the selected tab.

To re-order any row added from the presets, you can click and drag the row up/down inside the Emailify container frame (which has auto-layout enabled) to change its position.

Browsing the External Component Library ​

Video Tutorial: Use 500+ free HTML email components in your Figma designs

This video walks through how to use 500+ free HTML email components in your Figma designs with the Emailify Figma plugin.

In addition to the built-in components available in the Emailify plugin, you can browse and use components from external component libraries through the Emailify web app. This lets you access a wider range of pre-built email components that can be copied directly into your Figma designs.

To use components from the external library:

  1. Visit the Emailify web app to browse the full catalog of available email components
  2. Filter components by category, template usage, or search for specific elements
  3. Click the Copy Figma Component button on any component to copy its HTML snippet to your clipboard
  4. In Figma, select an Emailify frame where you want to paste the component
  5. Paste the component directly into the Emailify frame using Cmd+V (Mac) or Ctrl+V (Windows)

The pasted component will automatically integrate with your email design and can be customized just like any other Emailify component.

External components use Emailify's auto-layout structure. Drag a component up or down inside the Emailify container frame to reorder it.

Starter Component Categories ​

Emailify sorts components into a few categories (and subcategories) to make it easier to browse for what you need in your email design.

Headers ​

Typically used at the top of your email; these can be components like a brand logo, "view online" links, a navigation menu, social icons etc.

Images ​

These are components for displaying image content; these can be components like a full width image, background image (for adding text on top of), logo grid, image cards, grids and captions.

Content ​

Includes text-based components such as paragraphs, quotes, testimonials, author avatars, article cards, feature icons, stats, promo codes, and product cards.

Ecomm (E-Commerce) ​

Offers some common components that might be used for displaying products or elements related to a post-checkout email, and also includes some Klaviyo-specific components for displaying dynamic product grids for that platform.

CTAs (Call To Action) ​

These components are primarily used for asking the user to click something or take an action; these can be components like buttons, links, background image heroes, video thumbnails, feature tiles, app store buttons, social media icons and product heroes.

Typically used at the bottom of your email; these can be components for displaying your brand logo and address details, social media links, unsubscribe links or app download buttons.

Any components you add in another category will automatically be "bookmarked" to the Favourites category to make it easy to access them again later. You also have the option to remove any components from your favourites by clicking the Trash icon; this will remove the component from your favourites list, but won't "delete" it from the other categories.