How it works 🧰
Stratos Tokens is a very powerful way of working directly from your design application with design tokens and themes.
Last updated
Stratos Tokens is a very powerful way of working directly from your design application with design tokens and themes.
Last updated
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!
You visually represent your Design Tokens in a design tool, Sketch and Figma are currently supported and we have macOS and Windows versions of our app.
The 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.
The structure of the output JSON is a direct reflection of the structure in your design document.
🤖👉 It’s up to you to create your own structure.
Please note that above is just an example of how to structure your design tokens & theming. It’s up to you to create your own structure.
We support Style Dictionary markup which is a great build system for outputting design tokens to a wide range of different formats. Support does not mean you can set this up however you want. You will need to follow Style Dictionary's structure and naming conventions for the auto-translation to do its magic. A great article to get you started understanding Style Dictionary is this one.
Basically you use shapes, lines, layer groups & text nodes to output design token data. Here's a few great things to know 🤖👇
Design token names must be wrapped in { } – including your design token artboards
The structure of nested Groups (Sidebar = Sketch, Layers Panel = Figma) in the design document defines the structure of the output JSON data
Rectangles represent a color value based of the rectangle’s fill value
Rectangles without a fill results in border formatting
Lines represent width, perfect for defining breakpoints, spacing & padding
Text layers represent text formatting
Text layers with values within { } are evaluated. Perfect for defining things like font families, transitions & animation timing
Text nodes with values within {{ }} are considered as Style Dictionary references / variables to be able to reuse values.
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; see bullet 6 above)
Start Sketch app and Create a New document
Create one artboard, the size does not matter
Give your artboard a simple name, lower case only, no blank spaces between words e.g {great-artboard-name}
Save your Sketch file to your HD
Drag and drop that Sketch file onto our app like in the video below
You are now ready to start creating design tokens straight from inside Sketch app
Go to your Figma Account Settings
Scroll down to the bit where it says Personal access tokens
Create a new personal access token
Copy the access token to notes or something similar
Go to Create New Project and select Figma
2. Paste your newly created Figma access token, no worries you only need to do this once, and it can be revoked if needed, more on that later.
Jump back to Figma and create a new file
Copy the URL of that Figma file
3. Paste the Figma file URL in our app 👉 Figma project url
Now we are ready to get going! Press Create Figma project
Figma files work differently than Sketch files in the sense that Figma doesn’t offer so called hot-reloading. Every time you do changes inside Figma you will need to press the little reload icon to update the design token tree.
In a future update, we’ll introduce time-saving shortcuts for this and other semi annoying things. Who doesn’t want extra seconds in life?
If you're using the awesome Auto Layout function in Figma make sure not to break the naming chain or you will break the design token output in Stratos Tokens.
Design token names must be wrapped in { } – including your design token artboards
Now you need to learn how our app and design token framework works, what rules you need to follow, how you can set up things, if you’re going to follow our built-in Style Dictionary support or not. We give you the choice.
A great starting point is reading this article. If you’re curious about learning how to setup for Style Dictionary we suggest you read this article.
Ok, sure. There are a few steps, but stay with us, it’s worth it. In the example below our 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:
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
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 (we named ours 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 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:
You can of course use this for other frameworks and platforms as well (i.e. React native, Vue.js, Angular...). And with a little help from our built-in Style Dictionary support you can also use your tokens for Android, Swift… 🤖💪
