Solutions

Resources

Start for free

Solutions

Resources

Start for free

Solutions

Resources

Start for free

It’s all about design scalability

It’s all about design scalability

It’s all about design scalability

It’s all about design scalability

Start for free

Mode 1

Mode 2

Mode 3

Shadow

S

M

L

Text Styles

H1

Heading 1

H2

Heading 2

H3

Subtitle

Spacing

1

2

3

4

5

6

4

8

16

24

40

64

Font

aA

Inter Regular

aA

Inter Medium

aA

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

S

M

L

Spacing

1

2

3

4

5

6

4

8

16

24

40

64

Font

aA

Inter Regular

aA

Inter Medium

aA

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

Mode 1

Mode 2

Mode 3

Shadow

S

M

L

Text Styles

H1

Heading 1

H2

Heading 2

H3

Subtitle

Spacing

1

2

3

4

5

6

4

8

16

24

40

64

Font

aA

Inter Regular

aA

Inter Medium

aA

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

S

M

L

Text Styles

H1

Heading 1

H2

Heading 2

H3

Subtitle

Spacing

1

2

3

4

5

6

4

8

16

24

40

64

Font

aA

Inter Regular

aA

Inter Medium

aA

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!

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

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

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

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

Share

100%

@acme

@acme

@acme

Disconnect

Disconnect

Disconnect

Variables

Variables

Variables

Refreshed on Oct 3, 2:59 pm

Refreshed on Oct 3, 2:59 pm

Refreshed on Oct 3, 2:59 pm

Create source

Create source

Create source

Shopify Polaris DS

Shopify Polaris DS

Shopify Polaris DS

(1)

(1)

(1)

Design Tokens and Components

Design Tokens and Components

Design Tokens and Components

Active

Active

Active

Last synced 2 hours ago

Last synced 2 hours ago

Last synced 2 hours ago

Sync

Sync

Sync

Have a feature request?

Have a feature request?

Have a feature request?

Send feedback↗︎

Send feedback↗︎

Send feedback↗︎

3 Open

3 Open

Update design tokens

Update design tokens

Update design tokens

Design Tokens

Design Tokens

Design Tokens

#1 opened 2 hours ago by github-actions

#1 opened 2 hours ago by github-actions

#1 opened 2 hours ago by github-actions

bot

bot

bot

Update design tokens

Update design tokens

Update design tokens

Design Tokens

Design Tokens

Design Tokens

#1 opened 45 minutes ago by github-actions

#1 opened 45 minutes ago by github-actions

#1 opened 45 minutes ago by github-actions

bot

bot

bot

Update design tokens

Update design tokens

Update design tokens

Design Tokens

Design Tokens

Design Tokens

#1 opened 2 minutes ago by github-actions

#1 opened 2 minutes ago by github-actions

#1 opened 2 minutes ago by github-actions

bot

bot

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

Start for free

Color

Font

aA

Inter Regular

aA

Inter Medium

aA

Inter SemiBold

Spacing

1

2

3

4

5

6

4

8

16

24

40

64

Vector

Text Styles

H1

Heading 1

H2

Heading 2

H3

Subtitle

Color

Shadow

S

M

L

Text Styles

P

Body XL - Regular

P

Body M - Regular

P

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

Maud

Allan

Louis

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...)

Start automating
your design system today

Start for free

Start automating
your design system today

Start for free

Start automating
your design system today

Start for free

Start automating
your design system today

Start for free