Bring your design system package to Figma Make

note

Who can use this feature

Figma Make is available for Full seats on paid plans.

• Any Figma Make user in any plan can use design system packages available on the public npm registry.
• Any Figma Make user in a paid plan can publish private design system packages and use them in Figma Make.

Users with Full seats can publish and use Make templates. Other seats on paid plans can use templates when trying Make in their drafts.

To enable Figma Make to generate apps and prototypes that better match your brand, you can package your production-ready React design system and import the package in Figma Make. For more information about the advantages of creating and using design system packages, see our Help Center.

The following steps describe how to publish, test, and make available your design system package in Figma Make. Teammates can start using your design system package as soon as the package is published, but you can make it easier for teammates to use by completing steps 2 and 3. Before you complete these steps, you should review the requirements.

1. Publish your package
2. To teach Figma Make about your design system, add guidelines for how your package should be used
3. Create one or more templates that implement your package

Requirements

A design system package must meet these requirements to be used in Figma Make:

• React 18+
• Can be used in a project built with Vite
• Published as an npm package:
  • Public package: If your design system can be provided as a public package, it’s published to the npm public registry
  • Private package: If it’s a private package, your organization is comfortable with you publishing your code to a Figma-maintained npm registry that’s private to your organization.

note

Note: Packages published to your organization’s private registry are Customer Content and are covered by your agreement with Figma.

Vite

Figma Make uses Vite as its build system. To ensure your package can be used in Figma Make:

• Confirm your package’s build output works with Vite and React 18+
• If needed, configure Vite plugins in your vite.config.ts. Common plugins and configurations include:
  • Babel plugins: If you use babel plugins, enter them in the plugin-react configuration. See the Vite documentation for an example.
  • Polyfills: If your design system has polyfills for older browsers, use @vitejs/plugin-legacy and configure the targets you need. See the Vite documentation for an example.

Testing your package with Vite

To test that the output of your design system package builds with Vite, create an empty Vite project locally:

npm create vite@latest make-setup-app -- --template react-ts

Follow the steps to publish and install your design system packages, and then copy the appropriate lines from the package.json and vite.config.ts in your local Vite project to the corresponding files in your Figma Make file.

If your package doesn’t work with Vite in Figma Make, errors will appear in the developer console.

note

Note: If you have issues and need to reach out to support, we can more easily troubleshoot if you include an archive of this local Vite project with your support request.

1. Publish your package

To use your design system package in Figma Make, you need to publish the package either publicly or privately (organization and enterprise plans only). Figma Make can only import published packages.

Publish a public package

If you want to share your design system publicly, publish it to the public npm registry.

Publish a private package

If your design system is private to your organization, publish it to the private npm registry for your Figma team or organization. Any packages you publish to your organization’s private registry are available to any Figma Make file in your organization (but not to any Figma Make files outside your organization).

Packages published to your organization’s private registry are Customer Content and are covered by your agreement with Figma.

To publish a private package:

1. Open an existing Figma Make file or create a new one.

2. In the upper-right corner of Figma Make, click ⚙️ Make settings, and then click Figma npm registry.

3. Click Get started.

4. Enter the scope your organization uses for private npm packages. For example, @exampleco.

5. Click Generate key. This step must be completed by a Figma organization admin.

6. Paste the code snippet into your .npmrc file. Make sure to copy the snippet as it won’t be visible again.

7. Run npm publish for each package you want to add to the private registry.

8. In Figma Make, next to the packages you’ve published, click Install to add the packages to the package.json file in your Figma Make file.

Once installed, you should test the package to ensure it works with Vite, the build tool used by Figma Make.

2. 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.

Each Figma Make file contains a guidelines directory. Add markdown files to the guidelines directory in your Figma Make file. Use these files to describe how Make should select components or variations. For example, when to use <Button> vs. <IconButton>.

Figma Make uses these guidelines to automatically surface the right components while prompting and prototyping, and to configure the components so they render correctly in your app.

For more information, see Add guidelines for your design system packages in our Help Center.

3. Create a Make template

Once your design system packages are installed in a Figma Make file, you can make it easier for teammates in your organization to get started by publishing your file as a Figma Make template.

Here are some ways to use templates to enable your teammates:

• Publish a template that only contains the installed packages and guidelines. This lets your teammates generate new apps or prototypes that automatically use your design system components in a way that respects your guidelines.
• Prompt Figma Make to create a starter version of the app your teammates can use to prototype new features. This lets your teammates iterate on the starter app, which is useful for ensuring people are prototyping from the same initial state of the app.

What’s next?

When the previous steps are completed, you can share the templates you’ve created with your teammates. You can also inform your teammates they’re able to install the packages in files they create.

As you continue to iterate on your packages, you can publish the new changes by running npm publish. If the package.json file in your Figma Make file is configured to use the latest version of your package, then the changes will be reflected the next time the Figma Make file is built.