Link Figma and React using Figma Tokens

I have been testing a Figma plugin called “Figma Tokens” for a few weeks now.

Figma Token from Figma community

The tool allows you to create a Design System using Figma Tokens.

What does this mean?

This means that you can create tokens such as “colors”, “spacing”, “border-radius”, etc. that you can then apply to the whole document, styles or just the selection.

The best part is that you can export these tokens in JSON format. That allows us to play around a bit)))) The plugin itself allows you to export this JSON on Github or Gitlab.

creating a new branch or directly on main.

JSON archive exported to Github

OK, but what should I do with that?

We can use this JSON together with another tool called style-dictionary. Thanks to it we can transform this JSON in CSS))) Nice :)

For that we are going to install our style-dictionary package in the React project.

npm install -D style-dictionary

Next step will be to create a config.json file in the root of our React project.

{   
    "source": ["./tokens/tokens.json"],
    "platforms": {     
        "css": {       
            "transformGroup": "css", 
            "buildPath": "./src/build/css/",
            "files": [
             {           
                "destination": "_variables.css",
                "format": "css/variables"         
             }       
         ]     
      }   
   } 
}

All ready, now we just have to initialize the script with the following command.

npx style-dictionary build --config config.json

We already have all our Figma tokens created as CSS variables.

If at any time we need to modify our tokens in the design system to modify the main color, spacing, text sizes, etc. we will only have to upload the changes to Github / Gitlab and the Front-End Developer will have to execute only two commands to transmit these changes in the project.

git pull
npx style-dictionary build --config config.json

and that’s it 😊 everything is modified. This simplifies a lot the communication and the work between Designer and Developer.