The Nine Rules of Stratos Design Tokens

Finally Team Sketch2React has created a design document containing examples of all the rules available in Stratos Tokens App!

We’ve created the demo document in Sketch App, Figma and InVision Studio as well.

Before we start

In order for our apps (Sketch2React, Stratos Components and Stratos Tokens) to avoid the Infinite Spinner of Doom (you’ll know it when you see it) your design document needs to have a page named Start here which contains an artboard/frame named Start.

When you open a project in Stratos Tokens App (or any other of our apps), the app’s render engine searches your design document to find an artboard/frame named Start on a page named Start here. Always.

This artboard/frame is then translated into Stratos Design Tokens and presented to the user.

Image for post

“Start here” and “Start”

Very very important!

You need to visit an artboard/frame within the Stratos Tokens App in order for it to be added to the project folder. Just click on the name of the artboard/frame in the Explorer view under the Canvas section.

Image for post

Click on an artboard/frame name to add it to the project folder

Stratos Tokens App has a functionality called hot-reload for Sketch– and InVision Studio files (Stratos Tokens App automagically refreshes it’s UI when you make changes to your design document from your design tool!?).

Figma documents does currently not support hot-reload since it’s data is loaded via an api (while Sketch– and InVision Studio files are read from your computer. Sketch Cloud documents also have a “local representation” on your computer). You need to manually press the refresh-button to load the latest changes made to your design document.

Image for post

It’s the button at the top right corner of the UI

Hooweveeer..

Even if the UI is refreshed and Stratos Tokens App has your latest design changes, you still need to revisit the artboard/frame in order for it to update the files in your project folder!

This is done automatically for the artboard named Start, because that is always loaded by default.

Also very very important!

For each artboard/frame you visit within Stratos Tokens App you also get two additional files, e.g Start artboard/frame creates:

  • start.js — Contains exportable Javascript code that is used by Stratos Token App’s NPM export (The little download icon on the left-side menu)

Image for post

The .js files are located in /data/js in your project folder

  • start.json — Json formatted Design tokens generated based on the content of the artboard/frame Start. This file is used as input for Style Dictionary.

Image for post

The .json files are located in /data/json in your project folder

And now for the actual list of rules!

1. You need to have a artboard/frame named Start. It needs to be there in order for our app to work its magic

Like I wrote in the previous section, this is very, very important.

 

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

2. The structure of nested Groups in the design document defines the structure of the output Json data

For better or worse, you have absolute freedom over your design tokens structure. Just remember what Uncle Ben (not the rice-guy) said : With great power comes great responsibility. Make sure you structure something that is maintainable and scalable!

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

3. Rectangles represent a color value based of the rectangle’s fill value

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

4. Rectangles without a fill outputs three properties: thickness, color and radius based on the rectangle’s border

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

5. Text layers represent text formatting

The name of the text layer can be anything like h1, h2, header, footer, anything you’d like.

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

6. Text layers with values within { } are evaluated

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

7. Text nodes with values within {{ }} are considered Style Dictionary references / shortcuts to be able to reuse values.

These can also refer between artboards/frames. Just make sure you’ve visited (in Stratos Tokens App) the artboard/frame which contains your value!

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

8. Text layers with names that matches a CSS property will have only that CSS property’s value

As opposed to plain Text layers, which will contain all CSS properties (rule #5), the output of this Text layer will only be the value of that specific CSS property.

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

9. Groups, Texts and Rectangles named .dtignore are ignored in the Stratos Token output

Name it .dtignore and Stratos Tokens App’s render engine pretends it’s not even there.

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

Added Bonus

Included in the demo design document we’ve created is also an artboard/frame named Style Dictionary specific. This shows you how to set up a basic structure that Style Dictionary can read and understand.

Image for post

What you have set up in Sketch App/Figma/InVision Studio

Image for post

What the output looks like in Stratos Tokens App

Don’t forget that you also get a .js- and a .json file under Explorer view/Files/data!

Build for Style Dictionary

  • Visit the artboard named Style Dictionary specific

Image for post

  • Click on Open project in Terminal.

Image for post

  • Enter npm run build

Image for post

  • You’ll see this:

Image for post

  • You now have native code for web, iOS and Android in your Stratos Tokens App project folder!

That’s it!

Thanks for reading!

Fredrik — Team Sketch2React

Leave a Reply