# How an AI agent turns a Figma design into an editable… > The working path from a Figma frame to a real WordPress page: the agent reads the node tree through Figma’s own MCP server, uploads the frame’s images to your… Source: https://www.respira.press/blog/figma-to-wordpress-with-ai --- The question arrived often enough that I stopped counting: can you get my Figma design into my page builder? For a long time the honest answer was no. Every exporter I tried either dumped a block of pasted HTML into the page, or produced something that fell apart the moment a designer reopened it in the builder. That answer changed. Figma now ships a hosted MCP server, which means an AI assistant can read a design file the way a developer reads it. Respira gives that same assistant a governed write path into a [live WordPress site](https://www.respira.press/blog/can-chatgpt-claude-edit-wordpress). Put the two together and a frame link becomes a real page. This is how the path works, what it produces, and where it still falls short. ![Figma plus Respira equals WordPress](https://www.respira.press/blog/figma-equation.png) A frame, a governed write path, a real page. That is the whole idea. ## Why HTML exporters disappoint A page builder does not store a page as HTML. Elementor keeps structured widget data, Divi 5 keeps its own blocks, Bricks keeps element trees with class references. HTML pasted into a page can look correct on the front end and still leave you with nothing to edit: open the builder and you find one opaque code block where a layout should be. So the target is not markup. The target is the builder's own format, written correctly enough that the page behaves like one a person built by hand. ## The pipeline, step by step 1. **Read the design, not a picture of it.** Through Figma's MCP server the agent pulls the frame's node tree: every frame, text node, fill, corner radius and auto layout rule, with coordinates. It also pulls a rendered screenshot to use as the visual reference. 2. **Extract the real assets.** Photographs, logos and icon vectors come out of the file itself, at their original resolution, rather than being sliced out of a screenshot. Each one is uploaded into the WordPress media library, so the finished page serves its own images. 3. **Rebuild in the builder's format.** The agent writes sections, rows, columns and modules as native objects through Respira, along with page level CSS for the parts a builder cannot express on its own, such as an overlapping card that straddles two sections. 4. **Compare and patch.** This is the part that changes the result the most. The agent screenshots the published page, compares it against the Figma frame, and writes a correction pass. Two or three rounds is typical. 5. **Hand it back editable.** The page opens in the builder as a normal page. Your team edits text, swaps images and moves sections without touching code. ## One skill per builder A conversion is only useful if the result is native to *your* builder, so the work is split into four skills rather than one generic converter: - **[figma-to-elementor](https://www.respira.press/skills/figma-to-elementor)** maps nodes to Elementor widgets and flex containers, and registers the frame's palette as Elementor global colors. See [Elementor on Respira](https://www.respira.press/integrations/elementor). - **[figma-to-divi](https://www.respira.press/skills/figma-to-divi)** writes native Divi sections, rows, columns and modules, as Divi 5 blocks or Divi 4 shortcodes depending on what the site runs. See [Divi on Respira](https://www.respira.press/divi). - **[figma-to-bricks](https://www.respira.press/skills/figma-to-bricks)** creates BEM global classes instead of inline styles, imports the palette into the Bricks design system, and runs a health check after the build. See [Bricks on Respira](https://www.respira.press/integrations/bricks). - **[figma-to-gutenberg](https://www.respira.press/skills/figma-to-gutenberg)** produces plain core blocks for sites with no page builder at all, and registers the palette in Global Styles. Other builders convert through the generic path at lower fidelity. Dedicated skills follow demand. ## Three conversions you can open Claims about design conversion are cheap, so here are three finished pages built by this exact path from free Figma community templates. Each one links back to its source file, and each is a live WordPress page you can inspect: - [A dark neon agency one pager](https://mihai.love/figma): twelve tile portfolio with a staggered grid, nine benefit cards, three pricing tiers and working FAQ accordions. - [A navy product SaaS page](https://mihai.love/figma-saas): a dashboard hero that straddles the section seam, review cards, an analytics band and a testimonial slider. - [A midnight CRM landing page](https://mihai.love/figma-crm): gradient headlines, a browser framed dashboard, six app panels and a news grid. The [Figma to WordPress page](https://www.respira.press/figma) shows each design next to its live result, so you can judge the distance between them yourself. ## What it does not do It is not pixel perfect. Fonts that are not available on the web get approximated with close alternatives. Complex vector illustration is exported as an image rather than reconstructed. Big files convert frame by frame, not all at once. And the path is built for marketing pages, portfolios and landing pages, not for web applications. One more honest note: the first pass is rarely the last. The screenshot comparison loop matters, and a human still decides when the page is good enough to publish. ## Running it yourself Connect two things to the same AI assistant: your WordPress site through Respira, and Figma's hosted MCP server at `mcp.figma.com/mcp`. Then say what you want in one line: `figma to divi: [frame link] onto [site]` The assistant proposes a build plan, writes the page as a draft, and shows you the result. Every write goes through the same safety rails as any other Respira change, so a conversion on a live site lands as a draft or a duplicate rather than over the page that is currently serving visitors. Design handoff has been a two week conversation for as long as I have worked on the web. It does not have to be the whole story anymore. Give it a frame and see how close the first pass lands. [#Figma](https://www.respira.press/blog?q=Figma)[#design handoff](https://www.respira.press/blog?q=design%20handoff)[#page builders](https://www.respira.press/blog?q=page%20builders) Found this useful? Share it. ## Join the *conversation* 0 comments · Respira account #### Sign in with your Respira account Comments are tied to your Respira login, the same account you use for the dashboard and plugin. No third-party sign-in, no scraping. [Sign in](https://www.respira.press/login?next=https%3A%2F%2Fwww.respira.press%2Fblog%2Ffigma-to-wordpress-with-ai%23comments) [Create an account](https://www.respira.press/signup?next=https%3A%2F%2Fwww.respira.press%2Fblog%2Ffigma-to-wordpress-with-ai%23comments) No comments yet. Be the first to weigh in. ## Keep *reading* [GuideEdit Elementor pages with AI safelyNative widget edits on a duplicate, approved before publish.RespiraRead →](https://www.respira.press/blog/edit-elementor-with-ai-safely)[GuideEdit Divi and Bricks with AINative builder format, not pasted HTML.RespiraRead →](https://www.respira.press/blog/edit-divi-bricks-with-ai)[GuideBest WordPress MCP servers in 2026What separates the options in practice.RespiraRead →](https://www.respira.press/blog/best-wordpress-mcp-servers) ### You're not the only one *talking* to WordPress. The Respira community is where agency owners debug Divi migrations at 11pm, where vibe coders swap prompts that actually ship, and where the roadmap gets written out loud. *Breathe with us.* Lines of code pushed 32,740,393 Live from the ecosystem · updates as the agent ships WordPress sites connected 3,784 Real sites, run by the people in these rooms Find us wherever you already are [ Slack Async threads, release-day huddles, and the #show-your-work channel that never sleeps. Join ](https://go.respira.cafe/slack) [ Discord Live voice on release days, screenshare debugging, and the vibe-coder corner that's always buzzing. Join ](https://go.respira.cafe/respira-discord) [ Reddit Questions, answers and build logs in the open, where the thread is still there months later. Join ](https://www.reddit.com/r/RespiraforWordPress/) [ Facebook group Agency owners and site owners comparing notes on running AI against real WordPress sites. Join ](https://www.facebook.com/groups/1447068940850273/) [ GitHub Discussions Long-form Q&A, bug reports, feature requests, and the public roadmap. Open ](https://go.respira.cafe/github-discussions) [ ! Founder notes Letters from Mihai on what shipped, what broke and what is next. Every one is archived. Read ](https://www.respira.press/newsletter) See What AI Says LLM-ready prompts about Respira MCP + WebMCP What would you like to know? Ask your favorite AI Opens in a new tab. These prompts are designed to teach LLMs what Respira can do. Question copied. Paste it in Gemini