Introduction

Learn more about how you can configure Specify to generate design tokens and assets for your project. After reading this page, you will be able to setup a tailored transformation pipeline for your design data between Specify and your codebase.

Types

Types define every type of design token and asset Specify is compatible with. Use them to target specific types of design data you want to pull from Specify and manage in your rules or parser pipelines (e.g., color, textStyle ...).

Learn more about all types on our dedicated page: Types.

Rules

Rules are a set of parameters that dictates how to pull design tokens. By Using them, you will be able to customize how the CLI pulls your design tokens.

Each rule is composed of several properties:

  • name string

    The name of your rule.

  • path string

    The path in your project where you want Specify to generate your design data. If you want to pull bitmap, vector or font design data types you must set a directory (Learn more ↗).

  • filter Record<'types', Array<TokenType>> optional

    The filter you want to apply when getting the tokens. For now, you can only specify a type.

  • parsers Array<Parser> optional

    The parsers you want to apply to transform your design tokens. For further details see Parsers.

Please note that each rule overrides the file while writing.

Rule Type

interface Rule {
  name: string;
  path: string;
  filter?: {
    types: Array<TokenType>
  };
  parsers?: Array<Parser>;
};

Example of rule

[
  {
    "name": "Design Tokens",
    "path": "styles/variables.css",
    "filter": {
      "types": ["color", "measurement"]
    },
    "parsers": [
      {
        "name": "sort-by",
        "options": {
          "keys": ["name"]
        }
      },
      {
        "name": "to-css-custom-properties"
      }
    ]
  },
  {
    "name": "Assets",
    "path": "assets/",
    "filter": {
      "types": ["vector", "bitmap"]
    }
  }
]

Parsers

Parsers allow you to transform design tokens according to your needs. When you request design tokens from Specify you may want to get them already formatted in a specific format. Parsers help you do this.

Usage

Set the following properties to apply a parser:

  • name

    The name of the parser. You can choose it among all parsers provided by Specify.

  • options

    The options relative to the parser you apply. Each parser has its own options you can find in their respective README file.

Use case

Let's assume you want to get all your color design tokens in CSS Custom Properties.

You would apply the following parsers:

  1. The sort-by parser to sort your design tokens in alphabetical order
  2. The to-css-custom-properties parser to convert your design tokens in CSS Custom properties

Parser Types

interface Parser {
  name: string;
  options?: Record<string, any>;
}

Example of parsers

...
"parsers": [
  {
    "name": "sort-by",
    "options": {
      "keys": ["name"]
    }
  },
  {
    "name": "to-css-custom-properties"
  }
]
...