1 of 46

V1

Getting started

Introduction

Welcome to the Specify docs! Learn about how to use and integrate Specify in your workflow to sync your design tokens and assets in your design system.

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? 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 ()

1. Install the CLI

Install @specifyapp/cli via npm or Yarn.

2. Create your Specify config file

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

3. Add your Specify repository

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

4. Add your personal access token

Generate a personalAccessToken for the CLI and add it in your configuration.

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.

Glossary

Specify is built on core concepts such as sources, destinations, pipelines, parsers. This page will help you understand all of them.

Design API

A Design API is an API designed to synchronize information in your design system. This includes design tokens, assets, components and documentation.

Advanced Repository

Getting started

Here’s a 5 minute guide on how to use different features within the Advanced Repository based on the Specify Design Token Format.

Introducing the Specify Design Token Format

Specify is building an entirely new Design Token Format (SDTF) to base our platform on a new design token graph. In short, this means that we are developing a format that enables more possibilities to add code-type sources and destinations than before. The new graph will facilitate managing a large number of design token types and assets. Next to this, it opens doors to more advanced features such as Aliases, Modes, and Collections.

In a more practical sense, the SDTF opens up compatibility with

CLI & Config

In this guide you’ll learn how to transform design data coming from Figma Variables, Figma Styles and/or Tokens Studio into CSS Custom Properties using the Specify CLI.

1. Install the CLI

Install the @specifyapp/cli via npm or Yarn.

2. Create your Specify configuration file

To create your Specify config file, you need to follow these steps:

Create an empty file named .specifyrc.json
Add the following content

3. Properties to update in the configuration file before using it:

A property version is shown which refers to the new Advanced Repository from which we are extracting tokens. Use the version: "2".
Add your organization and repository name under the repository property.

4. CSS output example

Specify exports your Figma Variables Modes as CSS data-attributes:

We would like to improve this output according to your needs as much as we can. Feel free to share your feedback with us via:

The in-app chat

Things to take into account when using the CLI

The configuration file can handle MJS, CJS, and JSON.
There is no more

GitHub

Learn how to distribute your design tokens from Specify to your GitHub repositories via automated Pull Requests.

Specify will sync your GitHub repository if you have a config file .specifyrc.json saved at the root of your GitHub repository.

Prerequisites

Please make sure you have:

A GitHub account
A Specify account
One or multiple new Advanced Repositories Specify repositories containing some design tokens.

Want to connect a GitHub repository from your GitHub organization? Please make sure you have the correct access rights. Otherwise, you'll need an owner to approve your installation request.

Installation

Go to the applications catalog
Select GitHub
Click on "Connect"

Connecting Specify and GitHub

Once you've connected your GitHub account, Specify has to know what design tokens to synchronize and how.

Go to the Specify Advanced Repository you want to distribute design data from
Go to its "Destinations" page
Click on "Create Pipeline"

Useful resources

to-css-custom-properties

This parser helps you transform design tokens into CSS Custom Properties.

Interface

Options

Parameter

Required

Type

Default

Description

Basic usage

A design token can have modes, be nested in groups and be part of a collection. The following use case will generate a single CSS file containing core tokens and semantic tokens.

Head towards our to see how you can use this parser with others to suit a common use case when working with CSS.

to-style-dictionary

This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.

Unlike , this one doesn't have any options yet.

Interface

to-typescript

This parser helps you pull design tokens as TypeScript objects for all token types and their respective helper functions.

Interface

select-modes

This parser helps you select design tokens from specific mode(s).

Interface

Options

Parameter

Required

Type

Default

Description

Basic usage: select all tokens from a mode named "light"

We want to get all design tokens from the mode named "light"
We eventually generate our design tokens ass CSS variables in a CSS file thanks to the to-css-custom-properties parser.

convert-dimension

This parser helps you convert units of dimension tokens.

Interface

Options

Templates

Automatically distribute your design tokens and assets according to your organization's standards with our ready-to-use configuration templates.

Ready-to-use configuration templates for your next project

This section will help you get started with ready-to-use configuration template. Each configuration file will be filled by one or several rules, called parsers.

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.

