Skip to main content

the-wall-design-tokens

This package is the spiritual successor to the old the-wall-design-tokens

This package aims to automate the way we got tokens from figma and make them available for developers to use anywhere (CSS, Stylesheet, Typescript, etc.).

Table of Contents​

Technologies​

This repository is synched with Figma and uses GitHub actions to generate the assets every time a tokens json file.json file is updated, meaning that Figma is the source of truth.

How It Works​

Tokens Update Process​

  1. Designers Add/Update/Delete some token on Figma
  2. Designers push the change to Github repo.
    • Regarding this push, designers should take into account the type of change that they are adding and should add a specific commit message according to that. For instance:
      • Add a new token - feat: add a new token for Quicklink background
      • Update a token - fix: updated token --neutrals-border-elevation2 with new color
      • Delete a token - feat!: add a new token for Quicklink background or feat: delete the --neutrals-border-elevation2 token BREAKING CHANGE: use instead --neutrals-border-elevation1
  3. Designers open a pull request (PR) on Github with the change(s)
  4. After a PR is open an automatic action will run to generate the new tokens.
  5. Designers and Developers review the PR
  6. Developers accept the PR

Note: If you need more insight about how tokenization works, you'll love this presentation - Passcode: SZ.0W&Q#.

Tokens Process

How To Use​

Install it using NPM

npm install @ppb/the-wall-design-tokens

or using Yarn

yarn add @ppb/the-wall-design-tokens