How to Use Make Kits in Figma Make: 2026 Setup Guide

Difficulty: Advanced · Last updated: November 28, 2026 · By Mantlr Editorial

A practical guide to Make kits — how to bring your production design system into Figma Make so generated apps actually match your brand.

Key takeaways

Six things to know about Figma Make kits before you set one up:

1. Make kits bring your production React design system into Figma Make as a reusable package

2. Released March 26, 2026 — still an emerging category most teams haven't adopted yet

3. Three components: npm packages (public or private), Figma library styles and tokens, and written guidelines

4. Require React 18 and Vite compatibility — your design system must meet these technical requirements

5. Available on all paid plans; private package publishing requires Pro or higher

6. Setup takes 2-4 hours for a mature design system but pays back exponentially on every Make file generated afterward

On this page

What are Figma Make kits?
Why Make kits matter for design system fidelity
Make kit requirements and prerequisites
Step 1: Prepare your React design system package
Step 2: Publish your npm package
Step 3: Create a Make kit
Step 4: Add your npm package to the kit
Step 5: Import Figma library styles and tokens
Step 6: Write effective guidelines
Step 7: Publish your Make kit to your team
Common Make kit setup mistakes
Frequently asked questions
Related articles

Figma Make without a Make kit produces apps that look "kind of like" your brand. Generic shadcn-style buttons. Approximate spacing. Colors that almost match. For prototypes thrown together fast, fine. For prototypes you'd actually show stakeholders or test with users, the gap matters.

Make kits close the gap. Released March 26, 2026, Make kits let you bring your production React design system into Figma Make as a reusable package. Once configured, every Make file generated from that kit uses your real components, your real tokens, your real styling. The output isn't approximating your brand — it IS your brand, rendered through your actual codebase.

This guide is the setup walkthrough. It covers the prerequisites, the prep work for your design system package, the npm publishing options, the kit configuration, and the guidelines layer that determines output quality. It's longer than a typical Mantlr article because Make kits setup is genuinely complex — but the payoff for design teams that ship regularly is substantial.

If you're new to Figma Make, read What Is Figma Make? first. If you've used Make a few times and are tired of fighting generic output, this is the article.

Quick wins

1. Before starting, confirm your design system meets Make kit requirements: React 18, Vite-compatible, published or publishable as an npm package.

2. Start with 5-10 highest-traffic components (buttons, inputs, cards, headings). You don't need to migrate everything at once.

3. Write guidelines AFTER configuring your first component, not before. Real component behavior teaches you what guidelines need to cover.

What are Figma Make kits?

A Make kit is a reusable collection of design system assets that Figma Make uses as the source of truth for generating apps. Each kit contains three layers:

Layer 1: npm packages. Your production React design system, published as an npm package. Public packages on the npm registry; private packages on Figma's registry for organizations.

Layer 2: Figma library styles and tokens. Variables and styles imported from your published Figma Design libraries. Make uses these for design tokens (colors, spacing, typography) that don't live in the React code.

Layer 3: Guidelines. Markdown files telling Make how to use your design system. When to apply specific components, which variants to use for which contexts, what anti-patterns to avoid. The guidelines are the highest-leverage layer.

Once a Make kit is configured and published to your team or organization, anyone generating in Make starts from your real design system instead of from scratch. Generated apps look and behave like your real product. Cleanup before review drops dramatically.

This is the single biggest workflow improvement Figma made to Make in 2026. Most teams haven't adopted it yet — partly because the setup requires real engineering work, partly because most teams don't know it exists.

Why Make kits matter for design system fidelity

The honest framing: Figma Make's design system fidelity without a Make kit is the worst of the Figma AI trio. The Figma agent inside Figma Design uses your real components. The MCP server with Cursor or Claude Code generates code using your tokens. Make, without a kit, generates generic styling that approximates your brand.

Three reasons this gap exists:

1. Make doesn't read your Figma library reliably. Even when you attach Figma library context, Make often falls back to generic patterns for component generation. The library tells Make what's available, but Make doesn't always use what's available.

2. Generated code uses Make's internal templates. Without a Make kit, Make has no reference for your real React component API. It generates new components rather than using yours.

3. Tokens get approximated. Spacing values get rounded to common defaults. Colors get approximated to nearby Tailwind colors. The output looks close but isn't exact.

Make kits fix all three. The npm package gives Make your real React components. The Figma library import gives Make your real tokens. The guidelines tell Make when and how to use everything.

For brand-critical work, Make kits aren't optional. For early-stage exploration, you can skip them. For everything in between, the time you invest in setup compounds across every Make file your team ever creates.

