Video transcript
6-minute video ·
Today I’m going to be showing you a quick tutorial on how you can import a bunch of premium email components into your Figma email designs and then export those out to production ready HTML code with one click using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, go down to the actions icon down here, and then just search for Emailify.
Under the Figma Plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this Run button down here, or I’d recommend clicking on the Save icon next to that. That’s going to let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the Save icon. I’m just going to go to my Figma canvas, right click anywhere, go down to Plugins, then Saved Plugins, and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.
If you’re new to the Figma plugin, it basically helps you to design HTML emails in Figma, which you can then export out to HTML using the Figma plugin’s export feature. The first thing we need to do is add a new email frame, because we haven’t got any on our page yet. I’m going to call this one “template example,” and then click on the Add New Emailify Container button. If you’ve used the Figma plugin before or if you’re new to it, the main way you can add components through the Figma plugin itself is by browsing the tabs up here.
This will give you a bunch of different starter components that are really popular layouts, which you can then customize with your own content and redesign in the way that you’d like for your own emails. These are intentionally left very generic to make them easy to style and give you a plain version that you can swap out with your own content. If you’re interested in more premium components that have been taken from other email designs, you can browse the free online component library by clicking on the little component icon in the Figma plugin. That will open up the website we were just looking at a moment ago.
The website URL is https://emailify.hypermatic.com, and you can go there for free and browse hundreds of premium email components that are email ready, which you can copy paste into your email designs with a single click. For example, if you like this product display item, you can click on the Copy Figma Component button, and you’ll see it’s copied to your clipboard.
Then go back to Figma, and inside your Emailify frame, paste it in with Command V, or Control V if you’re on Windows. I’m currently on Mac. You’ll see it instantly pastes the component with all of the Figma layers intact, and they’re all email ready layers.
If we now click on the Preview button in the Figma plugin, you’ll notice we can see the exact layout from the design. It’s ready to go in production ready HTML. You can ignore the issues shown here. They’re just flagging that the URLs for these buttons don’t currently have links assigned. You can set those via the settings panel. For example, I’ll apply a quick link to these two buttons. Once we refresh, the warning disappears and the buttons are now clickable.
That’s just one example, but there are about 500 components available. You can filter them by brand or by the type of component you’re looking for. If you want something with pricing, click on the Pricing filter to see components that include price elements. You can also browse newsletter components or feature list components, depending on the kind of email design you’re creating.
For example, if we want this footer component from A24, we can copy it and paste it straight into our Emailify frame. It updates all of the layers automatically. You can edit the content just as you would normally in Figma. If you want to remove content, change styling, adjust colors, or swap layout elements, all of that will be reflected in the exported HTML.
For instance, we could swap these columns around and see that update immediately. Or we could replace an image by dragging in a different one from elsewhere in the design. Any changes you make visually will automatically carry through to the HTML output.
It really comes down to the type of design you want to create. These components are strong starting points for popular layouts that you might not want to build from scratch every time. You can copy them into your email frame and customize them to match your brand and content. This makes it easy to spin up new emails quickly using polished, premium design foundations.
I wanted to give you a quick overview of how this works, as it’s a newer option in the Figma plugin. You can access the component library anytime by clicking the component icon in the toolbar where it says “View Online Component Library.” That opens the website, which you can also bookmark or pin as a tab if you plan to use it regularly.
It’s a convenient way to browse for inspiration or grab ready made layout foundations without manually designing everything yourself. These components give you a strong base for more unique or interesting layouts that you can then adapt to suit your own branding and messaging.
We’ll leave it there for today. If you’re interested in exploring the Figma plugin further, including more advanced features like mobile overrides, those are covered in other tutorials on the YouTube channel. This was just a simple walkthrough of how to use the component library and copy components into your designs.
If you’d like to dive deeper into advanced concepts or explore more options in the settings panel, feel free to check out the other YouTube tutorials or visit the documentation site.
With that, I’ll leave you here for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle