A practical guide from Figma-tokens plugin to frontend Styled-Components

This guide wants to explain the steps we used to automate the process of the design tokens, from Figma used by designers, to Styled-Components used by developers.

The importance of agnostic structure

The choice about using a JSON file is because we wanted an agnostic central structure that doesn’t limit work and automatism between design technology and development technology. We also have our platform split into micro-frontends, this choice we thought was the best way to don’t limit eventually future different frontend frameworks too.

Our semi-automatic solution

Starting with these requirements we decided to use the Figma-tokens plugin to semi-automate our design tokens system.

Figma-tokens plugin permits saving tokens created on Figma in a JSON file and syncing them, with a third service JSONbin or with GitHub.

Our versioning system is Bitbucket, which allows us to choose JSONbin for simple and fast implementation.

Figma tokens plugin for Figma.

How it works

First of all the designer pushes from the Figma-tokens plugin the tokens created with Figma on JsonBin.

In the code, in our case in the sources of the micro-frontend of components-library, we create a script to run with npm that downloads the JSON and converts it into an object to use then with Styled-Components.

The designer pushes from Figma-tokens the design tokens.

The developer runs npm design-tokens, a single command to download, sync, and transform the design tokens.

What happens running npm run design-tokens:

1. Pull the design-tokens from jsonBIN and save it in a file
2. Transforms the variables into values
3. Optimize JSON structure
4. Add additional tokens
5. Import the tokens from sources

Let’s see the structure we have inside the design folder, and then we can start to see what each file contains.

design-tokens-script folder

Let’s start coding

1. Pull the design-tokens from jsonBIN and save it in a file

First of all, following the official guide (https://jsonbin.io/api-reference ) we need to make an ajax call to get the design tokens from jsonBIN and save them in a file that we name figma-tokens.json.

Let’s create the file design-tokens.js.

require('dotenv').config()
 
const axios = require('axios')
const fs = require('fs')

// Get design-tokens from jsonBIN
const options = {
 url: 'https://api.jsonbin.io/v3/b/XXXXXXXXXXXXXX',
 method: 'GET',
 responseType: 'json',
 headers: {
   'X-Master-Key': XXXXXXXXXXXXXX
 }
}
// Save design-tokens in figma-tokens.json
const getTokens = async () => await axios(options)
getTokens().then(res => {
 const file = 'src/design/design-tokens/figma-tokens.json'
 const figmaTokens = JSON.stringify(res.data.record.values)
 fs.writeFileSync(file, figmaTokens)
})

In package.json we create a new script named design-tokens.

"scripts": {
   "design-tokens": "node ./src/design/design-tokens/utils/design-tokens.js"
}

2. Transforms the variables into values

Install and use the tokens-transformer plugin (by six7, the same creator of Figma-tokens) to transform all design-tokens variables into values.

Open the terminal and install it:

npm install tokens-transformer — -save-dev

Later we will see how to use it.

3. Optimize of JSON structure

Now we want to optimize the JSON structure removing the property “value” since it is a continuously repeated key. So, it becomes more accessible for developers to use tokens in sources.

4. Add additional tokens

If we want additional tokens and we want add them directly to our application, we can create a new file containing them named additional-tokens.json

Now in the script, we need to merge figma-tokens.json and additional-tokens.json in a single file named tokens.json

Let’s create the file design-tokens-transformer.js

const fs = require('fs')

const filterValues = obj => {
  for (const i in obj) {
    if (!obj.hasOwnProperty(i)) continue
    if (obj[i].hasOwnProperty('value')) {
      if (typeof obj[i].value === 'object') {
        const { value, ...rest } = obj[i]
        obj[i] = { ...value, ...rest }
      } else {
        obj[i] = obj[i].value
      }
    }
    if (typeof obj[i] === 'object') {
      filterValues(obj[i], 'value')
    }
  }
  return obj
}
// Load tokens.json and figma-tokens-transformed.json files
const additionalTokens = JSON.parse(
 fs.readFileSync('src/design/design-tokens/additional-tokens.json')
)
const figmaTokens = JSON.parse(
 fs.readFileSync('src/design/design-tokens/figma-tokens-transformed.json')
)
// Filters json structure removing the properties "value"
const smartFigmaTokens = filterValues(figmaTokens)
// Delete useless figma.tokens-transformed file
fs.unlinkSync('src/design/design-tokens/figma-tokens-transformed.json')
// Merge of figma-tokens and additional-tokens in tokens.json
const file = 'src/design/design-tokens/tokens.json'
const mergedTokens = JSON.stringify({
 ...smartFigmaTokens,
 ...additionalTokens
})
fs.writeFileSync(file, mergedTokens)

We’re almost done, we just need to adjust in package.json our design-tokens command to run all new scripts.

"scripts": {
   "design-tokens": "node ./src/design/design-tokens/utils/design-tokens.js && 
      node node_modules/token-transformer 
        ./src/design/design-tokens/figma-tokens.json 
        ./src/design/design-tokens/figma-tokens-transformed.json && 
      node ./src/design/design-tokens/utils/design-tokens-transformer.js"
}

Now it’s possible to run the command :

npm run design-tokens.

5. Import the tokens from sources

Finally, we can Import the tokens in our javascript sources and use them.

Let’s create the file tokens.js

import tokens from './tokens.json'

export default tokens

Now it’s possible to import the tokens in any component to define its values of styles. creating for example Button.js

import tokens from './design/design-tokens/tokens'

const StyledButton = styled.button`
  color: ${tokens.button.primary.textColor};
  background-color: ${tokens.button.primary.backgroundColor};
`

Enjoy!