How to Export HTML Email Templates from Figma to SendGrid: Step-by-Step Guide
Learn how to convert your Figma email designs into production-ready SendGrid HTML email templates. Use the fastest Figma to SendGrid email workflow — no coding required. Export in 5 minutes with the Marka HTML Email Generator.
Updated March 2026
Figma to SendGrid email templates: export clean HTML in one click
Create professional SendGrid email templates directly from your Figma designs. Export clean, SendGrid-ready HTML code instantly with the Marka HTML Email Generator.
100% compatible with SendGrid Dynamic Templates
Exports table-based HTML optimized for SendGrid and Outlook
One-click export HTML email from Figma
Step-by-step guide
Method 1: Via API key (recommended)
Marka pushes the template directly to SendGrid — no copy-pasting required.
Create an API key in SendGrid
In SendGrid, go to Settings → API Keys and click Create API Key. Give it a name and set permissions to Full Access or at minimum Mail Send + Template Engine, then click Create & View. Copy the key — you won't be able to see it again.
Add your API key to the Marka plugin
Open the Marka plugin in Figma and select Export as SendGrid. Paste your API key into the field. The plugin saves it locally — you only need to enter it once.
Export — Marka pushes the template to SendGrid
Click Export. Marka generates the HTML and sends the template directly to your SendGrid account. You'll see a confirmation when the export is complete.
Find your template in SendGrid
Your template appears in Design Library → Your Email Designs. Use it in any campaign or transactional send.
Don't have a SendGrid API key?
Use the copy & paste method ↓Method 2: Copy & paste HTML (no API key needed)
Export HTML from Marka and paste it directly into SendGrid's code editor.
Create your email in Figma with the Marka plugin
Open the Marka plugin in Figma and build your email template. Use the built-in blocks or start from a free template. Add SendGrid Handlebars variables to any text field:
| Handlebars Variable | Description |
|---|---|
| {{first_name}} | Recipient first name |
| {{last_name}} | Recipient last name |
| {{email}} | Recipient email address |
| {{company}} | Recipient company |
| {{unsubscribe}} | Unsubscribe URL (required) |
| {{unsubscribe_preferences}} | Manage email preferences URL |
| {{Sender_Name}} | Your sender name |
| {{Sender_Address}} | Your mailing address (CAN-SPAM) |
| {{Sender_City}} | Your city |
| {{Sender_State}} | Your state |
| {{Sender_Zip}} | Your ZIP code |
Copy the HTML output to clipboard
When your design is ready, click Copy HTML in the Marka plugin. The complete HTML code is now on your clipboard.
Go to SendGrid Design Library → Your Email Designs
In SendGrid, navigate to Design Library → Your Email Designs and click Create Email Design.
Select Code Editor and paste your HTML
When prompted to choose a starting point, select Code Editor. Paste the HTML you copied from Marka into the editor, then click Save. Your template is ready to use in any campaign or transactional send.
Why export email templates from Figma to SendGrid?
Create custom SendGrid emails with Figma's powerful design tools, then export production-ready HTML in one click. No coding, no developer bottleneck.
Unlimited Design Freedom
Design any SendGrid email layout you can imagine. No rigid template blocks, no locked modules. Your exact brand design, pixel-perfect across all email clients.
Developer-Free Workflow
Designers create in Figma, engineers paste into SendGrid. Zero extra HTML/CSS work required. Ship custom SendGrid templates without extra development time.
90% Faster Than Hand-Coding
Export SendGrid-ready HTML in 5 minutes vs 2-4 hours coding by hand. Update designs instantly with re-export.
Full SendGrid Integration
Handlebars variables, unsubscribe groups, and transactional logic work natively. Use templates in marketing campaigns and transactional sends.
Frequently asked questions
Can I export Figma designs directly to SendGrid?
Yes. Use the Marka Email Generator Plugin to export your Figma email frame as clean HTML, then paste it into SendGrid as a Dynamic Template. The process takes about 5 minutes from Figma to a ready-to-use SendGrid template.
Do SendGrid Handlebars variables work in Figma designs?
Yes. Type SendGrid Handlebars variables like {{first_name}} or {{unsubscribe}} directly into your Figma text layers. The Marka Plugin preserves them exactly in the exported HTML.
What is the difference between SendGrid Dynamic Templates and Legacy Templates?
Dynamic Templates use Handlebars syntax ({{variable}}) and support conditional logic. Legacy Templates use substitution tags (-variable-). Marka exports standard HTML that works with both, but Dynamic Templates are recommended for new projects.
Will my emails render correctly in Outlook?
Yes. Marka Plugin generates table-based HTML with inline CSS — the only approach that renders correctly in Outlook 2007 through Microsoft 365. The exported code works across all major email clients including Gmail, Apple Mail, and Yahoo.
Are templates mobile responsive automatically?
Yes, if you use Figma Auto Layout. Marka Plugin generates responsive HTML with media queries that adapt the layout for mobile screens automatically.
Can I use these templates for SendGrid transactional emails?
Yes. The exported HTML works for both marketing and transactional sends in SendGrid. For transactional emails, use the SendGrid API with the template_id parameter to reference your template.
How do I add the unsubscribe link for SendGrid?
Add the {{unsubscribe}} Handlebars variable as the link URL in your Figma footer layer. SendGrid also supports the [Unsubscribe] tag for automatic injection — check which method your SendGrid unsubscribe group uses.
Resources and learning
Guides, tutorials and resources to help you master HTML email generation with Marka Plugin and Figma.
Explore all Marka Plugin features
HTML email generation is one part of the Marka Plugin. Explore design systems, template libraries, dark mode tools and more.
View all features →Complete guide: export HTML from Figma
Step by step tutorial for exporting production ready HTML email code from Figma with Marka Plugin.
Read guide →Transactional email templates
Supabase auth email templates and other transactional email designs ready for SendGrid export.
View templates →Browse all email templates
Free Figma email templates ready for HTML export. Newsletters, welcome flows, transactional emails and more.
Browse templates →Design SendGrid emails in Figma, export in one click
Stop hand-coding SendGrid email templates. Design beautiful emails in Figma with full creative control, export production-ready HTML, and paste into SendGrid in minutes. Free to start.