The Email Love Figma Plugin pushes your email designs straight into SendGrid's Dynamic Templates — no copy-paste required. Save your SendGrid API Key once, click Export, and the template (with hosted images and email-client-ready HTML) shows up in your SendGrid account, ready to use in a Single Send or via the API. Turn on Enable Updatable Templates and re-exporting the same Figma frame overwrites the existing SendGrid template in place instead of creating a duplicate.
Prerequisites
Before you begin, make sure you have:
- An active SendGrid account
- A SendGrid API Key with template permissions — see Step 2 below
- Completed Sender Authentication in SendGrid (required before you can send)
- The Email Love Figma plugin installed
- At least one email designed in Figma using the plugin
- An Email Love Footer with an Unsubscribe link in your design (required for export)
Step 1: Open the Export Panel
- Select the email frame you want to export in Figma
- Click the Export button in the top right of the plugin
- Pick SendGrid from the export dropdown — you can also start typing "sendgrid" to filter the list
The dropdown is alphabetised, so SendGrid sits in the S section of the A–Z list of ESPs underneath the HTML, MJML, and Composa options.
Step 2: Connect Your SendGrid Account
The first time you export to SendGrid you'll see the API key form. You'll need an API key from SendGrid first:
- In SendGrid, go to Settings → API Keys → Create API Key
- Give it a name (e.g. "Email Love Plugin") and choose Full Access, or Restricted Access with Template Engine set to Full Access
- Copy the key — SendGrid only shows it once
Then, back in the plugin, fill in:
- API Key — paste the key you just created in SendGrid
- API Key Name — a friendly name for these credentials (e.g. "Marketing — Production"). You can save multiple SendGrid keys and switch between them.
- Click Set API Key
Your API Key is encrypted and stored in the plugin so you only have to enter it once per connection. To swap to a different SendGrid account later, click Change API key in the same panel.
Step 3: Export Your Email
- With SendGrid selected and your credentials loaded, click Export
- The plugin sends your HTML to the Email Love backend, which calls SendGrid's API to create a dynamic template and an active version
- On success you get a Successfully exported! toast — your template is now live in SendGrid
The template's name in SendGrid is taken from your Figma frame name, so rename the frame before exporting if you want it to show up with a specific title.
Step 4 (Optional): Enable Updatable Templates
Once you've saved a SendGrid API key, an Enable Updatable Templates toggle appears below the credentials. With it on, re-exporting the same Figma frame overwrites the existing SendGrid template in place instead of creating a duplicate.
How it works:
- The first export creates a new dynamic template and stores the returned SendGrid template ID on the Figma frame's plugin data
- With Enable Updatable Templates on, subsequent exports of the same frame update that template's active version — keeping the same template ID intact
- If the update fails (for example, the template was deleted in SendGrid), the plugin automatically falls back to creating a new template
- On a successful update you'll see a Successfully updated! toast instead of Successfully exported!
Leave the toggle off to always create a new template. Note that the template ID is tied to the Figma frame, so duplicating a frame, renaming it, or opening from a fresh session may cause the plugin to treat it as a brand new template.
Step 5: Use Your Template in SendGrid
- Log into SendGrid and open the account you exported to
- Navigate to Email API → Dynamic Templates
- Find the template you just exported (named after your Figma frame) and open it to confirm the active version looks right
- Use it in a Single Send (Marketing → Single Sends) or reference its Template ID in a transactional API call
Editing Your Template in SendGrid
You can edit the template HTML directly in SendGrid's code editor, but for ongoing changes we recommend editing in Figma and re-exporting with Enable Updatable Templates on, so your Figma file stays the single source of truth and the template ID in SendGrid stays stable.
What the Plugin Does for You
- Pushes the template to SendGrid via the API using the saved API Key, creating a dynamic template and its active version
- Hosts your images so they render correctly when SendGrid sends the email
- Handles unsubscribe links — the Email Love Footer's unsubscribe link is preserved so it works with SendGrid's send infrastructure
- Generates responsive, deliverable HTML that renders consistently across major email clients
- Stores credentials per key — switch between multiple SendGrid accounts from the same Figma file via the API Key Name dropdown
- In-place updates (optional) — with Updatable Templates on, re-exports keep the same SendGrid template ID instead of creating duplicates
Troubleshooting
Authentication errors / 401: Double-check the API Key is copied correctly — SendGrid only displays it once at creation, so if in doubt, create a fresh key. Make sure the key has Template Engine (or Full Access) permissions, not a mail-send-only restricted key. Re-open Change API key to update it.
Wrong account / template went somewhere unexpected: Each SendGrid API Key is scoped to one SendGrid account (or subuser). If you have multiple accounts (e.g. Production, Staging) make sure you saved the right key under a clear connection name. Add a new connection if needed and switch between them via the API Key Name dropdown.
"Enable Updatable Templates" created a new template anyway: The toggle only updates a template the plugin previously created from this exact Figma frame. If you duplicated the frame, renamed it, or it's a brand new frame, the plugin will create a new template instead. The plugin also falls back to creating a new template if the original was deleted in SendGrid.
Unsubscribe link not working: Make sure your design includes an Email Love Footer with an Unsubscribe link. Without one, the plugin can't wire up the unsubscribe handling for SendGrid.
Template exported but won't send: SendGrid blocks sending until Sender Authentication is complete. Confirm your domain or single sender is verified in Settings → Sender Authentication.
Template shows up but content looks broken: Re-export rather than editing the HTML directly in SendGrid. For ongoing changes, treat Figma as the source of truth and use Enable Updatable Templates to push updates.
Need help? Join our Discord community or reach out to our support team at hello@emaillove.com for assistance.
Related Articles
- Export Overview — Understand all export options and how the plugin converts your Figma design to HTML
- Image Hosting — How the plugin handles image hosting during export
Powered by