Knapsack has two exciting new features that will help you manage tokens easily, efficiently, and collaboratively.
Have you checked out our Design System Insights report on design tokens? Read it here.
- Web-based design token editing: Non-engineers can now edit and manage color design tokens that compile out to the real code used by engineers within Knapsack's UI. Designers can click on a Color Swatch’s edit button to change the color value (HEX, HSLA, and RGBA formats supported), point to an existing color already in the design system (token reference), or create a new value using an existing token as a starting point. If any other tokens already point to the color being updated, those colors will also update automatically to reflect any changes made. Once they are done, they can click on the Propose Change button to automatically generate a GitHub pull request reflecting the visual changes made in code. When the pull request has been reviewed and released (ex. via published NPM package), engineers downstream can use the updated design system tokens in their website or application code.
- Cross-platform design token transforms. We replaced Style Dictionary with our own design token build tool, which greatly improves how different platforms (web, iOS, & Android) are able to use the colors and other design token values. Color tokens now no longer need to start with the word “color” in order to be correctly transformed into the different platforms code: the limitation that motivated us to move beyond Style Dictionary.
Want to learn more about tokens? Check out our podcast episode on tokens featuring Matthew Ström!