Make sure to read the to better understand how configuration file works with Specify.

Template

Description

SDTF

This template helps you pull your design tokens in the SDTF format in a JSON file.

This example uses the following parser:

to-sdtf to generate your design tokens in SDTF

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate
rules are where you provide parsers and compatible options

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Tailwind

This template helps you generate your design tokens as a Tailwind theme.

This example uses the following parser:

to-tailwind to generate your design tokens as a Tailwind theme

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate
rules are where you provide parsers and compatible options

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Playground

Learn how to use the Specify Playground to iterate more easily on your configuration files

Introduction

The Specify Playground helps you run parsers against a token graph and see the generated output in live. It's a great tool to help you iterate on your configuration files or try new parsers on the go.

https://iframe.specifyapp.com/sdtf-playground/index.html

Usage

The left side panel contains the SDTF graph you'll run your rules against. It's editable and you're free to use your own SDTF graph which you can get with the parser.
The middle panel contain your Specify configuration rule.
The right side panel displays the generated code

Concepts

Best practices

Set your personal access token as a variable

Your Specify personal access token should always be private. We highly recommend you to set it in a private variable or in a .env variable.

Using an .env variable in a config file in JavaScript

Using a variable in a flag with the CLI

Set your personal access token as an environment variable and interpolate it in the CLI wit .

You can use this method to sync Specify with git repositories in , , or .

Apps & Tools

Overview

List of all apps you can use with Specify to sync, read and transform your design tokens and assets.

npm

Learn how to distribute your design tokens and assets from Specify as npm or GitHub packages.

Workflow

This integration helps you generate design tokens and assets as private or public packages in a npm or a GitHub registry.

REST API

The Specify API lets you extend Specify functionalities beyond what we provide out of the box.

Introduction

The Specify API is based on REST structure. We support authentication via access tokens. Requests are made via HTTP endpoints with clear functions and appropriate response codes. Endpoints allow you to request design tokens and assets from a Specify repository.

What you can do with the REST API

Specify's REST API is useful if you want to use design data coming from Specify through custom scripts like a Figma plugin or a .

In short, our REST API helps you request design data through HTTP requests. Like with our you can use parsers to transform design data.

However, you cannot directly generate files using the REST API as it only returns text. You'll have to write custom scripts to generate design files (e.g., colors.css).

To sum things up, to generate files from Specify (e.g., colors.css or icon.svg) containing design tokens or assets use the or our .

Endpoint

Specify provides the following endpoint to help you get design tokens and assets from a Specify repository.

https://api.specifyapp.com/repository/{workspace}/{repository}/design-tokens

Parameters

POST https://api.specifyapp.com/repository/{workspace}/{repository}/design-tokens

Get design tokens and assets from a Specify repository.

Path Parameters

Name

Type

Description

Request Body

Name

Type

Description

Once you have your personal access token, you can pass it within the Authorization header of your request.

Example

Here's a simple example to get colors in CSS variables from a repository called all-design-datain the @acme-inc workspace:

Errors

Specify uses standard HTTP response codes for success and failure notifications. Our errors are further classified by type. In general: Codes in the 2xx range indicate success. Codes in the 4xx range indicate an error that failed given the information provided (e.g., a required parameter was omitted). Codes in the 5xx range indicate an error with Specify servers.

Some 4xx errors that could be handled programmatically include an error code that briefly explains the error reported.

Attributes

Property

Type

Description

CLI

The Specify CLI helps you pull design tokens and assets from Specify right from your terminal.

Introduction

Use the Specify CLI to integrate Specify in your workflow.

You can use the Specify CLI to:

Pull your design tokens in the right format using parsers
Test your configuration before using it in a GitHub repository
Sync a Specify repository

Installation

Install @specifyapp/cli via npm or Yarn.

Commands

Init

Initialize a Specify configuration tailored for a specific output format. .

Pull

Pull design tokens and assets from your Specify repository.

Sync

Sync a Specify repository to update its design tokens and assets.

Flags

Flags are parameters you can pass while launching the command. All of these parameters are optional if you use a config file.

