Alter Your Stratos Tokens project’s Configuration to Supercharge Your Design Tokens
Stratos Tokens App is shipped with, out of the box support for Amazon Style Dictionary.
We (Team Sketch2React) chose to support Style Dictionary out of the box because we found out that Stratos Tokens App (once your design file is properly set up) could output the design data structure (design tokens) required as input for Style Dictionary 🥳✅
Style Dictionary also provides great and easy-to-learn boilerplate projects alongside good documentation (Although I’m still missing some code examples marked as todo on their website).
The configuration possibilities of Style Dictionary
Style Dictionary is shipped with two different boilerplate projects: basic and complete (you can modify and/or extend these to better suit your own needs).
Included in these boilerplate projects is design data (design tokens) stored as JSON to demonstrate the build process and generate proper example output (and even complete apps!)
In addition to the boilerplate configurations Style Dictionary also provides you with the possibility to create your own configurations by writing custom build scripts. This is done in JavaScript utilizing the NPM package style-dictionary.
You can read more about setting up your own custom configuration in Style Dictionary’s documentation.
Altering your Stratos tokens project configuration
Stratos Tokens App initializes all of its projects with Style Dictionary’s basic configuration file. This gives you, dear reader, a great starting point.
However, eventually you might need to venture past the basic colors and sizes and include things like fonts, icons, and images into your workflow.
This is already supported by Style Dictionary and can be utilized in your Stratos Tokens project.
But how?
There are three ways to do this:
- Edit config.json in your Stratos Tokens project folder. Use Style Dictionary’s documententation as reference. (This is a road full of trial and error)
- Write your own custom Style Dictionary build script. Use Style Dictionary’s documententation as reference. This is not for the faint of heart!
- Initialize a Style Dictionary boilerplate project inside your Stratos Tokens project folder. (This gives you fully functional configurations straight away)
Below I’ll guide you how to setup a Stratos Tokens project with Style Dictionary’s complete configuration.
In Stratos Tokens App click on File -> Open project in Terminal
Enter style-dictionary init complete
This will not override your Stratos design tokens data since the default location for Style Dictionary design tokens input JSON differs from that of Stratos Tokens.
Style Dictionary’s default input data (design tokens) location is /properties
Stratos Tokens’s default input data (design tokens) location is /data/json
Making Style Dictionary use Stratos Tokens’ design data as input
If you now start to poke around in the newly generated Style Dictionary output, you’ll notice that it is no longer based on the JSON design data (design tokens) from your design document…!? What you need to do is:
Modify config.json
- Open the file config.json located in your Stratos Tokens project in your favorite code editor (mine’s VS Code).
- On line 3– change properties into data/json
- Save the changes
- In Stratos Tokens App click on File -> Open project in Terminal
- Enter npm run build and press enter
Now Style Dictionary uses Stratos Tokens’ generated design data (design tokens) as input!
What this change to configuration doesn’t do
I can’t stress this enough – This change to Stratos Tokens’ project configuration doesn’t magically attach your icons, fonts and images from your design document to the generated design tokens! It only prepares Style Dictionary for handling more advanced input in order to generate more advanced output which in turn enables you, dear reader, to go beyond the border of human imagination and potentially design the best design system ever! (Maybe I exaggerate a tiiiiiny bit, but you get my point)
The design data input structure you still have to set up manually in your design document.
No worries, help is on it’s way
I know all of this might seem very confusing and hard to learn, but fear not dear reader, Team Sketch2React is here to help you get a flying start! We are finalizing a design document (In Sketch, that you can import into Figma and/or InVision Studio) which contains an Ant Design Styleguide! And better yet! It’s structured in such a way that it works with Style Dictionary’s boilerplate projects!
This will be accompanied with a written tutorial explaining the structure and content of the design document.
There will also be a written, as well as a video tutorial, about how you go from Design Tool to iOS app with Stratos Tokens and Style Dictionary (!)
Related reads
Thanks for reading!
Fredrik — Team Sketch2React
