Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
Explore the docs »
Report Bug
·
Request Feature
·
Join Our Discord
·
Twitter
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets—automatically.
By default, without any parsers, Specify will return your design data as raw data:
There are high chances you need to transform those design data to fit your needs. Parsers help you do just that.
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:
The data returned by a parser can either be:
Not only parsers are what make Specify powerful and flexible, but above all, they help you be in total control of the design data you synchronize.
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.
Parser | Description | Usage example |
---|---|---|
camelcasify | Apply camelcase function on specific keys from a design token. | Example |
convert-font | Convert font files in several formats. | Example |
filter | Filter tokens and assets by their name using a regular expression. | Example |
inline-css-variables-in-svg | Replace harcoded design token values in a SVG by their corresponding CSS custom property. | Example |
kebabcasify | Apply kebabcase function on specific keys from a design token. | Example |
link-design-tokens | Have design tokens referencing other ones. It replaces absolute values by their potential corresponding design token. | 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 |
px-to-rem | Convert the value of a measurement design token from pixel to rem. | Example |
prefix-by | Prefix a string or a whole file by a string. | 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-jss | Transform design tokens in JSS. | Example |
to-flutter | Transform design tokens for Flutter. | 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 | Create a theme compatible with the TailwindCSS specification. The theme is also compatible with WindiCSS. | Example |
to-theme-ui | Create a theme compatible with the theme-ui specification. | Example |
to-typescript-definition | Generate TypeScript types corresponding to Specify Token types. Their respective values match the name of your design tokens returned by Specify. | Example |
Let's say you want to create a parser named my-parser
.
parsers
, create a directory named my-parser
To be valid, your parser needs:
README.md
file containing:
my-parser.spec.ts
file containing your parser's unit testsmy-parser.parser.ts
fileFor now, our parsers only use the following libraries:
If you need another library to develop your parser:
yarn
or npm
parsers/global-libs.ts
fileTo easily create and test your parsers, we advise you to use them on design tokens provided in the seeds.json
file.
It will allow you to use our fake tokens to test your parsers.
To use our design tokens seed:
import * as seeds from '../../seeds.json';
seeds.tokens
variable according to your needs.yarn test
to tests your parsersIf you want to use your own tokens to test your parsers against, you can pull down your tokens in JSON format using the Specify CLI with the following configuration:
rules: [
{
"name": "design tokens",
"path": "tokens.json"`,
},
],