-C, --config-path

Relative path to your Specify config file.

-r, --repository

The name of the Specify repository you want to pull your design tokens and assets from.

-p, --personal-access-token

The Specify Personal Access Token used to authenticate your actions.

Need a personal access token?

-R, --rules

Rules Specify will follow to generate design tokens and assets in your desired output format.

--dry-run

Execute command without actually writing files. Use this flag to test the output of a configuration without generating files.

Raycast

Learn to get and use your design tokens and assets right from Raycast.

Our Raycast extension helps you search your design tokens and assets and use them in your favorite tools: Notion pages, Pitch presentations, Slack discussions, etc.

Prerequisites

Please make sure you have:

installed
A Specify account
A Specify repository containing some design tokens and/or assets
Generated a Personal Access Token for Raycast

Need a personal access token?

Supported Token types

You can sync the following in Raycast:

color
bitmap
vector

Installation

Install the Specify Raycast extension from the Raycast store
Set your newly created Personal Access Token in Raycast

Usage

Search colors

Are you looking for a specific color from your design system? Open Raycast and type in Search Colors.

The main action is to copy the hexadecimal value of your color. You can also access other actions like copying the value in RGBA or the name of the color by accessing the action menu via Cmd + K.

Search bitmaps

Are you looking for a .jpg or .png file, such as a logo or photo of a team member? As with the previous search, open Raycast and type in Search Bitmaps.

Search vectors

Are you looking for a .svg file, such as a logo or an icon? Just open Raycast and type in Search Vectors.

Useful links

/** * @enum {string} All the valid paths for the collection colors. * Use it when calling `getColorsTokenByMode` */ export const colorsColorPath = { 'colors.Core.blue-100': 'colors.Core.blue-100', 'colors.Core.blue-700': 'colors.Core.blue-700', 'colors.semantic.background.button.primary.hover': 'colors.semantic.background.button.primary.hover' } as const; export type colorsColorPathType = keyof typeof colorsColorPath; export type colorsPathType = colorsColorPathType; /** * All the modes of the collection colors. * Use it when calling `getColorsTokenByMode` */ export const colorsModes = [ 'light', 'dark' ] as const; export type colorsModesType = typeof colorsModes[number]; /** * All the tokens of the collection colors. * Use `getColorsTokenByMode` to retrieve the tokens */ export const colors = { 'colors.Core.blue-100': { dark: 'rgb(229, 29, 29)', light: 'rgb(255, 255, 255)' }, 'colors.Core.blue-700': { dark: 'rgb(229, 0, 0)', light: 'rgb(255, 200, 255)' }, 'colors.semantic.background.button.primary.hover': { dark: 'rgb(229, 29, 29)', light: 'rgb(255, 200, 255)' } } as const; /** * Retrieve a token for the collection 'colors'. * @param {keyof typeof colorsPath} path - The path to the token * @param {'light' | 'dark'} mode - The mode of the token you want to retrieve * @returns {number | string} The value of a token for a given mode */ export function getColorsTokenByMode<T extends colorsPathType, M extends keyof typeof colors[T]>(path: T, mode: M) { if (!colors[path]) { throw new Error("Path: '" + path + "' doesn't exist for collection 'colors'. Here are all the valid paths for each type:" + ` - color: - colors.Core.blue-100 - colors.Core.blue-700 - colors.semantic.background.button.primary.hover`) } if (!colors[path][mode]) { throw new Error("Invalid mode '" + mode.toString() + "' for collection 'colors' at path '" + path + "', here are all the valid modes:\n- " + Object.keys(colors[path]).join('\n- ')) } return colors[path][mode] }

Figma Variables & Styles

In this guide, you’ll learn how to sync your Figma Variables and/or Styles to a Specify Repository and how to keep them updated.

Before getting started

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

A Specify Account
A Figma file containing Variables and/or Styles

1. Sync your Figma Variables and Styles with a Specify Repository

