Figma to SendGrid Email: Design, Export & Import Guide (2026)
SendGrid's code editor accepts raw HTML — which means you can design your transactional and marketing emails in Figma and import them directly. Marka Email Generator Plugin converts your Figma design into clean, SendGrid-compatible HTML in one click, with no hand-coding required.
This guide covers the complete workflow: Figma design → HTML export → SendGrid import.
Why design SendGrid emails in Figma
Full design control for transactional and marketing emails
SendGrid's drag-and-drop Design Editor has a limited block set. If you need a custom layout — branded header, multi-column product grid, custom footer with compliance links — you have to write HTML by hand or use a third-party builder. Figma gives you the same design freedom as any product design work, and Marka exports it as email-safe HTML automatically.
Reusable components across email types
Transactional emails (password resets, receipts, notifications) and marketing emails (newsletters, promotions, onboarding) usually share the same brand elements: logo, color palette, footer, social links. Building these in Figma as shared components means you update once and re-export — no copying HTML across template files.
One-click export via API or copy-paste
Marka connects to SendGrid in two ways: directly via API key (your template appears in SendGrid's Design Library without leaving Figma) or via HTML copy-paste into SendGrid's code editor. Both produce the same production-ready HTML.
How to prepare your email in Figma
Use Handlebars variables in text layers
For SendGrid Dynamic Templates, type Handlebars variable syntax directly into your Figma text layers. Marka preserves them in the exported HTML:
| Variable | Description |
|---|---|
{{firstName}} |
Contact first name |
{{lastName}} |
Contact last name |
{{email}} |
Contact email address |
{{{unsubscribe}}} |
Unsubscribe URL (triple braces for raw HTML) |
{{sender_name}} |
Your sender name |
{{subject}} |
Email subject line variable |
{{{body}}} |
Dynamic content block |
Use triple braces {{{variable}}} when the variable contains HTML (like unsubscribe links). Single braces {{variable}} are for plain text values.
Set up responsive layout with Auto Layout
Use Figma Auto Layout for all content rows. Marka generates CSS media queries automatically when columns are laid out with Auto Layout — the email collapses to a single column on mobile without any extra configuration.
Add preheader text
Add a text layer labeled Preheader in your Figma frame. Marka picks it up and renders it as hidden preheader text in the exported HTML — visible in the inbox preview line, invisible in the email body.
Method 1: Export directly to SendGrid via API key
The fastest way to get your Figma email into SendGrid — no copy-pasting required.
- In SendGrid, go to Settings → API Keys → Create API Key
- Give the key Full Access or at minimum Mail Send and Template Engine permissions
- Copy the API key
- In Figma, open the Marka Email Generator Plugin
- Select your email frame on the canvas
- Choose Export as SendGrid and paste your API key into the field
- Click Export — Marka creates a new Dynamic Template in your SendGrid account
Your template appears in SendGrid → Email API → Dynamic Templates within seconds.
Method 2: Copy-paste HTML into SendGrid's code editor
Use this if you prefer not to share an API key with the plugin, or if you want to review the HTML before importing.
Step 1: Export HTML from Figma
- Open Marka Email Generator Plugin in Figma
- Select your email frame on the canvas
- Click Export HTML and choose Copy HTML
Step 2: Create a Dynamic Template in SendGrid
- Go to Email API → Dynamic Templates
- Click Create a Dynamic Template
- Name your template and click Create
- Click Add Version to create the first version
- Select Code Editor when prompted to choose an editor
Step 3: Paste your HTML
- Clear the default HTML in SendGrid's code editor
- Paste your exported HTML from Marka
- Click Save in the top right
Step 4: Preview and test
- Use SendGrid's Preview tab to check desktop and mobile rendering
- Click Send Test Email to verify it in your inbox
- Check that Handlebars variables render correctly with test data (SendGrid lets you add sample JSON for preview)
Common issues and fixes
Handlebars variables showing as plain text after export
Make sure you're using the correct Marka export option for SendGrid. The plugin preserves {{variable}} syntax when you select the SendGrid export format.
Images not loading in SendGrid preview
Images need to be hosted at publicly accessible URLs before exporting. Upload images to SendGrid's Image Library (under Marketing → Images) or any CDN, then reference the full https:// URL in Figma before exporting. Marka uploads images automatically on export if the Pro plan CDN option is enabled.
Unsubscribe link rendering as raw text
Use triple braces: {{{unsubscribe}}} — single braces HTML-encode the URL, which breaks the link. SendGrid injects the actual URL when sending.
Email too wide on mobile This happens when content rows aren't using Figma Auto Layout. Apply Auto Layout to all rows and columns and re-export. Marka generates proper responsive table structure from Auto Layout frames.
Template not appearing in SendGrid after API export Check that your API key has Template Engine write permissions. Go to Settings → API Keys, edit the key, and verify the Template Engine scope is set to Full Access.
