The different levels of design token designing
We in Team Sketch2React believe in empowering designers with choice, so you will always have the ability to choose for yourself. Basically, it comes down to answering these questions:
- Do you design for cross-platform products? (iOS, Android, Web, macOS, Windows)
- Do you use something like Material UI for React? (Web)
- Do you just want to output raw design tokens (JSON) and let your awesome developers do all the implementation?
- Do you want to use theming? (JSON)
Thing is, we support all these different scenarios, and they require a different amount of setup and understanding. Let’s take the analogy of game design. In most classic games you have levels. It starts easy but gets a bit more challenging the further into the game you travel.
Level 1 — Basic setup
By just learning how you create and output design tokens from Stratos Tokens you will get everything a developer needs to implement it anywhere they need.
Let’s take Stratos Tokens 2021 Quick Start Guide as an example. Just using common sense we have divided things into categories like:
- color
- border formatting
- text
- breakpoints
- drop shadows & inner shadows
- animation transitions
- fonts
- padding
- spacing
- font weight
- line height
- letter spacing
The list can be endless, here’s the thing 👉 you can create any design token and structure that you can imagen. You set the limit here.
Pros
- The fastest way to get design tokens out to code (JSON)
- Just learn the basics, and you’re already producing value as a designer, helping your team streamline the process of design token usage
Cons
- Will not be auto-translated also into SCSS, iOS, and Android since you’re not structuring this for our built-in Style Dictionary export
Ask yourself this essential question
If you were to build a UI kit for your team or even a kit that you would want to sell on say Gumroad to other designers, how would you want to have it structured?
Level 2 — Following a set structure
In this example we’re going to take it up a notch. We have now learned the basic controls of our game, how the game works. Now we want to do things in a certain way that gives us a certain output. In this case, let’s say your team uses the extremely popular React component library Material-UI.
Material-UI has something called theming. Let’s use their words here, they have nailed the description:
”Customize Material-UI with your theme. You can change the colors, the typography and much more.”
Wow, that sounds spectacular you say. It is. Even more, how about you tell your team that you can set up the entire theming structure (and update all the styles) directly from your design application? That should make them happy.
You will never again hear things like:
- ”That takes far too much time, we don’t have that”
- ”Whaaaat are you talking about, that font looks correct to me”
- ”Adding all that spacing and padding will break everything man, everything”
Pros
- You can set up entire theming structures directly from your design app
- Update all the styles from one place
- Great for creating multiple themes fast
- Using our built-in NPM export you streamline the delivery of the design tokens
Cons
- Higher learning curve, you need to structure this 1:1 with how the theming is structured in code, that can be challenging
- It can be really hard to understand the exact ”how” the theme is set up and structured 👉 Do let your developers help you
Level 3 — Style Dictionary magic
You have now reached the final level and are ready to beat the game like a boss. If you really want to experience the true power of working with Stratos Tokens you will need to get to this level. It needs to be experienced.
Actually, in many ways level 3 is like level 2. You need to follow a strict set of rules but in many ways you also have a lot of freedom. Freedom is of course wonderful, but it demands more of you.
The way I learned Style Dictionary was to study the many example projects they have published on their Github. By reverse engineering the React app I created this, a true 1:1 with how the app is setup:
You can download this from our marketplace it’s 100% free.
Pros
- Style once use everywhere (it’s actually true)
- Exports by default SCSS, iOS and Android
- Can be setup to export and translate into many other formats
Cons
- Requires more setup
- Requires a really structured designer mind 😺
Don’t forget to talk
Setting up design tokens is not something you do by yourself. It’s a team effort. You have so many dependencies to take into account, but we think once you have agreed upon a structure you will have a very powerful way of organizing, updating and creating design tokens straight from inside the very same environment where the design decisions are made.
That’s it, have a great weekend and don’t forget to download our free demo of Stratos Tokens 2021 available both for macOS and Windows 👇🤖