Access your Figma file which includes the Variables and/or Styles you would like to sync to Specify
the Specify Widget in the Figma file which includes your Variables and/or Styles. Or update the widget if you already have it. To update the Specify Widget you have to disconnect it, remove the entire frame in all of your Figma files, and reopen the latest version of the Widget.

2. Connect your Specify account

Follow the steps in the widget to connect your account. You will need to create a personal access token and you will need to add the link to the Figma file to which the widget is added.
Click "Connect"
Choose Advanced Repository

Note: the widget can be used for syncing Figma Styles from the Classic repositories as well, you can switch between the two by clicking "Switch to".

3. Create a repository in Specify

Go to your Specify workspace
Click on "Create repository"
Choose a name

Go back to your Figma file that includes the Variables and/or Styles
Click on "Create Source" in the Specify Widget
It will show you the local collections and styles that are detected

Make sure to understand that only Advanced repositories are listed here.

5. Sync updates variables and styles on the fly

Use the Sync button to update your Variables and/or Styles with Specify. Now you are ready to ! 🎉

6. Check or delete your source inside the Specify interface

You will see the category of design tokens that are synced on the left-hand side
In the Sources section (left-hand menu), you will see your connection(s) and when the last sync between your Figma file and Specify repository has occurred.
Delete your source by clicking on the 3 dots option menu in the source card.

Tokens Studio

In this guide you’ll learn how to sync your design tokens from Tokens Studio to your Specify repository and how to keep them updated.

Before getting started

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

A Specify account
The plugin installed in your Figma
A , , , or account

Specify automatically fetches design tokens through the JSON file created by Tokens Studio. The best way to keep your design tokens in sync with both tools is to host your JSON file in a repository like GitHub.

1. Sync your design tokens from Tokens Studio to a provider

Head to your Tokens Studio plugin in Figma
Within the settings tab, add a new sync provider
Commit your Tokens Studio JSON file to your repository

You can also manually export your file from Tokens Studio and upload it manually to your code repository. Click on Tools on the bottom left of the plugin and Export to file/folder. Be careful to tick all the boxes before exporting. We are not supporting multiple files at the moment.

2. Add your JSON file from a provider to your Specify Repository

Go to your Specify workspace
Click on "Create repository"
Choose "Advanced Repository"

At this point, you have two ways to sync your JSON file. Either with a public hosting link or a private one. We will go through both options below.

From a public URL

In the "Source" tab, click on "Create a source"
Select "Remote URL"
Select "Public"

Your JSON file is now detected as a source and your design tokens appear within your repository.

From a private URL

On the opposite of the public URL, Specify will ask you for some additional information so its system is able to fetch your file. Let’s see how to proceed with the main versioning tools:

GitHub

Requirements:

Have a GitHub account
Have an Advanced Repository created
Have a JSON file containing design tokens from Tokens Studio

To add a private URL source from GitHub to Specify:

In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"

Azure DevOps

Requirements:

Have an Azure DevOps account
Have a Project containing a repository
Have a JSON file containing design tokens from Tokens Studio

To add a private URL source from Azure DevOps to Specify:

In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"

GitLab

Requirements:

Have a GitLab account
Have an Advanced Repository created
Have a JSON file containing design tokens from Tokens Studio

To add a private URL source from GitLab to Specify:

In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"

JSONBin

Requirements:

Have a JSONBin account
Have an Advanced Repository created
Have a bin with a JSON file containing design tokens from Tokens Studio

To add a private URL source from JSONBin to Specify:

In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"

3. How to update your JSON File

After adding your source. All you have to do is to:

Go to the "Source" tab of your Specify repository
Click on the context menu next to your source
Click on "sync"

Your source is now updated!

4. Non-supported design token types

Please keep in mind Specify is yet not compatible with the following data coming from Tokens Studio:

Composition
Assets (bitmap & vectors)
Color manipulation (gradients, alpha, darken, lighten & mix)

They will be released in future updates. However, if you have urgent needs for Specify to be compatible with one of them, .

