Use your design system package in Figma Make

You can bring your production-ready React design system into Figma Make to build high-fidelity prototypes that use the exact same code as your production apps. This lets you prototype, test, and ship using one consistent source of truth.

Why use a design system package

Many mature product teams already have a design system implemented in their codebase. By adding that system to Figma Make, you can:

• Use your fully interactive, production-ready components directly in prototypes
• Keep design and engineering in sync by using the same design system implementation in both Figma Make and production
• Deploy your Figma Make to production, using your production design system, using the Figma MCP Server

Code packages available for Figma Make 

Figma Make currently only supports codebases that are written in React. Here are three of the most common approaches to using design system packages in Figma Make:

• Use a npm package currently on the npm registry: The npm public registry is a collection of software packages that helps users install various tools and codebases into their applications. Figma Make now supports design systems that have packages published on the npm registry.
• Publish your own public package on the registry: Similarly, you can choose to publish your design system code as a publicly-available npm package.
• Use your private code package: Figma provides organizations a private registry for publishing npm packages. This allows you to restrict access of your design system to users in your organization.

Bringing your package design system to Figma Make

There are a few steps required to bring your design system package to Figma Make. The team that builds and manages your design system package is best placed to help with these steps. Your developers need to publish your package and configure Figma Make to use it. For private packages, an organization admin must help the first time you publish to the organization’s private npm registry. For more information, see our developer documentation.

Teach Make how to use your design system

Figma Make’s AI chat can read the structure and contents of the files in your design system package. To optimize how Figma Make understands the content of your design system package, you should also give Figma Make additional guidance. To improve how Figma Make interprets and applies your design system:

• Add markdown files to the guidelines directory in your Figma Make file.
  • Use this file to describe how Make should select components or variations.
  • For example, when to use <Button> vs. <IconButton>.
• Optionally, publish a new version of your package with guidelines.md files.
  • This can help you provide more contextual or component-specific guidance—such as required props, default variants, or layout tips.

Make uses these guidelines to automatically surface the right components during prototyping and to configure them correctly in your app.

Create a Make template

Once your Make file is configured to use your package design system, you can make it easier for others in your organization to get started by publishing your file as a Figma Make template.

You can publish a template that only contains the build configuration, or you can prompt Make to create a starter version of the app in which other people in your organization will be prototyping new features. If you do this, it’s easier for those people to prototype their new features on top of the “baseline” template that you’ve created.