Creating a reusable component library

Any elements that you add to Figma from the Emailify plugin will automatically be added as native Figma components, which you can customize the style and content of; and any Emailify components inside your current Figma file can be accessed directly from the plugin by clicking on the Library icon button in the header tabs row.

Adding components from your Component Library tab ​

Video Tutorial: Create a component library for HTML email designs in Figma

Clicking on the Load all Emailify Components from this Figma file will find and load previews of any Emailify Figma components in your file; clicking on any component in the plugin will automatically add it to the selected Emailify frame, just like any other category.

If you've added any new components to your Figma file since loading the initial components, you can click on the Refresh icon button in the plugin, which will re-check the Figma file for any Emailify components and include them in the list.

Organizing your component library with custom categories ​

Video Categories: Add custom categories for Figma email components

By default, all of your Figma components will be Uncategorized, but you can optionally create your own custom categories by clicking on the Pencil icon button in the component library subheader tabs row.

This will allow you to create new custom categories, and then move components from any existing categories into any other category that you've added.

You can also remove a custom category at any time, which won't delete any of your Figma components, but will automatically move any components that were in that category back to the Uncategorized category.

Searching and sorting your Component Library ​

To quickly find a custom Figma component in the component library tab, you can use the Search input field to filter down your components list by the layer name of any Figma component.

You can also sort the list of components by any of these options:

Sort by Figma Layer Age

  • Newest to Oldest ↓
  • Oldest to Newest ↑

Sort by Figma Layer Name

  • Figma Layer Name ↓
  • Figma Layer Name ↑

Sort by Figma Layer Order

  • Figma Layer Order ↓
  • Figma Layer Order ↑

Sort Visually (Rows)

  • Visually Top to Bottom ↓
  • Visually Bottom to Top ↑

Sort Visually (Columns)

  • Visually Left to Right →
  • Visually Right to Left ←

Adding metadata to your Figma components ​

You can add metadata to your Figma components by clicking on your component layer in Figma, and then clicking on the Component configuration icon button in the Figma right-hand side column next to the component name. This will allow you to enter some text for How to use this component and a URL as a Link to documentation.

If these are present on any of your Emailify components, the label for your component in the component library tab will automatically be linked to your documentation URL, and the description of how to use the component will appear in the tooltip of the component when the thumbnail is hovered over.