From Design tool to Design Tokens using Stratos Tokens App

TLDR; Stratos Tokens App reads the raw design file (no plugins) and generates a design token file (JSON-format). This file can then be either stored directly in your codebase or uploaded to repositories like NPMjs to be consumed by any codebase on any platform. And it’s 1:1 with your design file!

So, do I need to sell my soul or sacrifice a unicorn in order to achieve this?

No! Rest assured. Team Sketch2React is not in the soul-trading business and we would never harm anyone, least of all a unicorn. What does a unicorn eat anyway? Magic?

Back to design tokens…

You visually represent your Design Tokens in a design tool. (Sketch App, Figma and InVision Studio are supported).

Example structure in your Sketch App document

Stratos Tokens App reads your design file (without plugins, yupp, just like that) and generates a file with a JSON structure containing your design data. Then you either save the design data file (Design Tokens) or upload it to a repository like NPMjs.

Generated JSON-structure in Stratos Tokens App

The structure of the output JSON is a direct reflection of the structure in your design document.

Please note that above is just an example of how to structure your Design Tokens. It’s up to you to create your own structure.

What! Rules? Oh man….

There are nine design rules that you need to follow in order to create this kind of magic(/unicorn food?). You find listed here:

The Nine Rules of Stratos Design Tokens

What do I do next?

You open Stratos Tokens App and create a new project. To this project you link your design token design file. In this example I will name my project stratos-designtokens-demo.

You click on the file explorer and select the artboard named Template.

This design data structure is now available from three places:

• Direct copy/paste
• As a stand-alone file in the project’s data folder.
• Downloadable as NPM-project

NPM project? Oooh, tell me more…

Ok, sure. There are a few steps, but stay with me, it’s worth it. In the example below my new design tokens NPM package is named stratos-designtokens-demo. You can name yours whatever you like.

If you don’t have the time/patience to read through all the steps; here’s the final example package install command:

npm install — save stratos-designtokens-demo

Otherwise read on!

It’s a big button, you can’t miss it.

• On the Download tab in Stratos Tokens App, expand the Design tokens NPM project and hit the Download NPM button
• Store the project anywhere you like

Your downloaded NPM project’s package.json

• Open the file package.json in your downloaded NPM project’s folder using your favorite code editor
• Enter a name on line 2 (this will be the name of the NPM package)

• Open Terminal App
• Go to your downloaded NPM project’s folder (I’ve named mine npmDTDemo)
• If this is your first time uploading a package to NPMjs you need to login
• Enter npm login and enter your credentials (you need an account at www.npmjs.com)
• Enter npm install (a bunch of texts will flash by, no worries, this is ok)
• Enter npm run build (more text will flash by, this is also ok)
• Enter npm publish (even more ok text)

Your design data file containing your Design Tokens is now available to download from NPMjs

Your design tokens are now available for any codebase on any platform! And it’s 1:1 with your Design tool’s design document!

Feel free to download and test the design tokens example here:

npm install --save stratos-designtokens-demo

Example usage

React

Using my favorite code editor!

You can of course use this for other frameworks and platforms as well (i.e. React native, Vue.js, Angular, Android, Swift…

I’ve written a follow-up article about How to combine design tokens with Material-UI.

Thanks for reading!

Fredrik – Team Sketch2React