paranoidaandroid42 / generate-design-token

Parsing design token

Design Token Generator

• General Info
• Terminology
• Design Token Rule
• Design Token Types
• Design Token Schema
• Technologies
• Setup

General Info

This project is a token-style generator and works in synch with Figma token plugin output. In general, it allows to quickly generate tokens style of Figma token's output

Terminology

Design Token

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design

Semantic Token

Token aliases let you relate a semantic token to a base token for a specific context or to get a level of abstraction. It helps you communicate the intended purpose of a token independent of the actual/primitive value of the token. For more info : link

Design Token Types

The following types of design tokens are the building blocks and design decisions that make up the potato17 design system

Primitive tokens:

• Primitives.json will change only game by game
• These tokens don’t use reference value(semantic value). That means they use basic values and not point another design token.
• Example token of primitive.json:
  
• Example generated token as css var from primitive.json:
  

Decision tokens: (Themes token)

• These tokens need to reference from primitives tokens.
• They can use basic tokens, they need to point another design token.
• They are creatable multiple times (in each theme-x.json)
• Example token of themes-{name}.json:
• Example generated token as css var from themes-{name} json:

Design Token Rule

Creating for token's JSON, follow CTI structure rule. The current token rule:

SENTIMENT:

Sentiment naming related to variations and variants can be extendable.

Example sentiments:

• Success (Green tones)
• Warning (Yellow tones)
• Danger (Red tones)
• Primary
• Secondary
• Tertiary
• Neutral
• Premium

USAGE: Usage naming related to where you wanna use that token.

Example uesages:

• Brand/Background
• Text
• Icon
• Border
• Surface

PROMINENCE: Prominence naming related to emphasis and prominence can be extendable.

Example prominences: (extendable in time):

• Strong/Dark
• Week/Light
• Default

INTERACTION:

Interaction naming related to what actions can be taken by that user.

Example interactions:

• Default
• Hovered
• Disabled
• Focused
• Pressed

STATE: State naming related to what situations it might be and states can be extendable.

Example states: (extendable in time):

• Select
• Default

Example for design token rule:

Design Token Schema

Use the that basic flowchart when determining the type of token

Technologies

Project is created with:

• Style Dictionary using to generate token according to cti structure
• Figma Tokens using to extract token on figma
• Figma using to keep our tokens in documents and use plugins to extract/create assets/tokens.

Setup

To test without github action:

$ pnpm install
$ pnpm run build

And see outputs in styles/ and src/tokens/

Sources

Terminology: https://spectrum.adobe.com/page/design-tokens/
The design system is inspired by Michael Mangialardi's article (https://www.michaelmang.dev/blog/introduction-to-design-tokens)
Cristiano Rastelli's article https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa
And see more detail for CTI structure: https://amzn.github.io/style-dictionary/#/tokens