Tool transforming Ant Design for Figma tokens to less files
MIT License
Tool transforming Ant Design for Figma tokens to less files.
npm install figma-tokens-transformer --save-dev
npx figma-tokens-transformer configure
Remember to add the generated secrets file to .gitignore
as it contains sensitive data (license key, email).
npx figma-tokens-transformer transform
You can also add the script to your package.json
scripts:
"transform-tokens": "figma-tokens-transformer transform"
thanks to that you can call the script like so:
npm run transform-tokens
It is recommended to configure the tool using the CLI wizard:
npx figma-tokens-transformer configure
However, it can be also done by hand - config files format is shown in the examples below.
tokens-transformer.config.json (Ant Design v4)
{
"source": {
"tokensFile": "src/tokens/tokens.json"
},
"target": {
"lessDir": "src/less"
}
}
tokens-transformer.config.json (Ant Design v5)
{
"version": 5,
"source": {
"tokensFile": "src/tokens/tokens.json"
},
"target": {
"jsonsDir": "src/ant-tokens"
}
}
tokens-transformer.secret.json (do not commit this file!)
{
"license": {
"key": "6X2EF5E7-X96348A0-8871CEX3-A93XB7X9",
"email": "[email protected]"
}
}
For continuous integration build purposes environment variables should be used to avoid keeping sensitive data (license) in the repository.
Available variables are: