Get started with Make kits

What are Make kits?

Make kits allow your team to jump straight into building designs and prototypes in Make that are realistic to how your product looks and functions without having to add code and style context from scratch.

Make kits can include:

• npm packages for code context
• Variables and styles from your Figma Design library
• Guidelines to help Figma Make understand how to use your system's assets

Once you've assembled a Make kit, you can publish it to your team or organization so that your teammates can use it their Figma Make projects to start building faster. 

Create and publish a Make kit

In a Make kit, you can add npm packages to provide context on which assets—like components, styles, and tokens—to use, import variables and styles from your design library, and write guidelines to provide context on how the assets should use style context and behave.

Step 1: Start a new kit

Open a new Make file. Click Settings in the top-right corner of the window and select Create a kit. From the pop-up modal, choose a starting point:

• Assemble your kit: Use existing npm packages and style context from your design libraries.
• Start from scratch: Build components and assets from scratch with Make. 

Step 2: Add npm packages and/or library styles

If you chose Assemble your kit as your starting point, then a modal will appear for you to import npm packages, public packages, and library styles to the kit.

If you choose Start from scratch as your starting point, you can prompt Make to build components for the kit. You can also click Add items to your kit to find packages and library styles to add.

Step 3: Add custom configurations (optional)

If your npm package needs any custom configuration, such as requirements needed for Make to use your code packages, you can prompt Make to add those for you.

Step 4: Add guidelines

Guidelines are essential for getting accurate, on-brand results from your Make kit. They teach Make how to properly use your components, when to apply specific variants, or how to follow your design system's rules.

When you start a Make kit, a guidelines folder is created in the file explorer with at least one markdown file (.md) for you to add information on how Figma Make should consume the kit. This helps Make create an app that better meets your needs and expectations. This includes instructions for how you want Figma Make to behave in terms of coding and personality, and how to use things like style context.

There are two ways to add guidelines to a Make kit: Ask Make to generate guidelines or write your own.

Generate guidelines

Prompt Figma Make to analyze your npm packages and write comprehensive guidelines for you. Make will create multiple markdown files covering components, styles, tokens, and general design system rules. You can review what Make generated from the guideline files, and refine them with specific use cases and edge cases. 

This option uses AI credits.

Add your own guidelines

In your Make file, find the guidelines folder from the file explorer. Using the markdown files, provide specific guidance, such as how to use a component and what variants to apply depending on the usage.

You can add additional guidelines folders and files by right-clicking the guidelines folder and choosing Create file or Create folder.

Learn how to write design system guidelines for Figma Make.

Step 5: Test your kit

Testing your kit is a good way to see that the kit is working as intended and see if any adjustments are needed to npm configurations, assets, or guidelines. To test the kit, prompt Make to build something and look for anything that appear to deviate from your design system.

Step 6: Publish your Make kit

Once you’re done assembling your Make kit, you can publish it to your organization so your teammates can use it in their Make projects.

1. Click Publish kit in the top right corner.
2. A Make kit cannot be published if it lives in your drafts folder. If this the kit is in your drafts, you’ll be prompted to move it to a project in the organization.
3. Give your Make kit a name and thumbnail so that it’s easily identifiable.
4. Configure your package.
   • Choose whether to use default or custom package.json and vite.config.ts settings.
   • Update any advanced settings: npm package name or library, scope, version number. If you’d like to use the Make kit in a production setting as well as in Figma Make and your team has formal standards around how npm packages are named and organized, you can customize the scope in the package name to (@scope/package-name) to match your team’s requirements.
5. Click Publish.

Update a Make kit

Edit items in kit

With the Make kit file open, you can click Edit items in kit from the file explorer to:

• Update the npm package to a different version
• Configure the kit to use different npm packages or style libraries

Publish an update

When changes to a Make kit are republished, files using the Make kit will receive those updates and your teammates receive a notification next time they open the file. This is helpful when, for example, the version of an npm package is updated.

To publish updates to a Make kit:

1. Open the Make kit file and make any edits and changes as needed.
2. Click Update kit in the top-right corner.
3. From the modal click Update kit and review the kit’s details.
4. Click Publish.

Unpublish a Make kit

To unpublish a Make kit:

1. Open the Make kit file and click Update kit in the top-right corner.
2. From the modal, click Unpublish and follow the prompt.

Use a Make kit

1. Open a new or existing Make file.
2. From the prompter, and click Select a Make kit.
3. Choose from a list of Make kits in the list. You can add more than one kit if desired.

Now, when you prompt Make, it will build out your designs and prototypes using the Make kits you added.

Make kits vs Make templates

Make kits and Make templates are similar in that they both contain predefined elements that are published and shared with teammates, so they can begin building in Make without having to start from scratch. So, what makes them different?

Make kits are a collection of tools and building blocks that are often used in an earlier phase of the design process. For example, let’s say you are using Make to explore a new doodling experience for an arts and crafts app for kids. Having a ready-to-use Make kit means you already have style context, code context, and guidelines to use without having to add them manually. The kit has already been assembled with the proper context, tested, and vetted so you can focus on building and exploring your idea. 

Make templates work great if you want to build off of a specific design, idea, or problem. This could be a user dashboard refresh, a checkout screen that you’re stuck on, or rebranded homepage idea for a website.  Building a template often includes using an existing Make kit. Continuing on the previous example of the new doodling experience, you already started out your explorations using a Make kit, and now you're ready to gather feedback and ideas. You publish what you built so far as a Make template—which will contain the Make kit you used as well as designs and interactions you’ve added—and publish it for your team to use as a jumping off point to begin iterating.