← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to open the Emailify Figma plugin, add a new Emailify container, and use the online component library to copy and paste premium email components into a Figma email design. It also shows that edits made in Figma carry through to the exported HTML, and that links can be added through the settings panel before previewing the result.

Things you'll need

• Figma
• Emailify Figma plugin

Steps

1. Open your Figma file, search for Emailify from the actions icon, and run it from Saved Plugins.
2. Create a new email frame by entering a name and clicking Add New Emailify Container.
3. Browse the starter tabs or click the component icon to open the View Online Component Library.
4. Use the component library at emailify.hypermatic.com to filter and find a component, then click Copy Figma Component.
5. Paste the copied component into your Emailify frame with Command V or Control V.
6. Edit the layout, content, colors, and images in Figma; use the settings panel to add links to buttons if needed.
7. Click Preview to check the layout and confirm the design is ready for HTML export.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Creating a reusable component library
• Next: Add elements to HTML email designs in Figma
• Open Emailify in the Figma Community