Pulling your first tokens with the CLI

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

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 Available sources 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

npm install -g @specifyapp/cli

Yarn

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)

module.exports = {
  version: "2",
  repository: '@workspace/repository',
  personalAccessToken: '<your-personal-access-token>',
  rules: [],
};

JSON

.specifyrc.json

{
  "version": "2",
  "repository": "@workspace/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": []
}

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)

.specifyrc.js

module.exports = {
  version: "2",
  repository: '@workspace/repository',
  personalAccessToken: '<your-personal-access-token>',
  rules: [],
};

JSON

.specifyrc.json

{
  "version": "2",
  "repository": "@workspace/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": []
}

5. Set your output format

Add your first rule and use the to-css-custom-properties parser to generate your tokens as CSS variables.

JavaScript (CommonJS)

.specifyrc.js

module.exports = {
  version: "2",
  repository: '@workspace/repository',
  personalAccessToken: '<your-personal-access-token>',
  rules: [
    {
      name: "Generate tokens as CSS Custom Properties",
      parsers: [
        {
          name: "to-css-custom-properties",
          output: {
            type: "file",
            filePath: "tokens.css"
          }
        }
      ]
    }
  ]
};

JSON

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as CSS Custom Properties",
      "parsers": [
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          }
        }
      ]
    }
  ]
}

6. 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