CLI & Config

In this guide you’ll learn how to transform design data coming from Figma Variables and/or Tokens Studio into CSS Custom Properties using the Specify CLI.

1. Install the @beta CLI
Install the @specifyapp/cli@beta via npm.
NPM
npm install @specifyapp/cli@beta 
2. Create your Specify configuration file
Since the feature is in beta we do not have a command yet to create a config file - as we do on the base Specify platform. Therefore, for now, you need to follow these steps:
Create an empty file named .specifyrc.json
Add the following content
JSON
1
{
2
  "version": "2",
3
  "repository": "@organization/repository",
4
  "personalAccessToken": "<your-personal-access-token>",
5
  "rules": [
6
    {
7
      "name": "CSS Styles",
8
      "parsers": [
9
        {
10
          "name": "to-css-custom-properties",
11
          "output": {
12
            "type":"file",
13
            "filePath": "style.css"
14
          }
15
        }
16
      ]
17
    },
18
    {
19
      "name": "Raw SDTF",
20
      "parsers": [
21
        {
22
          "name": "to-sdtf",
23
          "output": {
24
            "type":"file",
25
            "filePath": "raw.json"
26
          }
27
        }
28
      ]
29
    }
30
  ]
31
}
specifyrc.json
403B
Code
3. Properties to update in the configuration file before using it:
A property version is shown which refers to the new repository in beta from which we are extracting tokens. Use the version: "2" for the beta.
Add your organization and repository name under the repository property.
Get a personal access token here ↗︎.
Run the command specify pull to fetch your design tokens.
4. CSS output example
Specify exports your Figma Variables Modes as CSS data-attributes:
CSS
:root[data-Colors="Dark"] {
  --Core-Label-blue-base: rgb(96, 168, 250);
  --Aliases-Icon-info: var(--Core-Label-blue-base);
  --Core-Label-red-base: rgb(221, 72, 64);
  --Aliases-Icon-error: var(--Core-Label-red-base);
  --Core-Neutral-neutral-6: rgb(174, 178, 183);
  --Aliases-Icon-default: var(--Core-Neutral-neutral-6);
  --Core-Label-green-base: rgb(125, 216, 121);
  --Aliases-Icon-success: var(--Core-Label-green-base);
  --Core-Label-orange-base: rgb(255, 158, 41);
  --Aliases-Icon-warning: var(--Core-Label-orange-base);
  --Core-Neutral-neutral-3: rgb(68, 71, 75);
  --Aliases-Icon-disabled: var(--Core-Neutral-neutral-3);
  --Core-Primary-app-base: rgb(98, 77, 227);
  --Aliases-Icon-selected: var(--Core-Primary-app-base);
}
:root[data-Dimensions="Mobile"] {
  --Base-dimension-02: 2px;
  --Radii-radius-01: var(--Base-dimension-02);
  --Base-dimension-08: 8px;
  --Radii-radius-02: var(--Base-dimension-08);
  --Base-dimension-04: 4px;
  --Base-dimension-12: 12px;
  --Base-dimension-16: 16px;
  --Base-dimension-24: 24px;
  --Base-dimension-32: 32px;
  --Spacings-spacing-01: var(--Base-dimension-02);
  --Spacings-spacing-02: var(--Base-dimension-04);
  --Spacings-spacing-03: var(--Base-dimension-12);
  --Spacings-spacing-04: var(--Base-dimension-16);
}
:root[data-Dimensions="Desktop"] {
  --Base-dimension-02: 2px;
  --Radii-radius-01: var(--Base-dimension-02);
  --Base-dimension-08: 8px;
  --Radii-radius-02: var(--Base-dimension-08);
  --Base-dimension-04: 4px;
  --Base-dimension-12: 12px;
  --Base-dimension-16: 16px;
  --Base-dimension-24: 24px;
  --Base-dimension-32: 32px;
  --Spacings-spacing-01: var(--Base-dimension-04);
  --Spacings-spacing-02: var(--Base-dimension-08);
  --Spacings-spacing-03: var(--Base-dimension-12);
  --Spacings-spacing-04: var(--Base-dimension-16);
}
We would like to improve this output according to your needs as much as we can. Feel free to share your feedback with us via:
​The community ↗ ​
The in-app chat
Things to take into account when using the beta CLI

The configuration file can handle MJS, CJS, and JSON.
You can no longer specify token types inside the Configuration File (filter.types property).
You can’t synchronize design tokens from the CLI (with the sync command) when using the version “2".
There is no more path property in the parser settings, it is now replaced by an output key inside every parser.
There’s no template yet.
There are 2 parsers available:
to-css-custom-properties that can only return Figma Variables available types (only Colors and Dimensions for now).
to-sdtf that returns your design token graph in JSON

​

SDTF - beta - Previous

Tokens Studio

Next - SDTF - beta

Parsers

Last modified 21d ago