This package is supposed to be used together with Design Token plugin for Figma. It transforms the exported design tokens using Amazon style directory.
You can download this package or clone it via teh terminal.
git clone https://github.com/lukasoppermann/design-token-transformer.git- From within the terminal
cd(navigate) this folder. - Run
npm ito install the dependencies
To use an exported json file and transform it locally on your machine, follow the 3 steps below:
- Save the
.jsonfile you exported using the Design Token plugin to thetokensfolder (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.
- Fork this repository
- Adapt the
transform-tokensscript in the package.json - Adapt the github workflow
- Create a personal access token
- Add the push to server settings & your access token in Figma
- Run the
Send Design Tokens to Urlcommand from the plugin - 🎉 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.
The access token should be specifically for this plugin and only have the minimal permissions needed:
- only
public_repois needed for a publis repository
The token is not stored with the Figma file but only locally on your machine.
You can find more information about creating personal access tokens in the docs.
If you want to set up your custom server that response 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 Token plugin for Figma repository.
To customize the output please view the Amazon style directory documentation
If you have issues concerning the Design Token plugin for Figma please create an issue the plugin repo.
Only create an issue in this repository if you have an issue with this transformation package.