Editing and Managing Color Tokens

Introduction to Design Tokens

Design tokens are atomic design properties - a color, font, border radius, or some combination of these sorts of properties - expressed as a source variable that can be combined, translated and consumed across an entire digital ecosystem.

Adding design tokens to your Knapsack workspace can help your team define, document, and distribute color, typography, and other core styling properties to your design system users. 

Design tokens can be added to Knapsack via a local development workflow. To kick off the workflow, consider connecting your Figma artboards to Knapsack to share your starting point with developers.

Note: To make these changes to your workspace, you must be logged in and have either Admin or Editor permissions.

Overview of Knapsack Design Token Features

Managing Design Tokens via the Knapsack Cloud UI

Knapsack's cloud UI enables Editors and Admins to make changes to the source design tokens (by way of the git-backed contribution workflow).

Available Edit Actions

When working in Edit mode, users have the following actions available:

• Edit token value
• Add metadata
• Delete token

Editing Color Token Values

There are two methods available for defining the value of a token:

Enter or select a specific color value

Select another color token to reference

Tokens that are set to reference other tokens will indicate this in the UI once changes are saved: