figma-tokens-transformer
Version:
Tool transforming Ant Design for Figma tokens to less files
83 lines (62 loc) • 1.65 kB
Markdown
Tool transforming Ant Design for Figma tokens to less files.
1. Add the dependency:
`npm install figma-tokens-transformer --save-dev`
2. Create the configuration file using CLI wizard:
`npx figma-tokens-transformer configure`
Remember to add the generated secrets file to `.gitignore`
as it contains sensitive data (license key, email).
3. Run tokens transformation:
`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`
## Configuration
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)
```json
{
"source": {
"tokensFile": "src/tokens/tokens.json"
},
"target": {
"lessDir": "src/less"
}
}
```
*tokens-transformer.config.json* (Ant Design v5)
```json
{
"version": 5,
"source": {
"tokensFile": "src/tokens/tokens.json"
},
"target": {
"jsonsDir": "src/ant-tokens"
}
}
```
*tokens-transformer.secret.json*
(**do not commit this file!**)
```json
{
"license": {
"key": "6X2EF5E7-X96348A0-8871CEX3-A93XB7X9",
"email": "test@example.com"
}
}
```
For continuous integration build purposes
environment variables should be used to avoid keeping
sensitive data (license) in the repository.
Available variables are:
- SOURCE_FILE
- TARGET_DIR
- LICENSE_KEY
- LICENSE_EMAIL