How to generate CSS variables in GitHub

In this article you will learn how to generate CSS variables from design tokens synced in Specify. Head over this article to learn more about how to sync tokens to Specify.

From now on you can synchronize design tokens from several sources into Specify:

• Figma Styles

• Figma Variables

• JSON (useful if you’re using Tokens Studio)

We will pull design data from the following Specify repository:

We will generate the following files:

🗂 output
└── 🗂 styles
    └── colors.css
    └── spacing.css
    └── text-styles.css

Prerequisites

Before anything else, please make sure you have:

1. created a Specify account

2. collected design data from Figma to a Specify repository

The Workflow

Specify is a design token engine which offers an API. Which means you can request tokens from Specify while transforming them along the way.

Here’s what we will do:

1. Use the Specify CLI to get tokens locally and iterate in our local git directory

2. Set our working configuration in GitHub to get automated Pull Requests

Using the CLI

The Specify CLI helps you extract design tokens and assets from Specify in your terminal or even in a CI/CD pipeline.

Installation

First of all, let's install the Specify CLI: yarn global add @specifyapp/cli.

Once the Specify CLI is installed, run the specify command. You should get the following menu:

Configuring Specify

The Specify Design Token Engine is a powerful tool to help you generate design tokens and assets that match your needs. To make sure Specify knows what you exactly need, you have to configure it.

In this example we want our colors, spacing and text styles to be pulled and generated as CSS Custom Properties.

So, here’s how we will configure Specify to complete the task:

1. Create a .specifyrc.json Specify configuration inside our project folder

2. Paste the following configuration in our file

3. Change the data at the top of the file: we need to add the name of the Specify repository we're pulling design data from. In our case we're pulling design data from the all-design-data repository created in the @acme-inc organization.

4. Generate a new personal access token and set it in the personalAccessToken property

This configuration is now ready to be executed.

Let's run it by executing: specify pull.

Syncing design tokens in GitHub

The Specify GitHub integration helps you distribute your design tokens and assets from your Specify repository to your GitHub repositories. Every change detected in your Specify repository creates a Pull Request in your GitHub repositories.

1. Head over to the Specify repository you want to pull your design tokens from

2. Go to your repository Destinations page

3. Click on “Create pipeline”

4. Select “GitHub Repository”

5. Select your GitHub account and your GitHub repository

6. Name your configuration file (e.g., .specifyrc.json)

7. Create the Pull Request

8. Replace the content of the .specifyrc.json file in the PR by the content of the .specifyrc.json file we used with the CLI.

9. Set your repository in the repository property

10. Remove the personalAccessToken property which is not needed on GitHub.

11. Merge the Pull Request containing your Specify config file

12. Specify will create a new PR containing your generated CSS files

13. Merge the Pull Request

Let's sum things up

We've learned how to synchronize our design tokens and assets from Figma to our git directory, both locally and on GitHub.

We've used the CSS Custom Properties Configuration Template in two ways:

• with the Specify CLI to pull design tokens in our local git directory

• with the Specify GitHub app to pull design tokens in our GitHub repository

Don't see the configuration template you're looking for? Feel free to request a template ↗.