examples

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:

$ 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 or sending us an email: [email protected].