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.
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.
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.
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)
- 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.
And now for the actual list of rules!
Breaking change in Stratos Tokens 2021
Only nodes (artboards, layers, groups, frames etc.) with names within {} are included in the output. Everything else is excluded. (Making rule #9 redundant).
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.
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!
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
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
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.
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
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!
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.
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
This rule is deprecated as of Stratos Tokens 2021! Only nodes (artboards, layers, groups, frames etc.) with names within {} are included in the export. Everything else is ignored.
Name it .dtignore and Stratos Tokens Appās render engine pretends itās not even there.
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.
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
- Click on Open project in Terminal.
- Enter npm run build
- Youāll see this:
- You now have native code for web, iOS and Android in your Stratos Tokens App project folder! š
Related articles
Thatās it!
Thanks for reading!
Fredrik ā Team Sketch2React
