Links

Getting started

A 5min guide on collecting and pulling your first design tokens with Specify.

Introduction

In this guide you’ll learn how to pull your first design tokens to CSS Custom Properties using the Specify CLI.
Want to know more on how to collect design tokens from Figma to Specify first? Head towards the Apps & Tools section!

Before getting started

To get the most out of this guide, you’ll need:
  • A Specify account
  • A Specify repository containing design tokens (Learn more ↗)

1. Install the CLI

Install @specifyapp/cli via npm or Yarn.
NPM
Yarn
npm install -g @specifyapp/cli
yarn global add @specifyapp/cli

2. Create your Specify config file

Create a configuration file for your desired output format using one of our templates ↗️

3. Add your Specify repository

Add your Specify repository and workspace from which you want to pull your design tokens. You can find your workspace name and repository name in the URL of the app when inside a repository.
JavaScript (CommonJS)
JSON
1
module.exports = {
2
version: "2",
3
repository: '@workspace/repository',
4
personalAccessToken: '<your-personal-access-token>',
5
rules: [],
6
};
1
{
2
"version": "2",
3
"repository": "@workspace/repository",
4
"personalAccessToken": "<your-personal-access-token>",
5
"rules": []
6
}

4. Add your personal access token

Generate a personalAccessToken for the CLI and add it in your configuration. You can generate a personal access token from you Specify account settings.
JavaScript (CommonJS)
JSON
1
module.exports = {
2
version: "2",
3
repository: '@workspace/repository',
4
personalAccessToken: '<your-personal-access-token>',
5
rules: [],
6
};
1
{
2
"version": "2",
3
"repository": "@workspace/repository",
4
"personalAccessToken": "<your-personal-access-token>",
5
"rules": []
6
}

5. Pull your design tokens and assets

Our configuration is ready and we can now pull our design tokens and assets using the pull command.
specify pull