Automating using GitHub actions

If you are using GitHub Actions to process your design tokens, or you run transformers such as Style Dictionary or any other pipeline processing for tokens, you might want to add Supernova as an extra step to this workflow. We have prepared an example GitHub action that you can just copy and paste that will sync your tokens every time new data is pushed into your GitHub repository.

Action template

                                                        
                                                        
                                                            name: Supernova <> Figma Token sync
                                                        on:
                                                          # Any branch you want
                                                          push:
                                                            branches: [ main ]
                                                          workflow_dispatch:
                                                        
                                                        jobs:
                                                          sync_tokens:
                                                            runs-on: ubuntu-latest
                                                            steps:
                                                              # Check out repository under $GITHUB_WORKSPACE, so the CLI utility can read it
                                                              - uses: actions/checkout@v3
                                                        
                                                              # Setup node to use with CLI. 14+ is required
                                                              - uses: actions/setup-node@v3
                                                                with:
                                                                  node-version: 14
                                                              
                                                              # Install Supernova CLI
                                                              - name: Install Supernova CLI dependency
                                                                run: npm install --g @supernovaio/cli
                                                        
                                                              # Sync tokens
                                                              - name: Synchronize tokens with Supernova 
                                                                run: supernova sync-tokens \
                                                                --apiKey=${{ secrets.ACCESS_TOKENS}} \
                                                                --designSystemId=1234 \
                                                                --tokenFilePath="${{ github.workspace }}/data/tokens.json" \
                                                                --configFilePath="${{ github.workspace }}/data/supernova.settings.json" \
                                                        
                                                            

Your run command will look different depending on your configuration — follow our configuration tutorial to learn more. Once you have your run command assembled, commit a new GitHub action to your repository under .github/workflows and each change to your token definition will be automatically synchronized with Supernova!

Examples in action

We have prepared a repository so you can see this put into action (pun intended)! This repository takes tokens being pushed through GitHub provider in Token Studio and runs GitHub action invoking the CLI.

See it for yourself.