Bring style context from a Figma Design library into Figma Make
To create functional prototypes and web apps that look and feel consistent, you can bring style context from an existing Figma library into Figma Make. When you do this, Figma Make will extract styling CSS from that library.
There are two steps to bring the style context from a library into Figma Make:
- Export a library from Figma Design.
- Select the library in a Figma Make file. You can then customize your Figma Make file further by editing the exported styles and adding guidelines to help focus how Figma Make uses the extracted styles.
Step 1: Export a Figma Design library to use as style context in Figma Make
Before you start
Who can use this feature
Available on all paid plans
Requires a Full seat with edit access to the library's source file
In Figma Design, select a library to use as the style context for your Figma Make files. Only people with can edit access to the library can export it to Figma Make. This step only needs to be done once before you and others can start using it in Figma Make.
- In the Figma Design file that contains the library you want to export for Figma Make, select the Assets tab in the left sidebar.
- Click Libraries.
- From the This file section, find your current file and click Publish to open the library publishing modal.
- If you haven’t previously published the library to a team, workspace, or organization, click Publish at the bottom of the modal. Only published libraries can be exported to Figma Make. This process might take a few minutes.
-
Click Export for Make.
The export process might take a few minutes to complete. During this process, Figma is assembling and exporting a CSS file to reference in Figma Make.
- Once the export process is complete, click Go to Figma Make.
After you extract your library and select it in your Figma Make file, head to the code view. From there, open the styles folder and click into globals.css to explore the generated styles. You’ll typically see styles grouped into four categories:Â
- Color palettes
- Typography (font and hierarchy)
- Variables
- Borders and corner radiusÂ
Â
Keep in mind, the extracted CSS is a simplified version of your full library. It won’t capture every design detail. To ensure consistency and clarity, we recommend adding more context and rules in your guidelines.md file.
Figma Make currently doesn't support full extraction of design tokens. Instead, it pulls a subset of your variables and uses them to generate a global CSS file with raw values. This means variable syntax won’t be preserved exactly as defined. Rather than a 1:1 mapping, you’ll get a simplified view of your variables reflected in a single .css file. This helps ensure that generated code aligns with your foundational styles.
If you have additional rules or parameters for variables—especially those related to states—we recommend documenting them in your guidelines.md file to maintain consistency across your system.
You can use one library at a time. If your organization manages your design system across multiple libraries, it’s recommended to select the library that contains your core components and most foundational styles. Although exporting to Figma Make does not extract components themselves, this library will likely reference colors and typography, which will be used as context, within its properties.
No, you only need to export the library to Figma Make one time. Anyone within your organization who has can view access to this library will also be able to use it in their Figma Make files.
Yes. If someone edits a design library and wants to use the updated version in Figma Make, you’ll need to re-export the library. The re-exported library will be updated in Figma Make for future Figma Make files only, and will not retroactively update any Figma Make files that were generated before the update.
Step 2: Reference a library in a Figma Make file
Before you start
Who can use this feature
Available on all paid plans
Requires a Full seat with can view access to the library's source file
With your library’s style context added to Figma Make, you and other people in your team or organization can use it to create styled functional prototypes and web apps. Anyone in the team or organization with can view access to the library can see and use this library within their Figma Make file.
- In a Figma Make file, click Select a Library.
- Choose which library you’d like to use.
Start prompting immediately, or customize how Figma Make uses your library’s styles further by editing the library’s styles or adding guidelines. Once you select a library and start prompting, all generated content in this file will reference those styles.
Tip: Referencing a Figma Design library gives Figma Make style context to use as you explore ideas and generate functional prototypes and web apps. To get even more specific, try:
Edit a library's styles
When a Figma Design library is exported to Figma Make, a CSS file of the library’s properties is automatically created. You can customize the CSS to shape your Figma Make as needed. Changes to the CSS only affect this Figma Make file.
- Click .
- Choose Edit styles to update the CSS properties of this library.
Add guidelines for generating
Guidelines allow you to give Figma Make rules or instructions for how the style context is used. Guidelines only apply to things you make in this file and do not impact any other files that might be referencing this library or the library itself.
- Click .
- Choose Edit guidelines to add guidelines for this Figma Make file.
The guidelines.md file is a free-form text file, so you can add any specific guidelines you want Figma Make to follow.
Tip: The guidelines.md file is available to use with or without a library selected, so you can shape any Figma Make files as needed.
can view access to a library is removed?
If someone had can view access to a library previously, but the access was revoked, they won’t be able to see or use that library within Figma Make anymore. However, any previous Figma Make files they might have made with that library will still be available to them, and the name of library will appear as “Unknown.”
No. Any updates to the CSS styles or guidelines only affect that Figma Make file.
Frequently asked questions
No, a Figma Design library cannot currently be removed after it has been used to prompt in Figma Make.
Once you’ve started generating while referencing a library, it cannot be removed. To use a different library or to stop using a particular library, create a new Figma Make file and start generating.