Adding Emailify starter components to your email

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

Browsing the External Component Library ​

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

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 allows you to 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.

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 many different components for displaying text-based content; these can be components like simple paragraphs, quotes/tesimonials, 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.