Figma ties AI to code
Figma is pushing AI-generated design to sit closer to real code and design-system rules through updates like “Make Kits” and “Attachments,” which bind generated assets to components and documentation. Practitioners say that when AI is constrained by tokens, npm-linked code and Markdown-based rules it becomes more useful and less likely to produce non-compliant interfaces (aiposthub.com) (blog.stackfindover.com).
Most artificial intelligence design tools can draw a screen that looks polished, but they usually miss the hidden rules a product team actually ships with, like approved buttons, spacing tokens, and real data fields. Figma’s April 2, 2026 update tries to fix that by feeding its generator the same components, files, and constraints teams already use in production. (figma.com) Figma calls the generator Figma Make, and it turns text prompts into interactive prototypes inside Figma. The new pieces are called Make kits and Make attachments, and Figma says they let a prototype start from “real components, data, and constraints” instead of generic mockups. (figma.com) A Make kit is basically a house style guide plus a parts bin. Figma’s help docs say teams can publish private kits on paid plans so Make reuses their own components, variables, and patterns when it generates new screens. (help.figma.com) The code link is the bigger shift. Figma says Make kits can connect to a production React package, so a prototype can use the exact same design system package that ships in the live app instead of a lookalike copy. (help.figma.com) An attachment is the rulebook you hand the model before it starts drawing. Figma says teams can attach files like product requirements documents, Markdown docs, images, spreadsheets, and PDFs so the prompt has project-specific context instead of guessing from one sentence. (figma.com) That matters because most bad artificial intelligence interface output fails in boring ways, not dramatic ones. It invents a date format your company never uses, creates a button state engineering never built, or writes fake dashboard data that makes usability testing less useful. (figma.com) (techlusion.io) Figma has been building toward this for a year through its Model Context Protocol server, which is a connector that lets coding agents read design details directly from Figma. Figma announced that server in June 2025 and said it gives large language models design-informed context for code generation. (figma.com) The company’s developer docs now say the Model Context Protocol server can expose components, variables, and layout data to agents, and can also write native Figma content back to the canvas. That turns the design file from a picture into structured input a coding tool can actually use. (developers.figma.com) (help.figma.com) Figma’s own pitch is that design systems work for artificial intelligence for the same reason they work for people: they give everyone the same vocabulary. In an August 2025 post, Figma said documentation, shared patterns, and code links are the ingredients that help agents produce “the right output” instead of just any output. (figma.com) There is still a limit here: Figma Make is generating prototypes, not shipping software by itself. But the gap between “draw me an app” and “build me the version engineering can actually implement” gets smaller when the model is boxed in by your tokens, your React package, and your product docs instead of a blank canvas. (figma.com) (help.figma.com)
