Install the plugin
This demo version comes as a zip file. You only do this once. You need the Figma desktop app, because the browser version of Figma cannot load plugins from a file.
- Get the zip. Download Email-Design-System-demo.zip and save it to your computer.
- Unzip it. Double-click the zip (Windows: right-click, then Extract All). You get a folder called Email Design System. Move it somewhere permanent, such as your Documents folder. If you delete or move it later, the plugin stops working.
- Open Figma. Use the desktop app and open any design file, or create a new one.
- Import the plugin. Go to Plugins, then Development, then Import plugin from manifest.
- Choose manifest.json. In the window that opens, go into the Email Design System folder and pick the file named manifest.json. Press Open.
- Run it. Go to Plugins, then Development, then Email Design System. The plugin panel opens with four tabs. Next time, run it the same way, or from Plugins, then Run last plugin.
Plugin did not start? Check that the dist folder is still sitting next to manifest.json inside the Email Design System folder. If Figma says it cannot find the plugin, repeat steps four and five. If you do not see Development in the Plugins menu, you are probably in the browser. Switch to the desktop app.
Your first email in five steps
Plugin installed? Here is how to make your first email. The emails are built from ready-made blocks, called modules, that look the same in every inbox. You edit freely and the plugin handles the tricky email parts.
- Open the plugin. In Figma, go to the Plugins menu and choose Email Design System.
- Pick a template. On the Templates tab, choose one (for example Newsletter) and press Use this template. A 600 pixel wide email appears on your canvas.
- Make it yours. Click any text to retype it. Select a grey box and fill it with your picture (Fill, then Image).
- Choose a look. Open the Style tab and try one. The whole email restyles and keeps your edits.
- Export. Open the Export tab, press Build HTML, read the reminders, then press Copy HTML.
Stuck on a step, or something does not look right? Troubleshooting and questions covers the most common problems.
Then paste the HTML into your email tool, upload your images, and send yourself a test. Sending it walks through that part.
The four tabs
They run left to right, and you will mostly move through them in that order.
Templates
A template is a finished layout with sample text and grey picture boxes. Change as much of it as you like.
- Seven starting points: Newsletter, Simple announcement, Product highlight, Business report, Poster, Greeting and Minimal.
- Or begin with a blank email and build it up from the Modules tab.
- Tick Fill with example text to see each layout with real words in it.
Modules
Modules are the building blocks: header, hero, text block, columns, image and text row, quote, button, callout, progress bars, chart, divider, spacer and footer. Each has a few variants, such as logo left or logo centre.
- Every block has a small thumbnail. Click one to add it.
- New modules land after the one you have selected, or at the bottom.
- Select a layer to add a link or alt text, and build a chart from your numbers.
Style
Eight presets: Simple, Modern, Elegant, Cool, Techie, Corporate, Warm and Bold. Pick one and your email restyles instantly. The thumbnails in the Modules tab follow your choice.
- Set your brand colour, pick fonts and adjust how round the buttons are.
- Upload your logo once and it goes into every header.
- Save your own combination under My styles and reuse it.
- Select several emails first to restyle them all at once. With nothing selected, the first email changes.
Export
Export turns the canvas into HTML and checks your work. It lists what to fix before you send: pictures still grey, buttons without links, missing alt text, leftover placeholder text.
- Fill in the email details, then press Build HTML.
- Check the Light and Dark previews.
- Copy the HTML, or download it with your images.
One example of every template
Each one is built here in a different style, with sample text for a fictional coffee roaster. Scroll sideways on a small screen.
Want these in your own file? The Templates tab has a Build example set button that creates all seven on your canvas.
Editing your email
Edit it the way you edit any Figma design, within a few simple limits.
- Text
- Double-click and type. Leave the layer where it is. The plugin finds each piece of text by its layer name (names that start with slot).
- Pictures
- Select a grey box. In Figma's Fill section choose Image and pick your file. Pictures are exported at double size so they stay sharp on high-resolution screens.
- Links
- Select a button or picture and open the Modules tab. Type the web address in the Link field and press Save. Buttons without links show up as reminders on the Export tab.
- Alt text
- With a picture selected, the same panel has an Alt text field. Write a short description. Screen readers read it out, and email apps show it when they block images.
- Your logo
- Upload it once on the Style tab and it goes into every header. Replace or clear it any time.
- Charts
- In the Modules tab, find Chart from your numbers. Type one bar per line as a label, a comma, then a number (for example Q1, 24). Press Build / update chart. Up to eight bars are used. In the email the chart becomes a picture.
- Progress bars
- Retype the label and percentage on the canvas, then press Refresh layout on the Modules tab to redraw the bars.
- Stay inside the modules
- Anything you add on the canvas that is not part of a module is left out of the HTML, and the Export tab tells you so. To add something extra, add another module.
Sending it
Emails cannot carry pictures inside them, so the pictures have to live at a web address. That is the one extra step compared with a normal design.
- On the Export tab, type where your pictures will live in Where will the images be hosted. This is a folder address on your own website or in your email tool's image library, for example https://yourwebsite.com/emails/october/. Leave it as images/ if you are only testing on your own computer.
- Add a subject line and the preview text, the grey line that shows next to the subject in the inbox.
- Pick PNG for the sharpest pictures, or JPG for smaller files. Charts, logos and rounded pictures always stay PNG.
- Press Build HTML and work through any reminders. Use the Light preview and Dark preview buttons to see both.
- Press Download images (or Download all as a .zip) and upload the pictures to the address from step one.
- Press Copy HTML and paste it into your email tool where you can edit the HTML or code. Download .html gives you the same thing as a file.
- Send yourself a test before anyone else. Open it on your phone and on a computer, ideally in Outlook too.
Do's and don'ts
Do
- Start from a template or module and edit the text and pictures.
- Keep layers inside their modules.
- Add a link to every button.
- Write alt text for pictures.
- Use the preset fonts.
- Send yourself a test first.
Don't
- Draw free-form layouts from scratch. Only modules turn into reliable HTML.
- Rename the slot layers or drop loose shapes on the canvas.
- Leave buttons without links.
- Put important words only inside a picture. Some inboxes block images.
- Expect custom fonts to arrive in the inbox.
- Send straight to your whole list.
Why are the fonts limited?
An email shows text in fonts already on the reader's device. It cannot bring its own. A fancy font that looks great in Figma would be swapped for something else in the inbox, and the design would shift. So the plugin offers seven fonts that nearly every device has: Arial, Verdana, Tahoma, Trebuchet, Georgia, Times and Courier. If a text layer uses a font outside that set, Export tells you which font the email will use instead.
Troubleshooting and questions
I changed the style but only one email changed.
Select every email you want to restyle first. Click each email's name on the canvas while holding Shift. With nothing selected, only the first email changes.
My pictures are missing in the sent email.
The address in Where will the images be hosted must point to the folder where you uploaded the pictures, and the file names must match the ones in the download. Check that the address opens in a browser.
Export says a picture is still the grey placeholder.
Select the grey box and fill it with an image, or remove the module if you do not need it.
A progress bar did not update after I edited it.
Press Refresh layout on the Modules tab.
Export says part of my design was left out.
Only modules are exported. Move the content into a module, or add a new module for it.
The Light preview looks dark.
Update to the latest version of the plugin. Older versions followed your computer's dark mode even in the Light preview. The email itself is fine either way.
It looks a little different in Outlook.
Outlook is the pickiest email app, and the plugin is built to match it as closely as possible. Send a test and tell us what you see. Real-world feedback is how this gets better.
Do I need to know HTML?
No. You never have to look at it. Press Copy HTML and paste.
Can I use this in Canva?
Not yet. Canva comes after the Figma version is solid.
Still in progress
This plugin is still being built and tested. Here is what to expect.
- It has been tested in Figma. Real Outlook, Gmail and Apple Mail checks are still underway, so please send tests and share what you find.
- Bold or italic words inside a paragraph are not supported yet. Style a whole text block instead.
- Sending straight to an email service from the plugin is a future idea.
- A Canva version is planned.
- The zip install is for demos. Installing from the Figma Community will replace it once the plugin is published.