The Knapsack Plugin for Figma

Overview

The Knapsack plugin for Figma provides an easy way for designers to contribute changes to foundational styles of your design system through a git-managed workflow that engineers already know and trust. This plugin will continue to be updated over time to add enhanced capabilities and support as both Figma and Knapsack platforms continue to evolve.

Installing the Knapsack plugin for Figma

The first step to exporting your color styles from Figma is to install the Knapsack plugin. This plugin allows you to export your color styles with just a few clicks.

Access the plugin directly in Figma's Community or follow the steps below to search and install directly from Figma:

  1. Go to Plugins, then select Manage Plugins.
  2. Click Discover plugins in Figma community.
  3. Search for “Knapsack”.
  4. Click Install for the Knapsack plugin.

Exporting Color Tokens from Figma

If you use Figma to define and manage your design tokens, you can export color styles from Figma and import them to your Knapsack workspace as color tokens.

Warning: Exporting color tokens to a Knapsack workspace replaces all existing color tokens in that workspace. We recommend performing an initial export to a new workspace and then editing those color tokens in Knapsack.

Export your Figma color styles

Note: Following these steps exports only the color styles that have been defined in the active Figma project when running the plugin. Other styles or objects in your project are not exported at this time.

  1. In Figma, open the project containing the color styles you want to export to Knapsack.
  2. Go to Plugins > Knapsack > Config and Export.
  3. If prompted in the pop-up window, sign in to Knapsack. The plugin remembers your credentials for future exports.
  4. Select a Knapsack workspace that will receive the exported color styles.
  5. Click Export Tokens

The plugin immediately generates a new draft URL for you to use and share. This draft URL opens a draft version of your Knapsack workspace with color tokens updated to correspond to the exported Figma color styles. In this draft, any components that are leveraging tokens modified by the export will include the new values, enabling teams to preview the impact of their proposed updates. Draft URLs do not expire, so you can always use them to see a previous version of your workspace.


To push the new color tokens to the latest version of your workspace, propose a change from your draft workspace and follow the defined workflow.