@man-digital/relay-design-tokens v0.2.0

MAN Design Tokens

This package is intended to be used together with the Figma Tokens plugin. It transforms the exported design tokens using Amazon style dictionary.

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 @man-digital/relay-design-tokens

of

npm install @man-digital/relay-design-tokens

2. Import dependencies

When using CSS variables you only need to import the tokens once to have them available across files.

SCSS projects use CSS variables in the same way as CSS projects.

@import '~@man-digital/relay-design-tokens/dist/global.css)';
@import '~@man-digital/relay-design-tokens/dist/light.css)';
@import '~@man-digital/relay-design-tokens/dist/dark.css)' (prefers-color-scheme: dark);

Designer usage

Install the plugin in figma

Once the plugin is installed it needs to be linked to the repo so the tokens can be imported. Instructions can be found here https://docs.tokens.studio/sync/github

The default branch is main and the token file path is packages/design-tokens/src/exported/figma-export-tokens.json

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.