/** * @typedef {'primitive.spacing.1'} DimensionPath - All the valid paths for the tokens of type dimension. * To use this type you can do: `@type {import('path/to/myTokensFile').DimensionPath}` */ /** * @typedef {'themedColor.highEmphasis'} ColorPath - All the valid paths for the tokens of type color. * To use this type you can do: `@type {import('path/to/myTokensFile').ColorPath}` */ /** * @typedef {DimensionPath | ColorPath} AllPath - All possible paths */ /** * @typedef {typeof pathsByType} PathsByType - All the paths for a given token type. Needed for `getTokensByType` */ const pathsByType = /** @type {const} */ ({ dimension: [ 'primitive.spacing.1' ], color: [ 'themedColor.highEmphasis' ] }); /** * @typedef {typeof colorModes[number]} ColorModes - All the valid modes of color. * To use this type you can do: `@type {import('path/to/myTokensFile').ColorModes}` */ export const colorModes = /** @type {const} */ ([ 'dark', 'light' ]); /** * @typedef {typeof themedColorModes[number]} ThemedcolorModes - All the valid modes of themedColor. * To use this type you can do: `@type {import('path/to/myTokensFile').ThemedcolorModes}` */ export const themedColorModes = /** @type {const} */ ([ 'light', 'dark' ]); /** @typedef {ColorModes | ThemedcolorModes} AllMode - All the available modes */ /** * @typedef {typeof tokens} Tokens - All the tokens. * Use `getTokenByMode` to retrieve one. */ export const tokens = /** @type {const} */ ({ 'primitive.spacing.1': '4px', 'themedColor.highEmphasis': { dark: '#ffffff', light: '#000000' } }); /** * Retrieve any token for a given mode. If available, the default mode will be: 'default' * @template {AllPath} Path - A generic extending all the possible paths * @template {Tokens[Path] extends Record<string, any> ? keyof Tokens[Path] : undefined} Mode - A generic representing all the valid modes for a given path * @template {Tokens[Path] extends Record<string, any> ? Tokens[Path][Mode extends undefined ? never : Mode] : Tokens[Path]} Return - The return type * @param {Path} path - The path to the token * @param {Mode} mode - The mode of the token you want to retrieve * @returns {Return} - The value of a token for a given mode */ export function getTokenByMode(path, mode) { if (!tokens[path]) { throw new Error("Path: '" + path + "' doesn't exist. Here are all the valid paths:\n- " + Object.keys(tokens).join('\n- ')) } if (typeof tokens[path] !== 'object') { return tokens[path] ; } if (!mode) throw new Error('Mode is undefined but it should be one of ' + Object.keys(tokens[path]).join(', ') + ' for path: ' + path); if (!tokens[path][mode]) { throw new Error("Invalid mode '" + mode.toString() + " at path '" + path + "', here are all the valid modes:\n- " + Object.keys(tokens[path]).join('\n- ')) } return tokens[path][mode] } /** * Retrieve all the tokens for a specific type (color, dimension, etc...). * Note that the value will either be a string or an object if the token has modes * @template {keyof PathsByType} Type - A generic extending all the possible types * @template {Tokens[PathsByType[Type][number]]} Token - A generic representing a union of all the outputs * @param {Type} type - The path to the token * @returns {Array<Token>} - An array with all the values */ export function getTokensByType(type) { if (!pathsByType[type]) { throw new Error('The type: \'' + type + '\' does not exist') } return pathsByType[type].map(path => tokens[path]); }

{ "colors": { "$collection": { "$modes": [ "light", "dark" ] }, "aliases": { "border": { "active": { "$type": "color", "$value": { "dark": { "$alias": "colors.core.label.blue-base", "$mode": "dark" }, "light": { "$alias": "colors.core.label.blue-base", "$mode": "light" } } } } }, "core": { "label": { "blue-base": { "$type": "color", "$value": { "dark": { "model": "rgb", "red": 96, "green": 168, "blue": 250, "alpha": 1 }, "light": { "model": "rgb", "red": 17, "green": 125, "blue": 249, "alpha": 1 } } }, "blue-lighter": { "$type": "color", "$value": { "dark": { "model": "rgb", "red": 41, "green": 52, "blue": 67, "alpha": 1 }, "light": { "model": "rgb", "red": 219, "green": 236, "blue": 254, "alpha": 1 } } } } } }, "dimensions": { "$collection": { "$modes": [ "desktop", "mobile" ] }, "base": { "dimension-01": { "$type": "dimension", "$value": { "mobile": { "value": 2, "unit": "px" }, "desktop": { "value": 4, "unit": "px" } } }, "dimension-02": { "$type": "dimension", "$value": { "mobile": { "value": 4, "unit": "px" }, "desktop": { "value": 8, "unit": "px" } } } } } }

