Parsers

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

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:

Receives design data as input
Transforms this design data
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.

All parsers available

All parsers are open source and available on the following GitHub repository.

Parser Description Usage Example

Parser	Description	Usage Example
camelcasify	Apply camelcase function on specific keys from a design token.	Example
convert-font	Convert font in several formats.	Example
filter	Filter tokens and assets by their name using a regular expression.	Example
inline-css-variables-in-svg	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.	Example
kebabcasify	Apply kebabcase function on specific keys from a design token.	Example
link-design-tokens	Have design tokens referencing other ones.	Example
name-assets-files-by-pattern	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 mustache as a template engine.	Example
omit	Omit keys from a design token not given in parameters.	Example
pascalcasify	Apply pascalcase function on specific keys from a design token.	Example
pick	Get only specific keys from a design token given in params.	Example
prefix-by	Concatenate two strings.	Example
px-to-rem	Convert the value of a measurement design token from pixel to rem.	Example
replace-string	Replace any string matched by a regex by a new string.	Example
round-number	Round any measurement design token with specific precision.	Example
snakecasify	Apply snakecase function on specific keys from a design token.	Example
sort-by	Loop on several design tokens and sort them according to their respective key values.	Example
suffix-by	Concatenate two strings.	Example
svg-to-jsx	Wrap SVG files within a JSX component.	Example
svgo	Optimize vectors using svgo.	Example
to-css-custom-properties	Transform design tokens in CSS Custom Properties.	Example
to-css-font-import	Create CSS `@font-face` rules to import your font files.	Example
to-css-text-style	Create text styles as CSS classes.	Example
to-dsp	Create a Design System Package (DSP).	Example
to-flutter	Format design tokens to create a theme compatible with the Flutter specification.	Example
to-jss	Transform design tokens in JSS.	Example
to-react-native	Transform design tokens to a JavaScript `theme` object compatible with React Native.	Example
to-scss-map	Generate `.scss` files containing Scss map and function / mixin to access the values of the tokens.	Example
to-scss-mixin-text-style	Create text styles formatted as SCSS mixins.	Example
to-scss-variables	Transform design tokens in SCSS variables.	Example
to-style-dictionary	Generate Style Dictionary configuration files for all your design tokens coming from Specify.	Example
to-tailwind	Format design tokens to create a theme compatible with the TailwindCSS specification.	Example
to-theme-ui	Format design tokens to create a theme compatible with the theme-ui specification.	Example
to-typescript-definition	Format design tokens to create their corresponding TypeScript types.	Example

camelcasify

Apply camelcase function on specific keys from a design token.

Example

convert-font

Convert font in several formats.

Example

filter

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

Example

inline-css-variables-in-svg

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.

Example

kebabcasify

Apply kebabcase function on specific keys from a design token.

Example

link-design-tokens

Have design tokens referencing other ones.

Example

name-assets-files-by-pattern

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 mustache as a template engine.

Example

omit

Omit keys from a design token not given in parameters.

Example

pascalcasify

Apply pascalcase function on specific keys from a design token.

Example

pick

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

Example

prefix-by

Concatenate two strings.