Import from Figma

Design in Figma, send from EmailFlow AI. Connect your Figma account, paste a file link, pick a frame, and the AI recreates it as an editable, email-safe HTML template — reading the exact copy, colors, and fonts straight out of the Figma file instead of guessing them from pixels.

Connecting Figma

Open Integrations in the sidebar and click Connect on the Figma card. You are sent to Figma's own authorization screen; approve access and you are returned here with the connection live. The permission requested is read-only file content — EmailFlow AI can read the designs you can see, and nothing else. The token Figma issues is stored encrypted at rest, and disconnecting deletes it immediately.

Importing a frame

Go to Email Templates → New template → Import design and switch to the From Figma tab. Paste any Figma file, design, or prototype URL — the kind you get from Share → Copy link — and click Load frames. Every top-level frame in the file appears as a thumbnail card, grouped in page order; large files paginate. If your link already points at a specific frame (it has a node-id in it), that frame comes pre-selected.

The From Figma tab on the import screen: a Figma URL field above a grid of frame thumbnails with names and page labels, one frame selected, and an Import selected frame button below — Paste a Figma link, pick a frame, import — the picker shows every top-level frame in the file.

Pick the frame you want and click Import selected frame. The import streams its progress live — exporting the frame from Figma, analyzing the design, generating the email — and when it finishes you land directly in the AI Design Studio with the recreated template open and ready to edit.

What the AI actually reads

The recreation works from two sources at once. A high-resolution export of your frame gives the AI the visual layout — section order, spacing, imagery placement. At the same time, the importer walks the frame's layer tree in the Figma file itself and hands the AI the ground truth: every text layer's copy verbatim, the exact hex values of the fills, and the font families and weights in use. Where pixels and file data disagree, the file data wins — so headlines don't come back paraphrased and brand colors don't drift a few shades.

mail

The output is email-safe HTML — table-based layout, inlined styles, no scripts — not a pixel-perfect web page. Figma designs routinely use effects email clients cannot render (auto-layout, blend modes, clipped vectors); the AI recreates the design's structure, copy, and palette in markup that actually survives Gmail and Outlook. Imagery is replaced with placeholders for you to swap in the builder.

Re-importing after design changes

Templates imported from Figma remember which file and frame they came from. When the design changes in Figma, open the more_vert menu on the template card and choose Re-import from Figma. The current state of the frame is imported as a new template — the original and any edits you made to it stay untouched, so re-importing is always safe.

The connection's Manage page (Integrations → Figma → Manage) shows connection health and every template that came from Figma, each linking straight into the builder.

The Figma Manage connection page: a connection status card with Disconnect, a short how-it-works explainer, and a list of templates imported from Figma with builder links — The Manage page — connection health on top, every Figma-imported template below.

Troubleshooting

The Figma card shows an error badge. Figma rejected our token — usually because access was revoked inside Figma. You also get an in-app notification when this happens. Click Reconnect to run the approval again.
"That does not look like a Figma file URL." Paste a link to a file, design, or prototype (from Share → Copy link in Figma), not a folder, project, or team page.
"That frame no longer exists in the Figma file." The frame was deleted or moved since the link was made. Reload the frames and pick again.
No frames were found. The picker lists top-level frames only. If your design lives inside a group or section, wrap it in a frame in Figma first.
The import asks about AI credits. Recreation runs through the same generation pipeline as text-to-email and spends AI credits the same way.