This fork is a spike. The original repo is supposed to be used together with the Design Tokens plugin for Figma. It transforms the exported design tokens using Amazon style dictionary.
You can download this package or clone it via the terminal.
git clone https://github.com/lukasoppermann/design-token-transformer.git
- From within the terminal
cd
(navigate) this folder. - Run
npm i
to install the dependencies.
To use an exported json file and transform it locally on your machine, follow the 3 steps below:
- Save the
.json
file you exported using the Design Token plugin to thetokens
folder (and remove the example files). - In the terminal
cd
(navigate) to this folder. - Run
npm run transform-tokens
. - 🎉 Your converted tokens should be in the build folder.
It is recommended to create a fork of this repository and adapt it to your needs.
Should you decide to instead create a new repo, make sure to set up a .github/workflows file that handles the data.
2. Enable github actions in the actions tab
Go to the actions tab in your fork of this repository and enable the github actions by clicking the enable actions
button.
3. Create a personal access token.
In the plugin settings you need to add two items:
- Add the url to your repository in the format
https://api.github.com/repos/:username/:repo/dispatches
to theserver-url
field (See server-url for details) - Add the personal access token to the access token field.
You should be able to see the action running in your GitHub repo and have all the converted files in the build folder once it is done.
7. Optional: Adapt the transform-tokens
script in the package.json.
If you want to you can do something else when the tokens are pushed to the server you can change the transform-tokens
script in the package.json. However note that the name of the script transform-tokens
should not be changed.
8. Optional: Adapt the github workflow
You can adapt the workflow file if you need to. Just make sure the keep the current setup working.
The access token should be specifically for this plugin and only have the minimal permissions needed:
- only
public_repo
is needed for a public repository.
The token is not stored with the Figma file but only locally on your machine.
Here you can find more information about creating personal access tokens in the docs.
If you want to set up a custom server that responds to a push from this plugin, check out the setup for GitHub and adapt it to your needs. If you run into problems, please create an issues in the main Design Tokens plugin for Figma repository.
To customize the output please view the Amazon style dictionary documentation.
- Make sure you have a .github/workflows
- Make sure you enabled github actions in the actions tab of your repositiory.
- Verify that you specified the correct server url in the plugin settings:
https://api.github.com/repos/{username}/{reponame}/dispatches
(replace{username}
with your username e.g.lukasoppermann
and{reponame}
with the name of your repo e.g.design-token-transformer
) - Verify that the action runs without any error
If you only see the Get started with GitHub Actions
page without an option to enable actions
you either deleted the .github/workflows file from your forked repository, or you created a new repositiory without adding a .github/workflows file. See step 1.
If you have issues concerning the Design Tokens plugin for Figma please create an issue in the plugin repo.
Only create an issue in this repository if you have an issue with this transformation package.