Design-tokens-jd NPM

Design Tokens

This package is supposed to be used together with the Design Tokens plugin for Figma.

It transforms the exported design tokens using Amazon style dictionary.

This repo is a clone of Design Token Transformer with added improvements

Developer usage

1. Add this repo as a dependency to your project

If you're using npm as a package manager you can do this via the terminal.

npm install github:futurice/design-tokens-poc

2. Import dependencies

If you're using CSS variables you only need to import the design tokens once to have them available across files. The path for this import is design-tokens/build/css/variables.css

If you're consuming SCSS variables you need to import the tokens at the top of each file or once at the top of in a centralised SCSS file that in turn imports the other files. This can be done like this

@import "~design-tokens/build/scss/variables";

Designer usage

Create Github personal access token

You might need to ask a developer for this if you do not have Github access.

The access token should be specifically for this plugin and only have the minimal permissions needed:

only public_repo is needed for a public repository.

The token is not stored with the Figma file but only locally on your machine.

Here you can find more information about creating personal access tokens in the docs.

Push to server

When a new release of the tokens is ready you need to follow the instructions and push to server. This kicks off a series of steps that converts the figma file to a set of files used by developers. Once this is done the developers need to update their token dependencies in order to get the latest changes.

Customization

To customize the output please view the Amazon style dictionary documentation.

Notes

This repo uses a fork of token-transformer because this issue is open. Once it has been resolved remove /token-transformer folder and modify converter script to be "token-transformer ./tokens/test.json ./temp/converted.json"