Last week, prototypes in Figma and the components in your codebase were parallel universes that sort of looked alike if you squinted. That changed on Wednesday when Figma started rolling out Make Kits to paid plans.
What Make Kits Actually Are
A Make Kit is a package you assemble inside Figma that bundles three things together: your React component library (via npm), your Figma library's variables and styles, and a set of written guidelines that tell Figma Make how to use all of it. When someone on your team asks Make to generate a prototype, it doesn't reach for generic UI primitives — it imports your actual <Button variant="primary"> and your real spacing tokens.
There are three ways to connect your code. You can point to any public package on the npm registry. You can use Figma's private organization registry if you don't want your component library exposed publicly. Or you can publish to npm privately through your org's existing setup. Figma resolves the package, reads its exports, and makes every component available to Make's generation engine.
The result is a prototype that runs your production React, styled with your production tokens. Not a screenshot. Not a hand-drawn approximation with Auto Layout that sort of matches. The real thing.
Guidelines: Prompts for Your Design System
The component library gets you accurate rendering. The guidelines file is what gets you accurate usage.
Guidelines are markdown documents you write (or let Figma auto-generate as a starting point) that teach Make when and how to apply your components. Think of them as constraints that shape how the AI assembles your UI. A fragment might look something like this:
## Button
Use `variant="primary"` for the single main action on a page.
Never place two primary buttons in the same view.
For destructive actions, use `variant="danger"` — not a red primary.
### Spacing
Buttons in a row use `gap: var(--space-3)`.
A button group at the bottom of a modal uses `pt: var(--space-5)`.This is where design system teams will spend most of their time, and honestly, it's the most interesting part of the whole feature. You're not documenting your system for humans to read on a Storybook page — you're writing constraints that a model will follow during generation. The clarity bar is different. Ambiguity that a junior engineer would figure out from context will trip Make up entirely.
Figma offers auto-generated guidelines as a starting point when you import your package. They're passable for basic component usage, but they won't capture things like "we never use this pattern on mobile viewports" or "this component only appears inside a card container." The hand-tuned layer is where the real brand fidelity comes in.
React Only, For Now
One hard limitation: Make Kits only support React codebases today. If your design system ships Vue, Svelte, or Web Components, you're watching from the sidelines. No announced timeline for other frameworks.
Wiring It Up
Getting a basic kit running is straightforward if your design system is already on npm. In your Figma organization settings, you create a new Make Kit and connect your package:
Package: @yourorg/design-system
Version: ^4.2.0
Registry: npm (or Figma private registry)Then you link your Figma library — the one your designers already use — so that Make can cross-reference variables and styles with their code equivalents. If you've already set up Code Connect, this is where it pays dividends. The mapping between Figma components and React components flows through automatically.
After that, you write or generate your guidelines, test the kit by asking Make to build a few screens, and iterate until the output matches your standards. The feedback loop is tight: tweak a guideline, regenerate, compare the difference immediately.
The Handoff Just Flipped Direction
For years, design-to-engineering looked like this: designer creates a mockup, writes specs, hands it off, engineer rebuilds it in code. Shared component vocabularies shortened the loop, but the gap between "what it looks like in Figma" and "what it looks like in the browser" never fully closed.
Make Kits reverse the flow. Engineers publish their components. The guidelines document how they should be composed. Designers generate prototypes that are already running production code — minus business logic and data wiring.
This matters less for pixel-level fidelity — most mature design systems already achieve that — and more for behavioral fidelity. Hover states, transitions, responsive breakpoints, keyboard focus order. Things that static mockups can't capture but that your React components already handle. A Make Kit prototype inherits all of that for free.
The design system team's role shifts too. Maintaining the guidelines file becomes a first-class responsibility alongside the component library and the Figma library. Three artifacts to keep in sync instead of two. Whether that's a net win depends on how much rework your team currently burns translating prototypes to production. For most teams I've talked to, the answer is "a lot."
What I'm Watching
The auto-generated guidelines need to get smarter. Right now they describe what each component does but not when to reach for it versus alternatives. That contextual knowledge — the tribal wisdom baked into every mature design system — is still something a human has to write by hand.
And the React-only constraint is a real ceiling. Design system teams shipping multiple framework targets can't fully consolidate around Make Kits yet. If Figma adds Web Component support, the equation changes overnight for everyone running Lit or Stencil under the hood.
But even with those caveats, this is the most consequential Figma feature for design system teams since Variables shipped. Your npm package isn't just for engineers anymore.