Getting started

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

Introduction

In this guide you’ll learn how to pull your first design tokens and assets to CSS Custom Properties using the Specify CLI.

This guide helps you to sync tokens from Figma local styles and frames to Specify. Want to sync Figma Variables instead? Click here to learn more.

Before getting started

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

• A Specify account

• A Specify repository containing some design tokens and assets (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 ↗️

specify init

3. Add your Specify repository

Add your Specify repository from which you want to pull your design tokens and assets. Learn more ↗.

JavaScript (CommonJS)

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

JSON

{
  "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.

JavaScript (CommonJS)

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

JSON

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

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