Too Long Didn’t Read
This article is about a couple of things. Design tokens and what they are. It’s also about Stratos Tokens, an easy to use design token Mac app from the folks behind Sketch2React that support Sketch, Figma & InVision Studio files.
Since you’re reading this here you probably use Sketch. We still have ❤️for Sketch. Proof? We now support using Sketch Cloud and Sketch Shared Libraries for a remote way of controlling & distributing your design token data.
Still here? Well read on dear reader
From day one as Team Sketch2React, me and Fredrik have been working towards the very same goal — to be able to let designers do more directly from where designers spend most of their time — in the design tool.
Everything we develop as a team has that thinking inside its DNA. We felt the time was right to apply our philosophy of better work to the topic of design tokens. That’s why we created Stratos Tokens for Mac.
Oddly not many designers even know what design tokens are, more less work with them. Why? We may know why. Let us explain.
What are design tokens anyway?
This is one of the best quotes I have found for describing design tokens?
I found it in Kyle Gach’s epic article about design tokens here on Medium from back in 2018. Awesome read, highly recommended!
Fun thing is, all that setting up that he does in code in his article — you will do all of that straight from Sketch (or Figma/InVision Studio).
Using a good old Sketch2React technique. ✅
But more on that later.
Design tokens are design decisions
So now we have learned that design tokens are design decisions. Who should own these decisions? Designers of course. That’s why we built Stratos Tokens in the first place.
You should be able to handle and distribute all of your design decisions in the same apps that those decisions are made in. Really elementary actually.
We already use our design applications for things like ideation, crafting user experiences, building prototypes, UI’s, co-working with other designers & deciding this and that. So why then separate design from code? Exactly, makes no sense.
With Stratos Tokens you get that much sought after but seldom reached ”one single source of truth” for all your styles, straight from your preferred design tool.
Basic design tokens
Here’s a list of what I call basic design tokens taken from how Duet Design System lists them:
- Border radius
- Animation timing
- Line height
- Media query
Advanced design tokens
You can also go totally bananas with the tokens, here’s an example of just one component:
Every design token should be unique & have a unique name
For example, if we follow how MaterialUI names things, primary1Color is always called primary1Color. It doesn’t matter if you change the color of it for using in a dark theme or rebranding the components for your clients.
The example below from Figma is taken from our very simple design tokens demo file for MaterialUI that you can download from here.
…and here’s the exact same file but in Sketch. Btw the .zip from our website contains all three demos, one for each design app that we support.
ProTip #1 — The power of the Sketch file format
Using both Sketch & Figma? Do yourself a great favour by making them in Sketch since the .sketchfile format can smoothly be imported into the other apps but not vice versa.
ProTip #2 — Style Dictionary support
Make sure you use the power of our built-in support for Amazon’s Style Dictionary right from the get-go. Download our free demo file to get an idea of how things need to be setup. As they say in their catchy slogan:
Style once, use everywhere.
ProTip #3 — Use .dtignore
For all things that you don’t want to end up in your JSON design token data you use the command .dtignore as you can see below in my screenshot. Basically it’s all the visual elements that you use in your documents that are not code. Can be things like all of your components (in symbol form or non-symbol form). It can be things like explanatory headlines that you use to visually guide the consumers of your design token files.
It will all make sense once you study our demos and what comes out in code, trust me on this one.
User friendly GUI instead of a Terminal window
Don’t misunderstand me, I’ve grown to really appreciate the Terminal thanks to Sketch2React, but it’s not for everyone. Many designers feel alienated as soon as they are forced to open up and use a CLI (Command Line Interface).
We feel you. That’s why we have developed a gorgeous GUI for design tokens instead. So that all designers can work with design tokens instead of running out screaming in agony every time they see a CLI.
Lets sum it up nicely then
- Use Sketch, Figma or InVision Studio to setup and control your design tokens & theming structure
- A single place to create and edit your styles
- Reads the raw design file (Sketch, Figma or InVision Studio) and generates a JSON-structure based on your design data (design tokens)
- You can use any setup you want, you have 100% control over your design token & theming structure
- Use Stratos Tokens app (Mac only) to output your code
- Supports Sketch, Figma & InVision Studio files natively, no plugins are needed
- Use Sketch Cloud & Sketch Shared Libraries to remotely manage and distribute your design token files
- Export to NPM
- Export to iOS, Android, CSS via our built-in Style Dictionary support
Prefer using Theo?
Theo is just like Style Dictionary, an abstraction for translating design tokens into several different formats. Since you can setup any structure inside your design application you can instead use Theo for the converting bits. How? Join our Slack, we have a very sound discussion there around the subject of design tokens, a topic that is on the rise.
How to get it
Stratos Tokens is right now available as a pre-release, you purchase it here.
That’s all folks, hope you enjoyed this introduction to design tokens.
Related video tutorials
Here’s a awesome playlist with all of our Stratos Tokens tutorials in one place.