Specify CLI In this guide you’ll learn how to transform design data coming from Figma Variables, Figma Styles and/or Tokens Studio into CSS Custom Properties using the Specify CLI.
1. Install the CLI
Install the @specifyapp/cli
via npm or yarn.
NPM Yarn
Copy npm install @specifyapp/cli
Copy yarn global add @specifyapp/cli
2. Create your Specify configuration file
To create your Specify config file, you need to follow these steps:
Create an empty file named .specifyrc.json
(The configuration file can handle MJS, CJS, and JSON)
Add the following content
JSON JavaScript (CommonJS)
Copy {
"version" : "2" ,
"repository" : "@organization/repository" ,
"personalAccessToken" : "<your-personal-access-token>" ,
"rules" : [
{
"name" : "Tokens as CSS Variables" ,
"parsers" : [
{
"name" : "to-css-custom-properties" ,
"output" : {
"type" : "file" ,
"filePath" : "tokens.css"
}
}
]
}
]
}
Copy {
version : "2" ,
repository : "@organization/repository" ,
personalAccessToken : "<your-personal-access-token>" ,
rules : [
{
name : "CSS Styles" ,
parsers : [
{
name : "to-css-custom-properties" ,
output : {
type : "file" ,
filePath : "style.css"
}
}
]
}
]
};
3. Properties to update in the configuration file before using it:
A property version
is shown which refers to the new Advanced Repository from which we are extracting tokens. Use the version: "2"
Add your organization and repository name under the repository
property
Run the command specify pull
to fetch your design tokens
4. CSS output example
By default, Specify exports your Figma Variables Modes as CSS data-attributes:
CSS
Copy :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 : 2 px ;
--Radii-radius-01 : var (--Base-dimension-02) ;
--Base-dimension-08 : 8 px ;
--Radii-radius-02 : var (--Base-dimension-08) ;
--Base-dimension-04 : 4 px ;
--Base-dimension-12 : 12 px ;
--Base-dimension-16 : 16 px ;
--Base-dimension-24 : 24 px ;
--Base-dimension-32 : 32 px ;
--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 : 2 px ;
--Radii-radius-01 : var (--Base-dimension-02) ;
--Base-dimension-08 : 8 px ;
--Radii-radius-02 : var (--Base-dimension-08) ;
--Base-dimension-04 : 4 px ;
--Base-dimension-12 : 12 px ;
--Base-dimension-16 : 16 px ;
--Base-dimension-24 : 24 px ;
--Base-dimension-32 : 32 px ;
--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: