Links

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:
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