How to run Style Dictionary with 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

Prerequisites

Please make sure you have:

• A Specify repository containing design tokens

• A GitHub account connected to Specify

The workflow

This workflow will help you sync design tokens from Figma to GitHub and transform them thanks to Style Dictionary:

1. Specify generates design tokens on a specify branch

2. A GitHub Action runs on every pull request on the specify branch 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 specify branch.

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:

🗂 build
└── 🗂 android
|      └── colors.xml
|      └── font_dimens.xml
└── 🗂 compose
|      └── StyleDictionaryColor.kt
|      └── StyleDictionarySize.kt
└── 🗂 ios-swift
|      └── StyleDictionary+Class.swift
|      └── StyleDictionary+Enum.swift
|      └── StyleDictionary+Struct.swift
|      └── StyleDictionaryColor.swift
|      └── StyleDictionarySize.swift
└── 🗂 ios
|      └── StyleDictionaryColor.h
|      └── StyleDictionaryColor.m
|      └── StyleDictionarySize.h
|      └── StyleDictionarySize.m
└── 🗂 scss
       └── _variables_

And, that's it. You now have a GitHub Action that generates and transforms your design tokens with Style Dictionary.

Going further

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:

• Style Dictionary official examples

• Style Dictionary documentation

• Style Dictionary Slack channel

• Style Dictionary playground by <div>RIOTS