Convert tokens and export them as a package for use.

Setup

Install Style Dictionary npm install -g style-dictionary

Token Export and Conversion

1. Export Figma Variables to .json (WC3 format) using a plugin such as Design Tokens.

2. Convert tokens to platform-specific formats using command style-diciontary build

3. Increase the package version in package.json file (follow best practices for semantic versioning).

4. Publish the package with npm publish

Using tokens in React

Install the package with npm install fgr-design-tokens

Get the latest version with npm update (make sure to set "fgr-design-tokens" in package.json to "latest")

Import token like this: import { TokenName } from 'fgr-design-tokens/fds_tokens'

Trouble using the package in a React project?

Try adding the following line to .d.ts file declare module "tokens";