Figma: Make Kits — Design System Context for AI Prototypes
FigmaFigma introduced Make kits, a new feature that lets design system teams package their components, styles, variables, and tokens into reusable kits that teach Figma Make how to properly use an organization's design system when generating AI prototypes. Design system authors can import code components via npm packages (public or private to a Figma organization) alongside Figma library styles and tokens, then publish these kits organization-wide. The result is that AI-generated prototypes start from production-aligned components rather than generic placeholders, closing the gap between AI output and real codebases. Make kits began rolling out to all paid plans on March 26, 2026.
Key Takeaways
- Make kits bridge the design-code gap by allowing AI-generated prototypes to start from actual production components rather than generic placeholders.
- Three content types are supported in a kit: npm packages (public or private), Figma library styles/variables/tokens, and written usage guidelines.
- Private npm registries are supported, meaning organizations with proprietary component libraries can bring those packages into Make without exposing them publicly.
- Guidelines are a critical layer — they teach Make not just what components exist, but the contextual rules for when and how to use them, capturing institutional design knowledge.
- Kits are organization-wide, so once published by a design system team, every user in the org benefits automatically when generating in Make.
- Rollout began March 26, 2026 for all paid plans, making this broadly accessible to professional Figma users now.
Sources & Mentions
3 external resources covering this update
Make Kits: Teaching Figma Make Your Design System
On April 2, 2026, Figma launched Make kits — a capability that fundamentally changes how Figma Make interacts with an organization's design system. Previously, AI-generated prototypes in Make were built from generic components that often had little relationship to the team's actual production code. Make kits solve this by letting design system teams embed their system's intelligence directly into Make.
What Are Make Kits?
Make kits give design system teams a way to bring together code with design system guidelines, teaching Make how to properly use a specific design system inside new prototypes. Each kit is a curated package that can contain three types of content:
- Code components via npm packages — from either the public npm registry or a private registry published within a Figma organization, allowing teams to bring in production-ready React (or other framework) components
- Figma library styles, variables, and tokens — the design language itself, including colors, typography, spacing, and semantic design tokens
- Guidelines — written instructions that tell Make not just what components and styles exist, but how they should be used
Once a kit is built and published, every user in the Figma organization has access to it when working in Make.
How Make Kits Work in Practice
When a design system author sets up a Make kit, they follow a step-by-step process inside Make to configure which packages and libraries to include, write guidelines, and then publish the kit organization-wide. When a designer subsequently uses Make to generate a prototype, they can select the kit, and Make will ground its output in those production components rather than producing placeholder UI.
The practical impact is significant: a team that has spent months building a React component library can now bring that exact library into Make. Structures match the codebase from the start, meaning the resulting prototype is not just visually representative — it is structurally aligned with what engineers would ship.
Private Registries and Design Tokens
One notable capability is support for private npm packages published within a Figma organization. This means proprietary component libraries — the kind that power enterprise design systems — can be used in Make without being exposed to the public npm registry. Combined with Figma library variables and tokens, Make kits create a complete picture of a design system: both the structural components and the visual language.
Availability
Make kits began gradually rolling out to everyone on paid Figma plans starting March 26, 2026, with the official announcement made on April 2, 2026.