In this article
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 Gitlab 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 Gitlab CI/CD.
Please make sure you have:
- A Specify repository containing design tokens
- A working Specify CLI config
- A Gitlab account
We'll setup a Gitlab workflow that does 2 jobs:
- Generate design tokens on a branch called
- Create a merge request from the
Generating design tokens
- Fork this Gitlab repository
- Generate public and private SSH keys. We need them to authorize the CI machine to push to your Gitlab repository
Create SSH private and public keys
Gitlab CI/CD consists in creating a series of actions called Jobs a virtual machine will execute.
Our first job does the following:
- Authorizes our virtual machine to push to our Gitlab repository by setting SSH private and public keys (see code).
- Installs the Specify CLI (see code).
- Executes Specify and generates design data (see code)
- Push to the
specifybranch (see code)
Generate SSH private and public keys
Generate your SSH private and public keys:
ssh-keygen -t ed25519 -C "gitlab-ci-ssh-key"
Advice: When you're prompted to "Enter a file in which to save the key" name your file
id_gitlab so you don't override a potential existing file already named
Add them in Gitlab
Add public key to your Gitlab user settings.
Now add your private and public keys in your Gitlab repository CI/CD variables:
- For each of them, go to your folder containing your SSH keys and copy their value in
cat id_gitlab | base64 | pbcopyto copy your private key
cat id_gitlab.pub | base64 | pbcopyto copy your public key
- Add each of them with their respective variable name set in
- For each of them disable the "Protect variable option" and enable "Mask variable".
Here's an example of a SSH private key set in
Don't forget to delete your private and public SSH keys on your machine. Now they are encoded in
base64 in our Gitlab repository CI/CD variables we don't need them anymore.
Testing our design tokens generation
Before we see how to create a merge request let's test our
The following code in
.gitlab.ci.yml sets our
generate_design_tokens job to only run every
generate_design_tokens: only: - schedules
Now, let's define a CRON job in your Gitlab repository CI/CD settings that will run our
Need help writing a CRON expression? Check these examples ⚡️
Now run your newly pipeline by hitting the "▶️ Play" button.
You should see a job called
generate_design_tokens running in your Jobs page:
generate_design_tokens job has passed, let's generate a merge request on the
Creating the merge request
Now we have pushed our design tokens on the
specify branch we need to merge it on the
We handle this via the "create_merge_request" job in the
This job runs a
create_merge_request.sh file which uses the Gitlab API to create a merge request on your Gitlab user behalf.
As we're using the Gitlab API we need to set a personal access token:
- Go to your Access Tokens settings
- Generate a new personal access token (e.g., "Gitlab API") and check
apiin the permissions scope
- Copy it
- Add it in your Gitlab repository CI/CD variables. Name it
GITLAB_PRIVATE_TOKEN. Disable the "Protect variable option" and enable "Mask variable"
Now go back to your Schedules page and run your "Generate design tokens" schedule by hitting the "▶️ Play" button again.
Our 2 jobs
create_merge_request will be exectued one after the other and you should get a new merge request created containing your design tokens.
We just pulled design tokens from a Specify repository to a Gitlab repository.
We used the Specify CLI inside Gitlab CI/CD to generate design tokens on a branch called
specify. Then, we used the Gitlab API to create a merge request from the
specify branch to the
Now, every time your design data is updated on Specify, you'll receive an automated merge request on your Gitlab repository ⚡️