How to run Style Dictionary with a GitHub Action
Learn how to sync your design tokens from Specify to GitHub and transform them with Style Dictionary using a GitHub Action.
We recently shared with you why Specify and Style Dictionary are a perfect match. We tackled how you could use Specify and Style Dictionary inside a local directory using the Specify CLI.
This article will help you create the same workflow in a GitHub repository using GitHub Actions like so:
How to generate design tokens for specific platforms using Specify and Style Dictionary in a GitHub repository
Please make sure you have:
A Specify repository containing design tokens
A GitHub account connected to Specify
This workflow will help you sync design tokens from Figma to GitHub and transform them thanks to Style Dictionary:
Specify generates design tokens on a
A GitHub Action runs on every pull request on the
specifybranch and transform design tokens with Style Dictionary
Generating design tokens
First of all, fork this GitHub repository.
This repository already contains a working GitHub Action. Go to the Actions page and enable Workflows for your GitHub repository.
Please make sure you've forked the GitHub repository on a GitHub account connected to Specify. Otherwise Specify won't be able to sync tokens to your GitHub account. Learn more about how to use GitHub as a destination.
In your GitHub repository, update your source
repository in the
.specifyrc.json Specify config file. Need help? See our example Specify config file.
This Specify configuration will pull for colors, font files, measurements and vectors from your Specify repository. Feel free to update them 👍
If everything is set up correctly you should see the following pipelines in your Specify repository Destinations page:
Now our Specify and GitHub repositories are connected you should see a new Pull Request opened by Specify on the
This PR generates the following structure:
The GitHub Action will automatically run when a new PR targeting the
main branch contains a label named "Design Tokens".
This GitHub Action called "Generate Design Tokens With Style Dictionary" generates the following structure:
And, that's it. You now have a GitHub Action that generates and transforms your design tokens with Style Dictionary.
This article focuses on how to automatically run Style Dictionary with a GitHub Action. The Style Dictionary configuration we used may not generate what you're looking for.
If you want to dig deeper here are useful resources for you: