# Pulling your first tokens with the CLI

## Introduction

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

{% hint style="info" %}
Want to know more on how to collect design tokens from Figma to Specify first? Head towards the [Available sources](https://docs.specifyapp.com/collect/available-sources) section!
{% endhint %}

{% embed url="<https://youtu.be/u2w2HE495Po>" %}

## Before getting started

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

* A Specify account
* A Specify repository containing design tokens ([Learn more ↗](https://docs.specifyapp.com/concepts/overview#repository))

## 1. Install the CLI

Install `@specifyapp/cli`

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

## 2. Create your Specify config file

Create a configuration file for your desired output format using one of our [templates ↗️](https://docs.specifyapp.com/resources/parser-rules-templates)

## 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.&#x20;

{% tabs %}
{% tab title="JavaScript (CommonJS)" %}

<pre class="language-javascript" data-line-numbers><code class="lang-javascript">module.exports = {
  version: "2",
<strong>  repository: '@workspace/repository',
</strong>  personalAccessToken: '&#x3C;your-personal-access-token>',
  rules: [],
};
</code></pre>

{% endtab %}

{% tab title="JSON" %}

<pre class="language-json" data-title=".specifyrc.json" data-line-numbers><code class="lang-json">{
  "version": "2",
<strong>  "repository": "@workspace/repository",
</strong>  "personalAccessToken": "&#x3C;your-personal-access-token>",
  "rules": []
}
</code></pre>

{% endtab %}
{% endtabs %}

## 4. Add your personal access token

Generate a `personalAccessToken` for the CLI and add it in your configuration. You can generate a personal access token from you [Specify account settings](https://specifyapp.com/user/personal-access-tokens).

{% tabs %}
{% tab title="JavaScript (CommonJS)" %}

<pre class="language-javascript" data-title=".specifyrc.js" data-line-numbers><code class="lang-javascript">module.exports = {
  version: "2",
  repository: '@workspace/repository',
<strong>  personalAccessToken: '&#x3C;your-personal-access-token>',
</strong>  rules: [],
};
</code></pre>

{% endtab %}

{% tab title="JSON" %}

<pre class="language-json" data-title=".specifyrc.json" data-line-numbers><code class="lang-json">{
  "version": "2",
  "repository": "@workspace/repository",
<strong>  "personalAccessToken": "&#x3C;your-personal-access-token>",
</strong>  "rules": []
}
</code></pre>

{% endtab %}
{% endtabs %}

## 5. Set your output format

Add your first rule and use the [to-css-custom-properties](https://docs.specifyapp.com/reference/parsers/to-css-custom-properties) parser to generate your tokens as CSS variables.

{% tabs %}
{% tab title="JavaScript (CommonJS)" %}
{% code title=".specifyrc.js" lineNumbers="true" %}

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

{% endcode %}
{% endtab %}

{% tab title="JSON" %}
{% code title=".specifyrc.json" lineNumbers="true" %}

```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"
          }
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 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.&#x20;

```bash
specify pull
```
