Documentation.
FigMail bridges the gap between design and email development. By utilizing Figma's Auto Layout features, we generate production-ready, table-based HTML that renders consistently across all major email clients.
Key Capabilities
- ✓ Auto Layout to HTML Tables
- ✓ Retina Image Support (@2x)
- ✓ Outlook VML Backgrounds
- ✓ Dark Mode Optimization
Installation
To install FigMail directly from Figma:
- Open Figma and navigate to the Community tab or press
Shift + Ito open Resources. - Search for "FigMail".
- Click the Run button to start immediately, or Save to add it to your plugins list.
Note: FigMail requires read access to your file to analyze layers and write access to save your preferences.
Designer Guide
As a designer, you shouldn't need to wait for developers or learn HTML tables. FigMail lets you control every aspect of your email — from spacing and typography to image quality — directly in Figma.
Direct export
Go from design to inbox without handoff delays or developer bottlenecks.
Pixel-perfect control
Your Auto Layout settings translate directly to HTML table structures.
Asset management
Control image compression, retina support, and hosting options.
Links & URLs
You can turn any layer (Frame, Group, Rectangle, Image) into a clickable link without adding a separate text layer.
Simply append the URL to the layer name. The exporter detects the `https://` pattern and wraps the element in an anchor tag.
Smart Layer Naming
You can control the HTML generation behavior directly from Figma by writing simple instructions in parentheses in your layer names. No strict keywords required—just describe what you want.
Tells the AI to prevent these columns from stacking vertically on mobile devices.
Instructs the generator to center the background image for this frame.
Overrides the default single-column mobile view to keep a 2-column grid.
Complex Icons & Vectors
Sometimes you have a complex icon made of multiple vector paths. To ensure it exports as a single crisp image:
- 1Select the Group or Frame containing the icon components.
- 2In the right sidebar, click the + next to Export.
- 3This signals FigMail to treat the entire group as a single image asset, preserving its visual integrity.
Frames vs Groups
Always prefer Frames for layout structure. Groups are often flattened into images by the exporter unless they contain only simple vectors. Frames with Auto Layout translate directly to HTML tables.
Hidden Layers
Layers with visibility toggled off (eye icon) are completely ignored. Use this to keep draft versions or alternative copy in your file without affecting the export.
Design Essentials
Typography & Web Safe Fonts
Custom fonts (like Inter or SF Pro) often default to Times New Roman in Outlook/Gmail.
- ✓FigMail automatically adds fallbacks (Arial/Helvetica).
- •Use system fonts for body text to ensure readability everywhere.
Buttons via Auto Layout
Don't use "Rectangle + Text" groups for buttons.
- ✓Use Auto Layout (Shift+A) on the text layer.
- ✓Add fill and corner radius directly to the frame. This guarantees perfect code.
Shadows & Blur (Effects)
CSS box-shadow is not supported in Outlook.
- !Avoid shadows on native elements like buttons.
- •If a shadow is critical, export the entire element as an image.
Dark Mode & Transparency
Your email may be viewed in Dark Mode.
- ✓Use transparent PNGs for logos/icons.
- ✕Avoid black text on transparent backgrounds (it disappears in dark mode).
Mobile Layout Strategy
Think in "columns". FigMail stacks columns vertically on mobile by default.
- •Visualize how blocks will stack linearly.
Optimal Dimensions
Keep your design width between 600px - 640px.
- ✓The industry standard for reliable rendering across all devices.
Using FigMail
Once your design is ready, generating code is simple:
AI Features
FigMail offers two powerful AI-powered features that can enhance your email generation workflow: automatic translation and intelligent layout improvement.
Translate
Instantly translate all text content in your email to a different language while preserving the original design structure and formatting.
How it works
- 1Click the Translate button (globe icon) in the plugin interface.
- 2Select your target language from the dropdown menu.
- 3Click Generate HTML — all text will be translated automatically.
Supported Languages
Don't see your language? Contact us and we'll add it!
Tip: The selected language badge appears next to the Translate button. Click the X icon to clear your selection.
Improve Layout
Enable the AI to enhance and polish your design beyond the exact Figma layout, while maintaining the original content structure and intent.
How it works
Click the Improve Layout button (rocket icon) to toggle this feature on or off. When enabled, the AI will have creative freedom to:
When to use: This feature is perfect when your design is a rough draft or when you want the AI to apply professional polish to your email.
When to avoid: If you need pixel-perfect reproduction of your Figma design, keep this feature disabled.
Combining Features
You can use Translate and Improve Layout together. For example, you can translate your email to Spanish while simultaneously allowing the AI to enhance the design — all in a single generation.
Result Preview
After generation completes, you'll see a preview page where you can inspect, test, and export your email HTML.
Preview Modes
Desktop View
Preview your email at 800px width — the standard desktop email client viewport.
Mobile View
Test responsive behavior at 425px width — see how columns stack and text reflows.
Light Mode
Standard light theme preview — how most recipients will see your email.
Dark Mode
Simulates Gmail/Apple Mail dark mode — see how colors invert and if images remain readable.
Visual Comparison
Below the preview, you'll find a side-by-side comparison tool that lets you compare your original Figma design with the generated HTML output.
Export Actions
At the bottom of the result page, you'll find three export options:
Copy Code
Copies the complete HTML to your clipboard. Paste directly into your ESP's code editor.
Download HTML
Downloads a single .html file. Images are referenced via CDN URLs.
Download Archive
Downloads a ZIP file containing the HTML and all images. Use this if you need to host images on your own server.
Tip: Press ESC to return to the History panel and view other generations.
Generation History
FigMail keeps a complete history of all your generations, allowing you to revisit and re-export any previous email at any time.
Accessing History
Click the clock icon in the plugin header to open the History panel. The panel slides in from the right and shows all your past generations.
Preview Thumbnails
Each entry shows a thumbnail of the original Figma design for quick visual identification.
Frame Names
The name of the Figma frame is displayed, helping you identify specific emails.
Timestamps
See when each generation was created — today's items show only time, older ones show full date.
Infinite Scroll
Scroll down to load more generations — older items are loaded automatically as you reach the bottom.
Status Indicators
Each generation displays a status badge indicating its current state:
Resume In-Progress Generations
If you close the plugin while a generation is processing, don't worry! Simply reopen the plugin and click on the processing item in History to resume watching its progress. The generation continues on the server regardless of whether the plugin is open.
Code & Export
FigMail generates clean, well-structured HTML that follows email development best practices. The code is designed to be readable, maintainable, and easy to extend.
Semantic structure
Logical table nesting with clear hierarchy.
Inline styles
No external CSS dependencies for maximum compatibility.
Outlook-safe
VML fallbacks included where needed for backgrounds.
Commented sections
Easy navigation through the codebase.
Code Structure
Table-based layout
Nested tables for Outlook compatibility
Inline CSS
All styles applied directly to elements
VML backgrounds
Conditional comments for Outlook background images
Media queries
Responsive breakpoints in embedded styles
ESP Integration
The generated HTML works with any Email Service Provider. Here's how to use it:
Mailchimp
Paste into Code Editor under "Edit with HTML"
Klaviyo
Import via Templates → Create from HTML
SendGrid
Use in Dynamic Templates or Marketing Campaigns
Any other ESP
Standard HTML works everywhere
Customization
Merge Tags
Replace placeholder text with your ESP's personalization syntax:
{{first_name}}*|FNAME|*${contact.firstName}Tracking Pixels
Add your analytics pixel before the closing </body> tag. Most ESPs add this automatically.
Conditional Logic
Wrap sections in your ESP's conditional syntax to show/hide content based on subscriber data.
Export Settings
| Setting | Description |
|---|---|
| Image Hosting | Choose between inline Base64 (small emails) or External URL (recommended). |
| Minify HTML | Removes whitespace to reduce file size. Recommended for production. |
| Web Fonts | Include links to Google Fonts. Note: Not supported in all email clients. |
Troubleshooting
Why the result may differ from the layout?
Email clients have limited CSS support compared to web browsers. Some Figma effects (shadows, blur, blend modes) cannot be translated 1:1 to email HTML.
Additionally, FigMail uses an AI engine to generate the code. Discrepancies can occur due to:
- Complex Layout Structure: Deeply nested frames or ambiguous positioning.
- Design Recommendations: Non-compliance with Best Practices.
- AI Interpretation: Occasional processing errors or "hallucinations" by the model.
If you encounter significant issues, try simplifying your layout structure (use Auto Layout) or review our design guide.
Images aren't appearing?
Ensure your images are inside the selected frame. If using external hosting, verify the URLs are publicly accessible.
Layout breaks in Outlook?
Outlook uses Word's rendering engine. Avoid overlapping layers or negative margins. Stick to simple Auto Layout.
Text looks different?
Email clients often override font styles. Always set a fallback font (e.g., Arial, sans-serif) in the plugin settings to ensure readability when custom fonts fail.