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.

April 22, 2021
Shayna Hodkin

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.

Watch Demo (5 Min)Contact Sales

Make sure you're subscribed to our emails, so you don't miss an invite.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Get started

See how Knapsack helps you reach your design system goals.

Get started

See how Knapsack makes design system management easy.