Specify Docs
Specify ↗︎Changelog ↗︎Guide ↗︎
V1
V1
  • Getting started
    • Introduction
    • What is Specify?
    • Getting started
    • Glossary
  • Advanced Repository
    • Getting started
    • Figma Variables & Styles
    • Tokens Studio
    • CLI & Config
    • Querying a SDTF graph
    • GitHub
    • Parsers
      • to-css-custom-properties
      • to-style-dictionary
      • to-tailwind
      • to-sdtf
      • to-javascript
      • to-react-native
      • to-json
      • to-typescript
      • filter
      • select-modes
      • change-case
      • convert-color
      • convert-dimension
    • Templates
      • CSS Custom Properties
      • SDTF
      • Tailwind
    • REST API
    • Playground
  • Concepts
    • Token types
    • Configuration
    • Parsers
    • Templates
    • Best practices
  • Apps & Tools
    • Overview
    • GitHub
    • npm
    • GitLab
    • Bitbucket
    • Azure DevOps
    • REST API
    • CLI
    • Notion
    • Raycast
  • Useful links
    • Discord
    • YouTube
    • Twitter
    • Help Center
Powered by GitBook
On this page
  • Why you need parsers
  • What are parsers?
  • Categories
  • Technology
  • Utility
  • All parsers available

Was this helpful?

Edit on GitHub
Export as PDF
  1. Concepts

Parsers

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

PreviousConfigurationNextBest practices

Last updated 1 year ago

Was this helpful?

Why you need parsers

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

  • Design tokens are returned in JSON

  • Assets are returned as files

There are high chances you need to transform those design data to fit your needs. Parsers help you do just that.

What are parsers?

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

A parser does the following job:

  1. Receives design data as input

  2. Transforms this design data

  3. Returns the transformed data

The data returned by a parser can either be:

  • Design data that can be used by another parser coming next in your transformation pipeline

  • A file so it can be used by people, frameworks, or scripts

Parsers are what make Specify powerful and flexible. They help you be in total control of the design data you pull from Specify.

Parsers are ordered and takes specific input to generate specific output. This way, we can easily test the input coming from the previous parser to check if the whole parsers process will work.

Categories

Parsers are classified in 2 categories: technology and utility.

Technology

Technology parsers help you transform your design tokens to specific technologies and formats (CSS Custom properties, SCSS, Tailwind, a Javascript theme object compatible with React Native...)

Some examples:

Utility

Utility parsers take care of "smaller" transformation. Like converting a pixel value to rem or transforming a string to kebabcase.

Some examples:

All parsers available

Parser
Description
Usage Example

Apply camelcase function on specific keys from a design token.

Convert font in several formats.

Filter tokens and assets by their name using a regular expression.

Replace all the stroke and fill attribute raw color value by its corresponding design token as a CSS variable. If no design token match, the raw value will be left as is.

Apply kebabcase function on specific keys from a design token.

Have design tokens referencing other ones.

Omit keys from a design token not given in parameters.

Apply pascalcase function on specific keys from a design token.

Get only specific keys from a design token given in params.

Concatenate two strings.

Convert the value of a measurement design token from pixel to rem.

Replace any string matched by a regex by a new string.

Round any measurement design token with specific precision.

Apply snakecase function on specific keys from a design token.

Loop on several design tokens and sort them according to their respective key values.

Concatenate two strings.

Wrap SVG files within a JSX component.

Transform design tokens in CSS Custom Properties.

Create CSS @font-face rules to import your font files.

Create text styles as CSS classes.

Transform design tokens in JSS.

Generate .scss files containing Scss map and function / mixin to access the values of the tokens.

Transform design tokens in SCSS variables.

Format design tokens to create their corresponding TypeScript types.

All parsers are open source and available on .

Set a structured filename on your assets. It won't rename your asset but only add a new filename property on the asset object. The filename structure uses as a template engine.

Optimize vectors using .

Create a .

Format design tokens to create a theme compatible with the .

Transform design tokens to a JavaScript theme object compatible with .

Create text styles formatted as .

Generate configuration files for all your design tokens coming from Specify.

Format design tokens to create a theme compatible with the .

Format design tokens to create a theme compatible with the .

to-react-native
to-css-custom-properties
to-scss-variables
to-tailwind
convert-font
kebabcasify
px-to-rem
the following GitHub repository
camelcasify
Example
convert-font
Example
filter
Example
inline-css-variables-in-svg
Example
kebabcasify
Example
link-design-tokens
Example
name-assets-files-by-pattern
mustache
Example
omit
Example
pascalcasify
Example
pick
Example
prefix-by
Example
px-to-rem
Example
replace-string
Example
round-number
Example
snakecasify
Example
sort-by
Example
suffix-by
Example
svg-to-jsx
Example
svgo
svgo
Example
to-css-custom-properties
Example
to-css-font-import
Example
to-css-text-style
Example
to-dsp
Design System Package (DSP)
Example
to-flutter
Flutter specification
Example
to-jss
Example
to-react-native
React Native
Example
to-scss-map
Example
to-scss-mixin-text-style
SCSS mixins
Example
to-scss-variables
Example
to-style-dictionary
Style Dictionary
Example
to-tailwind
TailwindCSS specification
Example
to-theme-ui
theme-ui specification
Example
to-typescript-definition
Example
Parsers help you transform raw design tokens and assets returned by Specify to match your company standards
An example output pipeline that pulls colors from Specify, sorts them alphabetically and transforms them as CSS Custom Properties