Specify Docs
Specify ↗︎Changelog ↗︎Guide ↗︎
V2
V2
  • Getting started
    • Introduction
    • What is Specify?
    • Pulling your first tokens with the CLI
    • Glossary
  • Collect
    • What is a Source?
    • Available sources
      • Figma Variables & Styles
      • Tokens Studio
  • Distribute
    • What is a Destination?
    • Available destinations
      • GitHub
      • Specify CLI
      • Specify SDK
      • HTTP API
  • Concepts
    • Overview
    • Parsers Engine
    • SDTF Client
      • SDTF Engine
    • Specify Design Token Format
  • Guides
    • Configuration file 101
    • Specify CLI usage 101
      • Getting started
      • Authentication
      • Generate Files
    • Specify SDK usage 101
      • Getting started
      • Retrieving and working with the tokens
      • Updating tokens
      • Converting a token to XXX
      • Executing generation parsers
    • Specify SDK Cheatsheet
    • Manage font files
    • Querying a SDTF graph
  • Reference
    • Parsers Engine
    • Parsers
      • change-case
      • convert-color
      • convert-dimension
      • make-line-height-relative
      • filter
      • register-view
      • select-modes
      • prefix-by
      • suffix-by
      • replace-string
      • to-css-custom-properties
      • to-css-text-style
      • to-css-font-import
      • to-flutter
      • to-javascript
      • to-json
      • to-json-list
      • to-kotlin
      • to-react-native
      • to-scss-mixin-text-style
      • to-scss-map
      • to-sdtf
      • to-style-dictionary
      • to-swift
      • to-tailwind
      • to-typescript
      • svgo
      • svg-to-jsx
      • svg-to-tsx
      • to-svg-file
      • to-bitmap-file
      • to-file
    • Specify SDK
      • SpecifyClient
      • SDTFClient
      • Converters
        • CSS
      • ParsersEngineResults
    • SDTF Engine
      • Query API
      • Mutation API
      • SDTF Query Language
      • SDTF QueryResult
      • TokenState
        • Stateful Value
    • HTTP API
      • POST /parsers-engine-rpc
    • Specify CLI
  • Resources
    • Parser Rules templates
      • CSS Custom Properties
      • Tailwind
      • React Native
      • Flutter
      • SDTF
      • JSON
    • Specify CLI VS Specify SDK
    • Playground
    • Best practices
  • Useful links
    • Discord
    • YouTube
    • Twitter
    • Help Center
    • Canny
Powered by GitBook
On this page
  • Introduction
  • Before getting started
  • 1. Install the CLI
  • 2. Create your Specify config file
  • 3. Add your Specify repository
  • 4. Add your personal access token
  • 5. Set your output format
  • 6. Pull your design tokens and assets

Was this helpful?

Export as PDF
  1. Getting started

Pulling your first tokens with the CLI

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

PreviousWhat is Specify?NextGlossary

Last updated 11 months ago

Was this helpful?

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 section!

Before getting started

To get the most out of this guide, you’ll need:

  • A Specify account

1. Install the CLI

Install @specifyapp/cli

curl -sL https://static.specifyapp.com/cli/install.sh | sh

2. Create your Specify config file

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.

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

4. Add your personal access token

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

5. Set your output format

.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"
          }
        }
      ]
    }
  ]
};
.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

A Specify repository containing design tokens ()

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

Generate a personalAccessToken for the CLI and add it in your configuration. You can generate a personal access token from you .

Add your first rule and use the parser to generate your tokens as CSS variables.

templates ↗️
Specify account settings
to-css-custom-properties
Available sources
Learn more ↗