Configuration

Learn more about how to configure Specify to generate design tokens and assets fitting your company standards.

Introduction

By default, without any parsers, Specify returns your design data as raw data:

Design tokens are returned in JSON
Assets are returned as files

A configuration file helps you:

request design tokens and assets from a Specify repository
transform them to fit your company standards thanks to rules, token types and parsers.

Properties

A configuration is composed of 3 main properties:

repository
personalAccessToken
rules

Repository

The name of the Specify repository you want to pull your design tokens and assets from.

Let's say we have the following repository in Specify called "all-design-data" located in the "@acme-inc" organization.

We target it like this:

You can only target one repository per configuration file. Want to pull design tokens from several Specify repositories? Create a several configuration files and run them with the Specify CLI.

Personal Access Token

The Specify personalAccessToken used to authenticate your actions.

Need a personal access token?

Rules

Rules help you transform your design tokens and assets the way you want.

You can have as many rules as you want and you can have rules that transform several at once.

A rule is composed of the following properties:

Name

Type

Required

Description

Parsers

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.

Inside a configuration, a parser has the following properties:

Name

Type

Required

Description

Example

Here's a rule named "Design Tokens" that:

targets color and measurement design tokens
sorts them alphabetically by their name

Examples

How to run these examples

The following examples are made to be used with the Specify CLI.

Requirements:

a Specify repository containing design tokens
a valid personal access token ()

Run all examples by copying the code and running the specify pull command.

Basic

Here's a basic configuration file that targets a Specify repository called all-design-data from the @acme-inc organization:

This example config file will return a design-tokens.json file containing all design tokens and assets stored in the all-design-data repository.

Here's an example of a token value returned by Specify:

Pull colors as CSS Custom Properties

Now let's update our previous configuration to only pull colors and transform them as CSS Custom Properties in HSL.

Here is the input returned by Specify and the output generated by Specify after executing our configuration.

Token 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 with rules and parsers.

Introduction

Types define every type of design token and asset Specify is compatible with. Use them to target specific types of design tokens and assets you want to pull from Specify.

In Specify, types are displayed as "categories" of design data you can create and find in your Specify repository.

Specify is compatible with the following design tokens and assets under the TokenType type.

Design tokens

Border

A border is a line surrounding a UI element. According to your target platform capabilities, you can define the border to go inside (inner border), outside (outer border), or between them (center).

Borders are considered as because they are composed of several design tokens.

Looking for border radius? You can add them as a type.

Color

Colors have meaning and support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements in your UI. Among all your design token types, color is surely one of the most important ones.

Depth

The Depth token type sets a UI element's position on the z-axis. More commonly called z-index on and zIndex on and .

Duration

Represents the length of time in milliseconds an animation or animation cycle takes to complete, such as 200 milliseconds (cf ).

Gradient

A gradient is the gradual blending from one color to another. It enables the designer to almost create a new color. It makes objects stand out by adding a new dimension to the design and adding realism to the object. In simple terms, gradients add depth.

Gradients are considered as because they are composed of several design tokens.

Measurement

Measurement or design tokens help you define size values.

Common design tokens can be defined from this type:

internal margins
external margins
a spacing scale

Opacity

Opacity design tokens help you set the opacity of UI elements.

Shadow

Shadows help you communicate components elevation in your UIs. Popular variations and names include box-shadow, drop shadow, and many more.

Shadows are considered as because they are composed of several design tokens.

Text Style

Text styles or typography helps your UI be usable. They create balance, hierarchy and structure for your content. Some say that "Web is 95% typography". To push this even further let's say UI are 95% typography. In other words, pay a great deal of attention to typography.

