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.

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 tutorial is a complete step-by-step guide showing you 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 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.

Components from the external library are designed to work seamlessly with Emailify's auto-layout system, so they can be reordered by dragging them up or down within your Emailify container frame.

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.

Footer

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 on the Trash icon; this will remove the component from your favourites list, but won't "delete" it from the other categories.