Create a node project
npm init -y
Install style-dictionary
npm i style-dictionary
Execute style-dictionary
basic
npx style-dictionary init basic
Modify package.json
to build style-dictionary
...
"scripts": {
"build": "style-dictionary build"
},
...
In Figma, click in Plugins
-> Design Token
-> Export Design Token File
-> Save & Export
.
Then, rename as token.js
and insert as token.json in /input/token.json
{
"color": {
"white": {
"description": "",
"type": "color",
"value": "#ffffffff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:4e7c9cf8df57bdd05846024940cd0af4cb141436,",
"exportKey": "color"
}
}
},
"purple": {
"500": {
"description": "",
"type": "color",
"value": "#8257e6ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:c87e728900e6f6e7ca21f6b05dc941252f0d1162,",
"exportKey": "color"
}
}
}
},
"gray": {
"200": {
"description": "",
"type": "color",
"value": "#c1c1c4ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:877ce7d25f2350925195cba43eb4c4bea457fa46,",
"exportKey": "color"
}
}
},
"500": {
"description": "",
"type": "color",
"value": "#50505cff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:e3ba9ad5240451b441c5e9ce4617e5cea5bee249,",
"exportKey": "color"
}
}
},
"800": {
"description": "",
"type": "color",
"value": "#1c1c1fff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:8df1f27acc69b9dfa629c364632f5c6ca07d6634,",
"exportKey": "color"
}
}
},
"900": {
"description": "",
"type": "color",
"value": "#121214ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:d2fa0f28094afe9f8274071589ab22306c90e89b,",
"exportKey": "color"
}
}
}
}
},
"effect": {
"shadow": {
"md": {
"description": null,
"type": "custom-shadow",
"value": {
"shadowType": "dropShadow",
"radius": 4,
"color": "#ffffff1a",
"offsetX": 0,
"offsetY": 2,
"spread": 0
},
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"styleId": "S:f887c123386839ef6380cafd527642edc90814e2,",
"exportKey": "effect"
}
}
}
}
}
}
In config.json
, modify the format to achieve the desired format:
{
"source": ["input/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "build/css/",
"files": [{
"destination": "variables.css",
"format": "css/variables"
}]
},
"js": {
"transformGroup": "js",
"buildPath": "build/js/",
"files": [{
"destination": "tokens.js",
"format": "javascript/module-flat"
}]
}
}
}
Create a .gitignore
file containing:
node_modules
input/*.json
Create a .gitkeep
file inside /input
touch ./input/.gitkeep
Create a github workflow to achieve Github Action in dispatched event from remote uri
mkdir -p .github/workflows/
touch .github/workflows/update-tokens.yaml
In .github/workflows/update-tokens.yaml
:
name: Generate design tokens
on:
repository_dispatch:
types: update-tokens
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Create input JSON
id: create-json
uses: jsdaniell/create-json@1.1.2
with:
name: ${{ github.event.client_payload.filename }}
json: ${{ github.event.client_payload.tokens }}
dir: 'input'
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 16
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Create PR
uses: peter-evans/create-pull-request@v4
with:
commit-message: "style: Update design tokens"
title: ${{ github.event.client_payload.commitMessage || 'Update design tokens' }}
body: "Design tokens have been updated via Figma and need to be reviewed."
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH_NAME: 'main'
In Figma, go to Plugins
-> Design Token
-> Send Design Token to Url
. Then configure as follows:
- Event type:
update-tokens
- Server url:
https://api.github.com/repos/rogeriocassares/figma-tokens/dispatches
- Accept header:
application/vnd.github.everest-preview+json
- Content-Type header:
text/plain;charset=UTF-8
- Auth type:
(Github) token
- Access token:
GITHUB_TOKEN_HERE
- Commit Message:
Update Token
Then Save & Export
and go to Github repository
-> Actions
. See if the PR is automatically generated, the merge it to the main
branch.
github action to publish the Merged PR to npm