News · Figma's code layers and MCP server turn design mocks into a handoff artifact
Figma's code layers and MCP server turn design mocks into a handoff artifact
David Kossnick describes how Figma pushes AI past the visual layer into editable code, and what that means for the designer-developer boundary.
What Figma actually shipped for the code path
Kossnick names three distinct pieces rather than one vague AI feature. Figma Make is a prompt-to-app tool that generates what he calls production-grade code from language, images, or structured frames. Dev Mode handles handoff with structured data like CSS and tokens. The Dev Mode MCP Server sits on top, letting developers invoke a coding agent that translates mocks into production-ready code with full context.
The through-line is that AI output stays editable. Kossnick describes a code composer and "code layers" that let users write and publish AI-assisted code natively inside the file. This is the load-bearing distinction he draws against other tools: agents get you far, but many products lock customization after generation. Figma's pitch is that you can still open the code layer and change it.
The prototype-to-production leak
The most consequential detail is almost buried. Figma Make is, by Kossnick's own framing, built primarily for prototyping. But he says designers can prompt interactions so precisely that engineers copy the code directly.
Even though Make is built primarily for prototyping, designers can often prompt interactions so precisely that engineers copy the code directly—making it start to become a handoff artifact for engineering.Montana Labs
That is a meaningful shift in where the design-engineering boundary sits. Historically the handoff artifact was a spec: mocks, redlines, tokens that an engineer re-implemented. If prototype code becomes the thing engineers ship, the question of who owns code quality, accessibility, and maintainability moves upstream into a tool that was scoped for exploration. Kossnick presents this as a win; frontend teams should read it as a policy decision they now have to make.
The Workday game and the internal-tools question
The single most concrete example in the interview is an HR team member with no coding or design background who found a Workday API and, in about two hours with Figma Make, built a name-and-face matching game now used in onboarding. Kossnick is explicit that no internal-tools team would have prioritized this.
That is the real product claim: not that AI writes better code, but that it lowers the cost of trying an idea enough that ideas which never cleared a prioritization bar now get built. The upfront cost of prototyping was the filter, and removing it changes which tools exist. For frontend organizations, this cuts both ways—useful throwaway tools proliferate, but so does the volume of unreviewed, semi-deployed software living outside the normal engineering pipeline.
How OpenAI actually sits inside Figma
Stripped of the interview framing, the technical relationship is narrow and specific. Figma uses OpenAI APIs to power FigJam AI and its platform image generation. Separately, Figma deployed ChatGPT Enterprise internally for its own workforce. The FigJam anniversary cards where teammates remix avatars use OpenAI's image editing.
This is worth stating plainly because the piece blends product integration with internal culture-building. Figma Make, Dev Mode, and the MCP server are Figma's own workflow surfaces; the OpenAI dependency shows up in image generation and text features, not as the engine behind the code-generation story. The specific implication: a frontend team evaluating this stack is really evaluating two separate bets—Figma's editable-code layer as a handoff mechanism, and image and text generation running through a third-party API—and should not assume they carry the same reliability or governance profile.
Find this story relevant to you?
Contact us to find a unique solution
Precisa de um parceiro de engenharia de IA que consiga construir de verdade?
Ajudamos empresas no Brasil a integrar IA, acelerar produtos com IA, automatizar operações e modernizar os sistemas de software por trás do negócio.
Leituras relacionadas
Mais análises sobre entrega de produto, IA operacional e o trabalho de sistemas que faz a implantação se sustentar na prática.