Configuring GitHub actions will allow you to automatically sync token changes once you push your token changes to GitHub from the Figma Tokens plugin.
Your tokens file (e.g. tokens.json) should be the source of truth in your repository, so there’s no point in committing the .less files derived from it during figma-tokens-transformer execution (transform). That’s why we’re adding the transformed .less files to the .gitignore file. If we didn’t do that, we would redundantly have to commit changes in the .less files after each change in the tokens JSON file. While it is not a problem locally, as we can run the transformation at any time, it can be cumbersome when using continuous integration and delivery (automated builds).
Luckily, figma-tokens-transformer allows easy configuration for CI builds without interfering with the local builds. After configuring the tool locally using the configure script, two files were generated: tokens-transformer.config.json and tokens-transformer.secret.json . The latter should be added to the .gitignore file as it contains sensitive data (license key and email). After ignoring the file, it will not be available in CI builds, and it will cause errors. That’s why we should use environment variables to safely pass the license information to the build. Different CI solutions expose different configuration options - in this example, we will use GitHub Actions secrets (configuration is described here: https://docs.github.com/en/actions/security-guides/encrypted-secrets).
After configuring the secrets, we can simply use it in the figma-tokens-trasformer script execution.
npx figma-tokens-transformer transform
LICENSE_KEY=${{ secrets.LICENSE_KEY }} LICENSE_EMAIL=${{ secrets.LICENSE_EMAIL }} npx figma-tokens-transformer transform
The source file and target directory configuration will be used based on the committed tokens-transformer.config.json to reflect local changes, but environment variables: SOURCE_FILE and TARGET_DIR can be used to overwrite the values from the file as well.
After the transform build step is done, the .less files are generated and can be used in your project - the same as in your local development and testing.
You can find a complete example of GitHub Actions configuration here:
https://github.com/Jonarzz/ant-for-figma-tokens-transformer-example/tree/gh-actions
And the example was built and automatically deployed to the GitHub Pages here:
http://jonarzz.github.io/ant-for-figma-tokens-transformer-example