A text style is composed of several child design decisions that could be considered as single design tokens like:

a line-height
a font size
a letter spacing

Text styles are considered as because they are composed of several design tokens.

Example

Assets

Bitmap

Bitmaps are raster images you can use in many contexts. They are basically any image you can display in a UI that is a .png, .jpeg, .webp, .avif...

Font

Fonts are files containing typefaces used by your text styles.

In Specify, all font files are stored as .ttf files by default. You can pull and convert them on the fly thanks to the parser.

Vector

By "vectors" we mean vector images (e.g., SVG and PDF files). You can use them for 2 main purposes: iconography and illustration. In the following section we will only focus on icons.

Icons act a visual aids to help users complete tasks. We advise you to have an harmonic set of icons you can use to draw attention to specific actions.

V1

Getting started

Introduction

Getting started

hashtagIntroduction

hashtagBefore getting started

hashtag1. Install the CLI

hashtag2. Create your Specify config file

hashtag3. Add your Specify repository

hashtag4. Add your personal access token

hashtag5. Pull your design tokens and assets

Glossary

hashtagDesign API

Advanced Repository

Getting started

hashtagIntroducing the Specify Design Token Format

CLI & Config

hashtag1. Install the CLI

hashtag2. Create your Specify configuration file

hashtag3. Properties to update in the configuration file before using it:

hashtag4. CSS output example

GitHub

hashtagPrerequisites

hashtagInstallation

hashtagConnecting Specify and GitHub

hashtagUseful resources

to-css-custom-properties

hashtagInterface

hashtagOptions

hashtagBasic usage

to-style-dictionary

hashtagInterface

hashtag

to-typescript

hashtagInterface

hashtag

select-modes

hashtagInterface

hashtagOptions

hashtagBasic usage: select all tokens from a mode named "light"

convert-dimension

hashtagInterface

hashtagOptions

Templates

hashtagReady-to-use configuration templates for your next project

SDTF

Tailwind

Playground

hashtagIntroduction

hashtagUsage

Concepts

Best practices

hashtagSet your personal access token as a variable

hashtagUsing an .env variable in a config file in JavaScript

hashtagUsing a variable in a flag with the CLI

Apps & Tools

Overview

npm

hashtagWorkflow

REST API

hashtagIntroduction

hashtagWhat you can do with the REST API

hashtagEndpoint

hashtagParameters

hashtagPath Parameters

hashtagRequest Body

hashtagExample

hashtagErrors

hashtagAttributes

CLI

hashtagIntroduction

hashtagInstallation

hashtagCommands

hashtagInit

hashtagPull

hashtagSync

hashtagFlags

hashtag-C, --config-path

hashtag-r, --repository

hashtag-p, --personal-access-token

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. Pull your design tokens and assets

Design API

Introducing the Specify Design Token Format

1. Install the CLI

2. Create your Specify configuration file

3. Properties to update in the configuration file before using it:

4. CSS output example

Prerequisites

Installation

Connecting Specify and GitHub

Useful resources

Interface

Options

Basic usage

Interface

Interface

Interface

Options

Basic usage: select all tokens from a mode named "light"

Interface

Options

Ready-to-use configuration templates for your next project

Introduction

Usage

Set your personal access token as a variable

Using an .env variable in a config file in JavaScript

Using a variable in a flag with the CLI

Workflow

Introduction

What you can do with the REST API

Endpoint

Parameters

Path Parameters

Request Body

Example

Errors

Attributes

Introduction

Installation

Commands

Init

Pull

Sync

Flags

-C, --config-path

-r, --repository

-p, --personal-access-token

-R, --rules

--dry-run

Prerequisites

Supported Token types

Installation

Usage

Search colors

Search bitmaps

Search vectors

Design API

Destination

Pipeline

Repository

Token type

Configuration

Rule

Parser

Ready-to-use configuration templates for your next project

Introduction

Usage

Introducing the Specify Design Token Format

Useful links

Introduction

Before getting started

1. Install the CLI

2. Create your Specify config file

3. Add your Specify repository