AI design to code in 2026: from Figma file to production website

Code Layers: working prototypes on the Figma canvas

On 15 October 2026 Figma announced that Code Layers had moved into open beta. Teams can start from scratch, select design frames and prompt the Figma agent to turn them into a code layer, clone a connected GitHub repository, upload a local folder, or capture live webpage code with the Figma Chrome extension. A follow-up Workflow Lab post on 4 November walked through cloning an app repo, prompting three interactive variations side by side, extracting editable design layers, then asking the agent to combine two teammates' explorations and write a technical Spec before opening a pull request. Code Layers is now open to all plans; on paid plans, creating and editing inside a code layer was free through 4 November 2026, after which the work uses AI credits like other agent features.

Early customers are using that space for alignment, not only for speed. Maria Gaston, a Figma designer, said working in a separate coding tool “made it hard to share work and iterate” and felt “a very isolated environment.” After importing the prototype as a code layer, “everyone else who has access to this file can easily go in and play with it.” At Checkout.com, Senior Product Designer Kris Murphy reported that Code Layers helped him build a client demo about 50% faster and called it “a proper bridge between design and development.” Merkle told Figma it saw 30% faster iteration and feature development and 50% less documentation such as interaction specs on tickets. Matt Davey, Chief Experience Officer at 1Password, summarised why the canvas matters: “The real superpower of Figma has always been the canvas. Being able to look at these UI elements together is incredibly valuable.”

MCP and Code Connect: give agents your real components

A pretty prototype still fails in production if the agent invents new buttons instead of using yours. Figma's MCP server is built to close that gap. The remote endpoint at mcp.figma.com/mcp lets AI clients extract variables, components and layout data, generate code from selected frames, and, with the right skills, write native Figma content back to the canvas. When components are linked with Code Connect, the MCP server wraps each connected component with design properties, import statements, usage snippets and any custom instructions you add, so the agent reuses your real React or SwiftUI components instead of guessing markup.

Config India 2026 also listed MCP improvements as available now on all plans, including tools that generate interactive code layers on the canvas and turn agent HTML into editable design layers. AbilityNet's Robin Christopherson argued in August that this pattern matters for accessibility as well as speed: instead of hoping a model remembers WCAG rules from a prompt, teams should let the agent query live design-system context, tokens and component APIs while it works. Prompting helps, he wrote, but “it should not be mistaken for a strategy.”

Assembled, not freestyled: Relume and component libraries

Not every team starts inside a product Figma file. For marketing websites, Relume's AI builder assembles pages from a library of more than 1,000 responsive components, then exports to Figma, Webflow or production-ready React with Tailwind CSS and shadcn/ui, or plain HTML. Relume's own export page is clear about the method: “The AI does not write raw code. It selects from components our designers built and maintain, then assembles them into your site.” Its Relume Library MCP goes further for teams already in Cursor or Claude: the assistant searches the real library by description and drops editable React into the project, with shared primitives and a Tailwind preset, instead of inventing a one-off layout for every section.

That assembled path is a useful contrast to blank-canvas generation. You still need brand polish, real content and engineering for anything behind a login wall, but you start from components that already claim responsive behaviour and accessibility patterns rather than from a screenshot. Use it when the job is a marketing site or a first draft of structure. Keep custom UI/UX work when the product itself is the differentiator.

What still needs a human before production

Research published at the ACM Web for All conference in April 2026 is a blunt warning against shipping AI UI as-is. In Generated Inaccessible, researchers asked 54 designers to create interfaces by hand in Figma, then generate comparable designs with six AI tools. Across 21,880 accessibility assessments on five WCAG success criteria, AI-generated interfaces reached only 29.0% compliance. Colour contrast landed at 26.8% and use of colour alone at 19.2%. Asking for accessibility in the prompt did not fix it; in that study it decreased compliance. Participants said 39% of AI violations needed a major redesign, against 22% for manual designs.

LegalZoom's engineering team reached a similar boundary from the production side. In a June 2026 write-up of an AI-assisted dashboard rebuild, they enforced design-system tokens, component reuse and real API clients at generation time, then still needed human review for live entitlement state and for a radar chart that worked with a mouse but had no keyboard or ARIA support. Their verdict: “A visualization that only works for mouse users isn't finished, no matter how good the demo looks.” AbilityNet's Christopherson is just as direct: “Accessibility is not a 'lint rule'.” Automated checks catch some failures, design systems prevent more, and lived experience, expert review and disabled user testing still matter. Brand edge cases, content tone, performance budgets and anything that touches payments or personal data belong in that same human gate.

A practical checklist from Figma file to production website

• Decide the job first: interactive product prototype, marketing site draft, or production feature. Pick the tool path that matches.
• Connect your real design system before you generate: published libraries, Code Connect mappings and short MCP instructions for props and accessibility.
• Prefer starting from existing frames or a connected GitHub repo over a blank prompt when the product already has code.
• Keep several code-layer or branch explorations on one canvas so the team can compare behaviour, not only screenshots.
• Ask the agent for a technical Spec that flags backend, API and accessibility work a developer must review.
• Run automated accessibility checks in the generation loop, then keyboard-test and screen-reader-test the flows that matter.
• Replace hardcoded demo data with live state, real auth and real error handling before any customer sees the page.
• Ship behind a feature flag in small, reviewable pull requests, and keep a person accountable for brand, accessibility and release.

Where CoreCodify fits

AI design to code is finally useful for day-to-day product work: Figma Code Layers and MCP shrink the gap between a file and a working prototype, and component libraries such as Relume give marketing sites a faster on-ramp. None of that removes the production bar. Accessibility research, LegalZoom's review findings and AbilityNet's guidance all say the same thing: generation is cheap; judgement is still scarce.

At CoreCodify we design and build custom websites, web apps and UI/UX systems, including Figma-to-production workflows that reuse your components, pass accessibility checks and ship cleanly. If you want a design-to-code path that ends in a real website rather than a demo, hire me for custom work at usamify.com.