Solutions

Resources

Pricing

Solutions

Resources

Pricing

Solutions

Resources

Pricing

It’s all about design scalability

Mode 1

Mode 2

Mode 3

Shadow

Text Styles

Heading 1

Heading 2

Subtitle

Spacing

Font

Inter Regular

Inter Medium

Inter SemiBold

Color

We couldn’t find any color tokens

in your sources

Make sure that your file includes colors and that your source settings are properly configured.

Add source

Connect

Figma

Get and sync design decisions from your Figma documents.

Create a repository

Repositories are "folders" containing your design tokens and assets collected from sources.

Repository name

@acme /

design-tokens

Cancel

Create repository

Members

Search by name or email

Invite people

Jane Doe

jane.doe@specifyapp.com

Jane Doe

jane.doe@specifyapp.com

Jane Doe

jane.doe@specifyapp.com

Getting started

2/5

View more details

New Password

••••••••••••••••

Excellent

Your password is very safe. Great job!

Mode 1

Mode 2

Mode 3

Shadow

Spacing

Font

Inter Regular

Inter Medium

Inter SemiBold

Color

We couldn’t find any color tokens

in your sources

Make sure that your file includes colors and that your source settings are properly configured.

Add source

Connect

Figma

Get and sync design decisions from your Figma documents.

Getting started

2/5

View more details

Improve the quality and speed of your design deliveries

30

min

Time to invest to build a custom CI/CD pipeline that will save you tons of hours

99

Compatibility with existing design token formats, always working on the final 1%

1

click

That's what it takes to sync your tokens from design to all your target platforms

Automation

Smoothen your design-to-code process

Specify · Colors

Design System /

Specify · Colors

100%

@acme

Disconnect

Variables

Refreshed on Oct 3, 2:59 pm

Create source

Shopify Polaris DS

(1)

Design Tokens and Components

Active

Last synced 2 hours ago

Sync

Have a feature request?

Send feedback↗︎

3 Open

Update design tokens

Design Tokens

#1 opened 2 hours ago by github-actions

bot

Update design tokens

Design Tokens

#1 opened 45 minutes ago by github-actions

bot

Update design tokens

Design Tokens

#1 opened 2 minutes ago by github-actions

bot

Sync your Figma Variables and Styles by using the Specify Widget

Sync with Github, or use the CLI / Rest API to sync locally or with Gitlab, Bitbucket, Azure DevOps and more

Sync all design tokens to one Specify repository, no matter the source

Tokens Studio or JSON as a source for your design tokens

Use automation to receive pull requests in your codebase when a design decision is made

Use Specify as your source of truth, never miss an updated design token

Handover

Improve handovers between design and engineers

Be autonomous and stay productive in your daily environment

Unified design token language

Reduce time-to-market

Confidence about the state of your design system

Color

Font

Inter Regular

Inter Medium

Inter SemiBold

Spacing

Vector

Text Styles

Heading 1

Heading 2

Subtitle

Color

Shadow

Text Styles

Body XL - Regular

Body M - Regular

Body S - Regular

CSS

Tailwind

React Native

/* tokens.css */
:root {
  --primitive-spacing-1: 4px;
  --primitive-spacing-2: 8px;
}
[data-theme="light"] {
  --high-emphasis: #262626;
}
[data-theme="dark"] {
  --high-emphasis: #ffffff;
}

Output

Multi-platform

Versatile design token generation for all platforms and frameworks

tokens.json

{
  "primitive": {
    "spacing": {
      "1": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 4,
            "unit": "px"
          }
        }
      },
      "2": {
        "$type": "dimension",
        "$value": {
          "default": {
            "value": 8,
            "unit": "px"
          }
        }
      }
    }
  },
  "themedColor": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "high-emphasis": {
      "$type": "color",
      "$value": {
        "light": {
          "model": "hex",
          "hex": "#262626",
          "alpha": 1
        },
        "dark": {
          "model": "hex",
          "hex": "#ffffff",
          "alpha": 1
        }
      }
    }
  }
}

Input

CSS

Tailwind

React Native

/* tokens.css */
:root {
  --primitive-spacing-1: 4px;
  --primitive-spacing-2: 8px;
}
[data-theme="light"] {
  --high-emphasis: #262626;
}
[data-theme="dark"] {
  --high-emphasis: #ffffff;
}

Output

Tailored code customization

Generate design tokens compatible with React, Vue, CSS, Tailwind, React Native, and more.

Cross-Platform SVG icons

Optimize SVG icons for all platforms, converting them into JSX components for React and React Native, and more.

Full control over your code

Integrate Specify in your codebase with ease. You control what Specify generates for you and where in your git repository.

source of truth

Create a single source of truth for your design tokens

Design Tokens available for everyone regardelss of Figma account ownership

See which tokens were updated by any team member in a glance and real time

Organize your design tokens however you want following your design system structure.

Easily see and use your design tokens and assets from our Raycast extension

Maud

Allan

Louis

Component

Automatically update the styling of your components

storybook.specifyapp.com

Button

Label

$bgcolor-primary

#624DE3

$bgcolor-primary

#D23197

Link Specify to Storybook and update design tokens, assets and the styling of your components

Generate design tokens for any framework (React, Vue, Angular, Svelte...) and styling library (Emotion, Styled Components, Tailwind...)