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 compatible in Specify. Use them to define specific rules or parser pipelines.

Specify handles the following design tokens and assets:

  • border
  • color
  • depth
  • duration
  • gradient
  • measurement
  • opacity
  • shadow
  • text style
  • bitmap
  • vector
  • font

Token Types

type TokenType =
| 'border'
| 'color'
| 'depth'
| 'duration'
| 'gradient'
| 'measurement'
| 'opacity'
| 'shadow'
| 'textStyle'
| 'bitmap'
| 'vector'
| 'font'

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 where you want to store your design tokens. If the design tokens are bitmaps or vector, it needs a directory else, it needs a file.

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