Overview
The Mailkick Export Figma plugin allows you to copy your email designs from Figma and paste them directly into the Mailkick editor. The plugin preserves your layout, typography, colors, and images.You need a Mailkick account to use this plugin.
Installation
- Open Figma and go to Plugins > Browse plugins in Community
- Search for “Mailkick Export”
- Click Install
How to use
Step 1: Select your design
In Figma, select the frame or elements you want to export. The plugin will show you how many elements are selected.Step 2: Copy your email
- Open the plugin: Plugins > Mailkick Export
- Click Copy Email
- The design data is now in your clipboard
Step 3: Paste in Mailkick
- Open your email in the Mailkick editor
- Click anywhere in the editor
- Press
Cmd+V(Mac) orCtrl+V(Windows) - Your design will be imported
Step 4: Import images (optional)
If your design contains images, you’ll need to import them separately:- In the plugin, click Export Images (optional)
- A ZIP file will be downloaded containing all your images
- In Mailkick, a modal will appear asking for this ZIP file
- Drag and drop the ZIP file to upload your images
What gets imported
| Element | Supported |
|---|---|
| Text (with styles) | Yes |
| Images | Yes |
| Buttons | Yes |
| Layout (auto-layout) | Yes |
| Colors | Yes |
| Borders | Yes |
| Border radius | Yes |
| Spacing | Yes |
| Icons | Yes (as images) |
| Gradients | Partial |
| Effects (shadows) | No |
Tips for best results
- Use Auto Layout - Frames with auto-layout convert better to responsive email layouts
- Keep it simple - Complex nested structures may not convert perfectly
- Name your layers - Well-named layers make it easier to edit in Mailkick
- Use solid colors - Gradients have limited support in email clients
- Design at 600px width - This is the standard email width
Troubleshooting
Images are not showing
Make sure to export and import the images ZIP file. Images are not embedded in the clipboard data.Layout looks different
Email clients have limited CSS support. Some Figma layouts may need adjustment in Mailkick for best email compatibility.Plugin not working
- Make sure you have elements selected
- Try refreshing Figma
- Reinstall the plugin if issues persist