Table of contents

Resources

The best place for design token resources will always be Stu's awesome github repository, Awesome Design Tokens.

Want to get involved? Join the W3C Design Token Community Group!

Articles

Monorepo

Creating a design system monorepo

Oscar Diaz

A good overview on Lerna and Yarn workspaces for managing a design system as a mono-repo. It doesn't mention specifically anything about a design token package, but the concepts can be applied to a design token package in a mono-repo.

Skyscanner Backpack

This is a great example of a mono-repo with a design token package. Also the Android and iOS demo apps are great to look at and take inspiration from. I used some of their techniques in the Android and iOS demo apps for this workshop.

Figma

Figmagic

I have not used this plugin before, but found it when researching Figma design token plugins.

Figgo

I have not used this plugin before, but found it when researching Figma design token plugins.

Sketch

Sketch Constructor

This another library I built that allows you to read, write, and manipulate Sketch files without Sketch installed so you can generate a Sketch file as part of a build process or CI/CD pipeline.

Theming

How to manage your Design Tokens with Style Dictionary

Cristian Rastelli

I always refer back to this amazing article by Cristiano Rastelli. TBH I didn't know you could do this before this article came out. In it he describes their set up to have multiple brands sharing tokens with platform specific overrides as well.

Documentation

Documenting Design Tokens

Danny Banks

An article I wrote showcasing some ways design systems document their design tokens. It also has an appendix with links and sources of all the design systems featured in the article.

Finished project

If you want to skip to the end and just play around with the finished project, checkout the final branch.

git clone -b final https://github.com/dbanksdesign/clarity-2020-design-token-workshop.git

Or if you already have the repository:

git fetch && git checkout final

After you have the final branch pulled down, first install the NPM dependencies in the root of the package:

npm ci

Now you can run either the build or watch command to generate the token integration files for each platform. If you use watch it will keep the process open and watch for changes and rebuild.

npm run watch

Android

Now you can open the Android part in Android Studio, choose open Android Studio Project and select the android folder inside the project. Make sure you have Android API 29 SDK installed because that is what I used for this project. Android studio should take a minute or two to get ready. Then you should be able to press the play button to build the project to an Android emulator. Each time you change the design tokens you will need to rebuild the Android project.

iOS

Before you open the ios demo project you will need to run CocoaPods. Ensure you have CocoaPods on your computer sudo gem install cocoapods. Then cd into ios/demo and run pod install. After that is finished, open up the ClarityDesignTokensDemo.xcworkspace file with open ClarityDesignTokensDemo.xcworkspace. Hit that little play button and you are off!

Web

To run the web demo, first you need to link the top-level design token package. In the root directory of the project run npm link. Then go into the web/demo/ directory and install it's npm dependencies:

npm ci

Then you will need to link the token package again here:

npm link clarity-design-tokens

Now you can run npm start which should boot up Gatsby.

Thank you