Knapsack Figma Plugin

Import your Figma color styles into Knapsack as design tokens—in code.

What is Knapsack?

Design once, build once, use everywhere. Knapsack makes your design and code work together so you can, too.

Why Connect Figma with Knapsack?

With our Figma integration, you’re able to import your Figma color styles into Knapsack as design tokens—in code. This makes it easy to integrate design tokens with your design system and share with collaborators.

Getting started:

1. Create your Figma library and color styles
2. Install the Knapsack plugin
3. Sign into Knapsack within the plugin screen and select your Knapsack workspace URL
4. Select “Export Tokens”
5. When you see confirmation of the Export, click the URL to check out your design tokens in Knapsack on the Color token page.
6. To submit the color tokens for approval in Knapsack, open the gear menu in the bottom left of the page and submit a “Propose Change”

Download an example Figma file for additional guidance on how to set up your Figma library here.