Announcements

Meet Knapsack's new Figma integration

Knapsack's new Figma integration turns your color styles to design tokens—in code. Learn how our plugin will make designer-dev collaboration easy.

We're one step closer to smooth, simple designer-dev collaboration. Our Figma integration allows you to import your Figma color styles into Knapsack as design tokens in code, making it easy to integrate design tokens into your design system and share them with collaborators.

To get 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"

Want to try it out? Download an example Figma file for additional guidance on how to set up your Figma library here.

Read more about the integration on Figma's website.