How to sync design tokens from Specify to Azure DevOps

Specify helps you collect design data from Figma and distribute it in the right format, in the right project, at the right time, and to top it all: automatically.

In this article you'll learn how to synchronize design tokens from Specify to your Azure DevOps repository.

We're about to sync design tokens as CSS Variables. Looking for another output format? Feel free to check all our other configuration templates (React, Tailwind, Style Dictionary...).

We will use the Specify CLI inside an Azure DevOps pipeline.

Prerequisites

Please make sure you have:

• Pipelines enabled for your Azure DevOps organization. If not, please fill this form.

• A Specify repository containing design tokens

• A Specify personal access token

Also, please make sure to enable the 'Contribute to pull requests', 'Create branch' and 'Create tag' permissions in your repository security settings.

The workflow

We will pull design tokens and assets from several Specify repositories and generate them as CSS Variables in a single Azure DevOps repository thanks to the Specify CLI.

Design tokens from 3 Specify repositories generated by the Specify CLI inside an Azure DevOps repository.

We'll setup an Azure DevOps pipeline doing the following tasks:

1. We install Node (See code ↗︎)

2. We install the Specify CLI (See code ↗︎)

3. We pull design tokens from several Specify repositories from the same example organization called @acme-inc: General, Light-Theme and Dark-Theme. (See code ↗︎)

4. We install the Azure DevOps CLI (See code ↗︎)

5. We create a Pull Request on a new branch called specify targeting the main branch (See code ↗︎)

Generating design tokens

1. Fork this Azure DevOps repository ↗︎

2. Set your Specify personal access token as a pipeline variable named SPECIFY_TOKEN (Pipelines > Name of your pipeline > Edit > Variables)

3. Set your git user info ↗︎ in the pipeline

4. Update the Specify repositories ↗︎ you want to pull your design tokens from

5. Update the name of your Azure DevOps repository ↗︎ in the PR creation task

6. Update the name of your target branch ↗︎ in the PR creation task

7. Set how often you want your pipeline to run ↗︎ by updating the CRON job

Testing our pipeline

Now our pipeline is ready it's time to test it.

First, let's run our pipeline manually.

You should then have the follwing steps completed at the end of the run.

Finally, you should then see all your design tokens and assets generated inside a new Pull Request.

In summary

We just pulled design tokens from several Specify repositories to an Azure DevOps repository.

We used the Specify CLI inside an Azure DevOps pipeline to generate design tokens on a branch called specify. Then, we used the Azure CLI to create a pull request from the specify branch to the main one.

Now, every time your design data is updated on Specify, you'll receive an automated pull request on your Azure DevOps repository ⚡️