design-token-builder v1.0.3

Design token builder

Build all of your design tokens for multiple platforms at once with just a single source of truth.

Setup

Instal

Instal package using:

npm instal design-token-builder

Design tokens use ES6 Modules. Make sure you add "type": "module", to your package.json file, or use the '.mjs' extension for your build script.

Create directories

Create a source directory for your tokens tokens. This directory should containt the following sub directories.

├── source/
│   ├── modes/
│       ├── light
│           ├── colors.yml
│           ├── sizes.yml
│       ├── dark
│           ├── colors.yml
│           ├── sizes.yml
│   ├── global/
│       ├── colors.yml
│       ├── sizes.yml

The 'global' folder contains the files with the global design tokens. Global tokens use primitive values and no references.

The mode directory should contain directories that refelect every mode you want to build tokens for. For example a dark and a light folder. These folders should contain Alias tokens only. Alias relate to a specific context or abstraction, and refer to a global token.

Create configuration file

Create configuration object including, build path, source path, available modes (like "dark" or "light"), filename (used for all files) and platforms.

const configuration = {
  buildpath: "./build/",
  sourcepath: "./source/",
  modes: ["dark", "default"],
  filename: "tokens",
  platforms: ["markdown", "figma", "sketch", "react", "scss"],
};

Write files

Currently supports .yml and .json. Token naming should go from abscact (its a color), to very specific (it is a color for the rest state of the primary button). The actual values are written using value: "your value". You are also able to descriptions to the tokens like this description: your description here.

---
colors:
  primary:
    500:
      value: "#FFFF00"

Numbers are also supported. Currently all numbers in sizes are treated as rem.

---
fontSizes:
  1: 
    value: 0.624

Use $ for token references, with . as separator.

---
colors:
    background:
        button:
            primary:
                rest:
                    value: $colors.primary.500
                    description: the rest color for a primary button.

Build tokens

...

Supported Platforms.

React

Builds tokens as javaobjects for eacht property (colors, size, etc.). Token references are transformed to actual object paths to keep the reference alive.

Transformations

• Converst all colors to RGB(A).
• Adds remto sizes.
• Keeps references.

Figma

Works with Figma Tokens plugin. Currently only the color and text styles can be directly synced with the plugin. The source tokens should contain the folowing property groups: colors and typography. The typography token should contain the following keys to work:

---
typography:
  headline:
    fontFamily: $fontFamilies.serif
    fontWeight: $fontWeights.regular
    lineHeight: $lineHeights.2
    fontSize: $fontSizes.6
    letterSpacing: $letterSpacing.0
    paragraphSpacing: $paragraphSpacing.1

Transformations

• Colors to RGB(A)
• Font weight (e.g 400, 500, 700, ...) to string ("regular", "medium", "bold", ...)
• Merges global tokenfile into the alias files.

Markdown

Creates a table overview in Markdown of all tokens. Contains token name, value and description.

Example:

Transformations

• Converst all colors to RGB(A).
• Adds remto sizes.
• Keeps references.

Scss

Builds tokens as scss variables.

Transformations

• Converst all colors to RGB(A).
• Adds remto sizes.
• Keeps references.

Sketch

Works with Import colors plugin for Sketch.

Transformations

• Converst all colors to HEX8.
• Merges global tokenfile into the alias files.
• Resolves all references.