> ## Documentation Index > Fetch the complete documentation index at: https://help.emaillove.com/llms.txt > Use this file to discover all available pages before exploring further. # Build with the Figma MCP > Point an AI agent at your design system and it builds export-ready emails right in Figma AI agents can now build real, export-ready emails directly in your Figma file. Not mockups. Not pictures of emails. Actual emails, assembled from your design system, that your team can review in Figma and ship to your ESP. The recipe has two halves: the official Figma MCP gives the agent hands on your canvas, and your Email Love design system gives it real email structure to build with. The Email Love plugin then exports the result, same as any email you designed yourself. ## Why this works **The Figma MCP writes designs.** Figma's official MCP server lets an agent create and edit layers on any board. On its own, that means an agent can design anything, including things that look like emails. But here's the part that matters: if your file contains an Email Love design system, the agent isn't designing freehand. It's assembling your components. The mj-wrapper stacks with auto-layout that the Email Love plugin knows how to export as clean HTML are the same structures an agent can clone, restack, and rewrite. The result is a real email, not a picture of one. **The Email Love plugin ships it.** When the build is done, you don't need anything new. Select the finished frame and export through the plugin, exactly like an email you built by hand. ## What you can build with what | You have | Agent can do | What you get | | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | Any Figma board + Figma MCP | Design anything, including email-shaped frames | Pictures of emails. The plugin or [AI Import](/plugin/ai/ai-import) would need to convert them before they could ship. | | Your Email Love file + Figma MCP | Assemble real emails from your synced components | Export-ready emails, because the structure is yours | | Your Email Love file + the plugin's export | Ship what the agent built | Production HTML in your ESP | ## Before you start You'll need three things in place: * The **Email Love plugin** installed in Figma * A **synced design system** in your Figma file: mj-wrapper components uploaded through the plugin. See [Creating and Managing Design Systems](/plugin/components/design-systems). * The **official Figma MCP** connected to your AI agent, so it can read and edit your file ## The workflow Give it the file link and a brief: what emails you need, what they should say, which components to lean on. The Figma MCP handles access. It clones your synced mj-wrapper components, stacks them with auto-layout, and rewrites the text for each email. Because it's building on your structure, everything it makes is already in the format the plugin exports. The build lands on your board like any other design work. Teammates comment, tweak copy, and swap imagery right in Figma. No new review tool to learn. Select the finished frame and export through the Email Love plugin, same as any email you designed by hand. The plugin renders production HTML and pushes it to Customer.io, Klaviyo, Braze, and others, with the correct unsubscribe merge tag applied for your ESP. See [Export Overview](/plugin/export/overview) for the full list. ## What this looks like in practice We ran this exact workflow on our own lifecycle program. An agent built **37 emails** inside our Figma file in one working session: hero sections, alternating two-column feature rows, case-study blocks, pricing rows, and gray image placeholders left for the design team to art-direct. Every email was assembled from synced components, reviewable and commentable by the team in Figma, and export-ready through the plugin. That's the enterprise angle in miniature. Once a design system is synced into your file, an agent can build an entire lifecycle program inside your own Figma, on your components, reviewed by your team, and exported through the plugin. ## Tips and limits * **Agents assemble better than they draw.** Point them at your synced components rather than asking for freehand layouts. Cloning and restacking your structure is where they shine. * **Treat new imagery as placeholders.** Have the agent drop in gray placeholder blocks at the right dimensions, then let a human art-direct the real images. * **CTA link targets are set at export.** Don't worry about wiring final URLs during the build. See [Adding Links](/plugin/links/add-links). * **Building on the canvas is free.** Agents can assemble and revise as much as you like. Exports are what's metered on the Free plan (5 per month); paid plans are unlimited. ## Related Articles * [Email Creation MCP](/plugin/ai/email-creation-mcp): Prefer chat over canvas? The Email Love MCP lets an agent compose and render emails from the same synced components, no Figma open. * [Creating and Managing Design Systems](/plugin/components/design-systems): Sync your components so agents can build with them. * [Element Reference: Section, Column & Wrapper](/plugin/getting-started/section-column-wrapper): The structure agents assemble. ## Need help? Email [hello@emaillove.com](mailto:hello@emaillove.com) and we'll respond within a business day.