Introducing Stratos Tokens App
A true story about defining design decisions in your design tool and ending up with production ready native code for web, mobile and desktop. The examples given in this article are made with Sketch App, but Stratos Tokens App does support Figma and InVision Studio as well.
A short walk down Memory Lane
When Team Sketch2React released the first version of their app Sketch2React alpha 1 back in May 2018, the app was not able to produce React code as output. We had Sketch2React without React… It was not until the marvelous release of Sketch2React v1 in February 2019 that React code output was a reality.
How come it took so long to produce React code export? The reason is that we got sidetracked…
On that sidetrack we made it possible to export Bootstrap-powered HTML code straight out of Sketch App ☄️💥
We realized that being able to export to HTML code was enough to produce prototypes, demos and even complete one-pagers straight out of Sketch App! Simply put:
HTML export held a lot of value on its own and was enough for a lot of people
But how is the HTML sidetrack related to Stratos Tokens App?
Excellent question! While we were developing Stratos App we realized that it was possible, with a small addition to our render engine (the Tropos engine), to generate design tokens as output from a design document! So to semi-quote Britney Spears (I never thought I would):
Ops, We did it again…
We got sidetracked again. That was because we realized a few things (again):
- Generating design tokens as output and generating complete React components are two widely different concepts.
- Generating design tokens requires less number of rules to learn (six rules) than the entire Sketch2React framework (God knows how many rules there are in there)
- By moving design token generation into a separate app, Stratos Tokens App, we would simplify both Stratos App and Stratos Tokens App (since they would contain one concept each)
- Design tokens are hotter than Carolina Reaper
- You can get native code for all platforms out of design tokens!
What is Stratos Tokens App?
Stratos Tokens App is the design tokens part of Stratos App. The two GUIs look a lot alike. Some menus and panes are rearranged. However, there are two major changes:
- The Stratos Tokens App’s project folder structure and content is very different from that of Stratos App
- We implemented support for Style Dictionary out of the box to provide possibility to generate native code for web, Android and iOS.
Please note that how you want to structure your design tokens is totally up to you. Stratos Tokens App is there to support your decisions — good and bad ones alike.
Why Style Dictionary?
When we started showing design tokens in Stratos App people immediately started asking questions like: Where’s the iOS code? How do I get the design tokens into my Android app?
That was not 100% obvious (not even to Team Sketch2React) at that time. So we did what we always do and started investigating…🕵️
In the end we found Amazon’s Style Dictionary to be the best tool to combine with Stratos Tokens App. We could add Style Dictionary to our Stratos Token App’s project setup utilizing style-dictionary from NPMjs and the basic Style Dictionary configuration file you get when you setup a Style Dictionary basic demo project.
In the same way as you would structure your Stratos Design Tokens in your design tool to match the structure of Material-UI’s themeing configuration (I wrote about this in a previous article) you can also structure your design document to match the structure of Style Dictionary.
In the end we found Amazon’s Style Dictionary to be the best tool to combine with Stratos Tokens App
Rules a.k.a. the boring stuff
In order for Style Dictionary to generate proper output, the input (JSON-files) needs to be structured in a certain way. The input (JSON-files) for Style Dictionary is the thing you, dear reader, control from within your design tool by structuring your layers, naming your elements and passing your design document into Stratos Tokens App (which generates the JSON for you).
Two examples of Style Dictionary’s rules:
- In order for Style Dictionary to generate color translations, the top-most folder must be named color.
- Style Dictionary picks its values from layers named value.
Style Dictionary configuration
Stratos Tokens App utilizes Style Dictionary’s basic configuration (we might change this in the future). You can find the configuration file (config.json) in the root of your Stratos Tokens App’s project folder and, if you want to, modify it to better suit your needs.
This is a lot to take in…
Fear not dear reader! In true Team Sketch2React spirit we will create tutorials 🎓 and epic documentation🏅 about Stratos Tokens App!
What does the future hold?
Where do we go from here? Like Buzz Lightyear would have said: To infinity and beyond!
We are currently ironing out the final details of Figma support in Stratos Tokens App. We’re also working on a CLI for Stratos Tokens App because automation is King! Furthermore, we’re also going to make tutorials and documentation about Stratos Tokens App and how to use it.
And of course, we are also finalizing the Stratos App alpha 2 release! ✅
A lot of exciting stuff going on (at least we think so 🥳)
Thanks for reading!
Fredrik — Team Sketch2React
