Skip to content
Style-Dictionary logo, Pascal the chameleon. Style Dictionary

Examples

To get you started, there are some example packages included that you can use. You can take a look at the code on Github or you can use the CLI included to generate a new package using some of these examples. Here is how you can do that:

Terminal window
mkdir MyFolder
cd MyFolder
style-dictionary init [example]

Where [example] is one of: basic, complete.

Basic

View on Github

This example code is bare-bones to show you what this framework can do. Use this if you want to play around with what the Style Dictionary can do.

Complete

View on Github

This is a more complete package and should have everything you need to get started. This package can be consumed as a Cocoapod on iOS, as a node module for web, and as a local library for Android.

Advanced

View the folder

If you want to look at more advanced examples of possible applications and customizations of Style Dictionary, the examples/advanced folder on GitHub contains these extra folders:

  • assets-base64-embed shows how it’s possible to embed and distribute assets – like images, icons and fonts – directly as design tokens.
  • auto-rebuild-watcher shows how to setup a “watcher” that auto-rebuilds the tokens every time there is a change in the tokens.
  • component-cti shows how to write component tokens and still use the CTI structure.
  • create-react-app shows how to integrate Style Dictionary into a React application.
  • create-react-native-app shows how to integrate Style Dictionary into a React Native application.
  • custom-file-header shows how to define custom file headers and use them in output files.
  • custom-formats-with-templates shows how to generate custom output formats using templates, useful when you need to distribute your design tokens into your own pipelines or scripts.
  • custom-parser shows how to use custom parsers for token files.
  • custom-transforms shows how to use custom transforms (and transformGroups) to apply custom “transformations” to the design tokens.
  • flutter shows how to integrate with Flutter applications.
  • matching-build-files shows how to output files 1-to-1 with source files.
  • multi-brand-multi-platform shows how to set up Style Dictionary to support a multi-brand (for brand theming) and multi-platform (web, iOS, Android) solution, with token values depending on brand and platforms.
  • node-modules-as-config-and-properties shows how to use Javascript rather than JSON for configuration and token files.
  • npm-module shows how to set up a style dictionary as an npm module, either to publish to a local npm service or to publish externally.
  • referencing_aliasing shows how to use referencing (or “aliasing”) to reference a value -or an attribute– of a token and assign it to the value –or attribute– of another token.
  • s3 shows how to set up a style dictionary to build files for different platforms (web, iOS, Android) and upload those build artifacts, together with a group of assets, to an S3 bucket.
  • tokens-deprecation shows one way to deprecate tokens by adding metadata to tokens and using custom formats to output comments in the generated files.
  • transitive-transforms shows how to use transitive transforms to transform references
  • variables-in-outputs shows you how to use the outputReferences option to generate files variable references in them.
  • yaml-tokens shows how to use a custom parser to define your source files in YAML rather than JSON.

Do you think an example is missing?
Do you want to see another example added to the project?
Do you have a working example that we can add to the list?

Fantastic! Let us know by filing an issue.