Make kit requirements and prerequisites

Before starting, confirm these:

1. Plan eligibility:

Make is available on all plans; Make kits are available on paid plans
Public npm packages work on all paid tiers
Private npm packages require Pro, Organization, or Enterprise plans

2. Technical requirements for your design system:

React 18 (older React versions are not supported)
Vite build compatibility (Make uses Vite as its build system)
Published as an npm package (public or private)
No workspace dependencies (Make's sandbox doesn't have access to your larger codebase)

3. Figma library requirements:

A published Figma Design library with styles, variables, and tokens
Library access for the user creating the Make kit

4. Team alignment:

Buy-in from the team that maintains your design system package (they'll need to do the prep work)
A plan for ongoing maintenance — Make kits need to stay synced with design system updates

If your design system doesn't meet these requirements, the prep work involves more than just creating a Make kit. You'll need to update your design system to React 18, ensure Vite compatibility, and publish to npm if you haven't already. That can be a multi-week project on its own.

Step 1: Prepare your React design system package

The first work is on the design system itself, not in Figma Make. Three things to verify:

React 18 and Vite compatibility

Make uses Vite as its build system. Your package must build with Vite + React 18. Common issues:

Babel plugins: Add them to your plugin-react configuration in vite.config.ts. Don't try to configure Babel separately — Vite's React plugin handles it.
Polyfills: Use @vitejs/plugin-legacy and configure your browser targets explicitly.
Build script: Confirm vite build produces a working dist directory. If your current build pipeline is webpack-based, test the Vite build path before publishing.

Remove workspace dependencies

Your package will run in a sandboxed environment that doesn't have access to your larger codebase. Common workspace dependencies that break Make kits:

Internal utility packages referenced via workspace protocol
Local theme files referenced by relative path
Shared TypeScript types not exported in your package

Remove these dependencies or inline them into your package before publishing. Make's environment can't resolve them.

Confirm exports are clean

Your package's package.json should explicitly declare:

main (CommonJS entry)
module (ES Modules entry)
types (TypeScript declarations)
exports field with proper conditional exports for ESM/CJS

If your package's exports are messy or rely on default fallbacks, Make's bundler will have trouble. Clean exports take an hour to fix and prevent days of debugging.

Step 2: Publish your npm package

You have three publishing options. Pick based on your team's needs:

Option A: Use an existing public npm package

If your design system is already on the public npm registry (e.g., for open-source design systems or systems shared across companies), no publishing work is needed. Just reference the package in your Make kit.

Option B: Publish a new public package

If your design system isn't on npm yet but you're willing to publish it publicly:

Configure your package.json with name, version, description, repository
Build the package: npm run build
Publish: npm publish (you'll need an npm account)

Public packages are the simplest path but expose your design system. For most product teams, this isn't ideal.

Option C: Publish to Figma's private registry

For teams with proprietary design systems:

Set up your private registry access through Figma's organization settings
Configure your package's package.json to publish to the Figma registry (scoped name starting with @yourorg/)
Build and publish to the private registry

Private packages are stored in the same AWS infrastructure as the rest of Figma's service, with the same security and compliance controls. They're not visible to anyone outside your organization.

The private registry option is what most enterprise teams use. The setup takes longer but keeps your design system proprietary.

Step 3: Create a Make kit

Once your package is published, create the Make kit in Figma:

From the Figma file browser, navigate to your team's Make kits section
Click "Create Make kit"
Name the kit (use a clear, team-recognizable name like "Acme Design System v3")
Add a short description explaining what's in the kit and who it's for

A Make kit is a file in your team. It can be edited by admins and approved members. Once published, anyone in the team can use it when generating in Figma Make.

The kit file has three sections:

Packages: Where you'll add your npm package
Library: Where you'll import Figma library styles and tokens
Guidelines: Where you'll write the markdown files

You'll fill each section in the next steps.

Step 4: Add your npm package to the kit

In the Make kit's Packages section:

Click "Add package"
Enter your package name (for public packages: @yourorg/design-system; for private packages: @your-figma-org/design-system)
Specify the version (or use latest for the most recent)
Configure any required dependencies that Make should install alongside

The kit fetches the package from the registry and makes it available to Make files generated from this kit. Make can install additional npm packages on demand (lucide-react for icons, recharts for charts, motion for animation) but your design system stays anchored to the version you specify.

Handling custom configuration

If your npm package needs custom configuration to work — webpack aliases, custom Babel plugins, environment variables — you can configure those in the kit's package settings. Most well-designed React packages work without configuration; complex setups may require additional Vite plugin configuration.

If you're not sure whether your package needs configuration, install it in a fresh Vite + React 18 project locally and confirm it works there before adding it to a Make kit. Local testing surfaces problems faster than testing inside Figma's environment.

Step 5: Import Figma library styles and tokens

In the Make kit's Library section:

Click "Import library"
Select the Figma Design library you want to import
Confirm the import — Make will pull in your styles, variables, and tokens

This step is essential because your React components reference design tokens (colors, spacing, typography) that often live in Figma as variables. The library import gives Make access to those tokens so it can use them correctly when generating code.

Variables imported from the library are available to Make as design tokens. Make uses them when generating CSS, Tailwind classes, or styled-components depending on your design system's approach.

Modes (light/dark, density, brand variants) come with the library import. If your library has mode-aware variables, Make can generate apps that respond to mode changes.

If your design system uses tokens that aren't in Figma libraries (e.g., spacing scales defined only in code), you'll need to document those in the Guidelines layer in Step 6.

Step 6: Write effective guidelines

The Guidelines layer is the highest-leverage piece of your Make kit. It's where you teach Make how to use your design system, not just what's available in it.

Guidelines are markdown files in your kit. When Make generates an app from your kit, it reads the guidelines and applies them as instructions. Well-written guidelines produce on-brand output. Vague or missing guidelines produce generic output even with a great package.

What to include in your guidelines

Cover these areas:

1. Component usage patterns. When to use which variant. "Use <Button variant='primary'> for the main CTA on any page. Never have more than one primary button visible at the same time. Use <Button variant='secondary'> for less prominent actions."

2. Token usage rules. Which tokens apply when. "Use spacing tokens from the space-* scale, never hardcoded pixel values. For section padding use space-lg or larger. For inline element spacing use space-xs to space-md."

3. Component composition patterns. How components combine. "Forms always use <FormField> wrappers around inputs. Don't render <Input> directly outside a <FormField>. Submit buttons go in <FormActions> containers at the end of forms."

4. Anti-patterns. What NOT to do. "Don't combine icon-only buttons and text-labeled buttons in the same row. Don't use the destructive action variant for non-destructive actions. Don't put two primary CTAs in the same section."

5. Content tone and copy guidelines. How copy should sound. "Headlines should be 3-7 words. Avoid exclamation points. Don't use 'we're excited to announce' or 'in today's fast-paced world.' Microcopy is direct and brief."

6. Accessibility requirements. What accessibility patterns to enforce. "All interactive elements must have proper ARIA labels. Color contrast must meet WCAG AA (4.5:1 for body text). Focus indicators must be visible on all interactive elements."

Guidelines format

Make reads markdown files. Use clear hierarchy:

The more concrete and example-driven your guidelines, the better Make follows them.

Iterating on guidelines

Don't try to write perfect guidelines on day one. Start with 5-10 essential rules. Use the kit on a real project. Note where Make's output drifts from your intent. Add guidelines to address each drift. Iterate.

After 2-3 weeks of real use, your guidelines stabilize. They'll cover the patterns Make consistently got wrong before, plus the team-specific conventions worth encoding.

Step 7: Publish your Make kit to your team

Once your kit is set up and tested, publish it to your team or organization:

From the Make kit file, click "Publish"
Choose the scope — team-wide or organization-wide
Optionally, mark the kit as a default kit for the team (admins can enable this)
Notify teammates that the kit is available

Once published, anyone on your team can select this kit when starting a new Make file. Their generated apps will use your design system from the start.

For organizations, admins can approve which Make kits are available and enable specific kits by default. This lets you control which kits get used across the organization.

Versioning your kit

When your design system updates, your Make kit needs to update too. The recommended pattern:

Update the npm package version in your kit's Packages section
Re-import any Figma library changes
Update guidelines if patterns have changed
Re-publish the kit (creates a new version)

Existing Make files don't automatically update when a kit is republished. They stay tied to the kit version they were created from. Users can manually update their Make files to use the newer kit version, but it's not automatic.

For breaking design system changes, consider creating a new Make kit (v4 alongside v3) and letting teams migrate gradually rather than forcing everyone to update at once.

Skip the trial-and-error

Mantlr lists Figma AI ecosystem guides — including Make kits walkthroughs, MCP setup, design system prep, and skill libraries.

Browse Mantlr →

No signup required. Just curated resources.

Common Make kit setup mistakes

After watching teams set up Make kits, five mistakes show up most often:

Mistake 1: Skipping Vite compatibility testing. Teams publish their package to npm without confirming it builds with Vite + React 18. When they add the package to a Make kit, Make can't bundle it. Test the Vite build path locally first.

Mistake 2: Workspace dependencies in published packages. Teams accidentally include workspace dependencies (referenced by workspace:* or relative paths) in their published packages. Make's sandbox can't resolve these. Remove them before publishing.

Mistake 3: Empty or vague guidelines. Teams set up the npm package and library import, then leave the guidelines section empty or write 5 generic sentences. Without specific guidelines, Make falls back to generic patterns. Guidelines are the highest-leverage layer — invest in them.

Mistake 4: Trying to migrate every component at once. Teams attempt to bring their entire design system (60+ components) into a kit in one session. Setup stalls on edge cases. Start with the 5-10 highest-traffic components, ship the kit, iterate.

Mistake 5: No ongoing maintenance plan. Teams set up a kit, publish it, and forget about it. Six months later, the kit references outdated package versions and stale Figma library styles. Set a quarterly maintenance cadence — update versions, refresh imports, revise guidelines.

Get the next article in your inbox

Mantlr publishes one practical, no-fluff article like this every Saturday. Free design resources, evaluation guides, and editorial takes on what's worth using.

Subscribe to Mantlr Editorial →

5,400+ designers and founders. No spam. Unsubscribe anytime.

Frequently asked questions

What are Figma Make kits?

Figma Make kits are reusable collections of design system assets — React npm packages, Figma library styles and tokens, and written guidelines — that teach Figma Make how to generate apps using your real design system. Released March 26, 2026, they're the primary way to get production-grade design system fidelity in Make.

Are Figma Make kits free?

Make kits are available on all paid plans. Public npm packages work on any paid tier. Private packages (stored in Figma's private registry) require Pro, Organization, or Enterprise plans. The Make kits feature itself doesn't cost extra beyond the plan.

Do I need a React design system to use Make kits?

Yes, currently. Make kits support React 18 codebases compatible with Vite. Other frameworks (Vue, Svelte, Angular) aren't supported as of November 2026. Figma has signaled multi-framework support is on the roadmap but no timeline.

Can I use private design system packages in Make kits?

Yes. Figma provides a private npm registry for organizations. Publish your design system there and reference it in your Make kit. Private packages are stored in the same AWS infrastructure as Figma's other Customer Content, with the same security and compliance controls.

How long does Make kit setup take?

For a mature, well-documented design system: 2-4 hours of focused work. For a design system that needs prep (React 18 migration, Vite compatibility fixes, workspace dependency removal): 1-3 days. The payoff scales with how often your team uses Make — heavy users see the time back within a week.

What's the most important part of a Make kit?

The guidelines. The npm package gives Make your components; the library gives Make your tokens. But the guidelines tell Make how to USE them — when to apply which variant, what patterns to avoid, what your team's conventions are. Vague guidelines produce generic output even with a perfect package.

Can I update my Make kit when my design system changes?

Yes. Update the npm package version, re-import any Figma library changes, revise guidelines, and re-publish. Existing Make files stay tied to the kit version they were created from — users can manually update their files to newer kit versions.

What's the difference between Make kits and Make attachments?

Make kits are reusable design system collections, shared team-wide. Make attachments are file-specific context (reference designs, brand assets, example apps) attached to individual Make files. Kits set up the design system foundation; attachments add project-specific context.

Does setting up a Make kit guarantee on-brand output?

No. A good Make kit dramatically improves output quality, but guarantees nothing. Generated apps still need review for accessibility, edge cases, copy tone, and product judgment. Make kits raise the floor — they don't eliminate the need for designer oversight.

Where can I find more Figma Make tutorials?

Mantlr publishes Figma Make guides, comparison articles, and design system integration walkthroughs weekly. Browse at mantlr.com or subscribe to Mantlr Editorial.

Build with Mantlr's curated library

You've set up your Make kit. Now your team's Make files start from real components. The next step is using them well.

Mantlr lists 521 designer-vetted free design resources across 43 categories — every one license-verified, production-tested, free of email walls.

Browse Mantlr → · Subscribe to weekly editorial →

If you're integrating your design system with Figma Make, these articles cover the connected workflow:

What Is Figma Make? — The foundational article on Make.
How to Use Figma Make — Full workflow walkthrough.
How to Prepare Your Design System for AI Agents — Broader design system prep that applies across the Figma AI ecosystem.
How to Write Better Figma Make Prompts — Prompt engineering that works with your Make kit configured.
The Complete Guide to Free Design Resources and AI Tools in 2026 — Mantlr's pillar guide to the full resource library.

About Mantlr Editorial

Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.

This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.

Last updated: November 28, 2026. Article reviewed quarterly for accuracy.

How to Use Make Kits in Figma Make (Design System Integration Guide)