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
Parsers help you transform raw design tokens and assets returned by Specify to match your company standards
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.
An example output pipeline that pulls colors from Specify, sorts them alphabetically and transforms them as CSS Custom Properties
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:
​to-react-native​
​to-css-custom-properties​
​to-scss-variables​
​to-tailwind​
Utility
Utility parsers take care of "smaller" transformation. Like converting a pixel value to `rem` or transforming a string to kebabcase.
Some examples:
​convert-font​
​kebabcasify​
​px-to-rem​
All parsers available
All parsers are open source and available on the following GitHub repository.
Name
Description
​camelcasify​
Apply camelcase function on specific keys from a design token.
​convert-font​
Convert font files in several formats: woff2, woff, otf, ttf, eot.
​filter​
Filter design tokens and assets by their name using a regular expression.
​inline-css-variables-in-svg​
Replace hardcoded design token values in a SVG string by their corresponding CSS Custom Property.
​kebabcasify​
Apply kebabcase function on specific keys from a design token.
​link-design-tokens​
Have design tokens referencing other ones. It replaces absolute values by their potential corresponding design token.
​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.
​omit​
Omit keys from a design token not given in parameters.
​pascalcasify​
Apply pascalcase function on specific keys from a design token.
​pick​
Get only specific keys from a design token given in params.
​px-to-rem​
Convert the value of a Measurement design token from pixel to rem.
​prefix-by​
Prefix a string or a whole file by a string.
​replace-string​
Replace any string matched by a regex by a new string.
​round-number​
Round any measurement design token with specific precision.
​snakecasify​
Apply snakecase function on specific keys from a design token.
​sort-by​
Loop on several design tokens and sort them according to their respective key values.
​suffix-by​
Concatenate two strings.
​svg-to-jsx​
Wrap SVG files within a JSX component.
​svgo​
Optimize vectors using svgo.
​to-css-custom-properties​
Transform design tokens in CSS Custom Properties.
​to-css-font-import​
Create CSS @font-face rules to import your font files.
​to-css-text-style​
Create text styles as CSS classes.
​to-dsp​
Create a Design System Package (DSP).
​to-jss​
Transform design tokens in JSS.
​to-flutter​
Transform design tokens for Flutter.
​to-react-native​
Transform design tokens to a JavaScript theme object compatible with React Native.
​to-scss-map​
Generate .scss files containing Scss map and function / mixin to access the values of the tokens.
​to-scss-mixin-text-style​
Create text styles formatted as SCSS mixins.
​to-scss-variables​
Transform design tokens in SCSS variables.
​to-style-dictionary​
Generate Style Dictionary configuration files for all your design tokens coming from Specify.
​to-tailwind​
Create a theme compatible with the TailwindCSS specification. The theme is also compatible with WindiCSS.
​to-theme-ui​
Create a theme compatible with the theme-ui specification.

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

Last modified 1mo ago