🖌️Design Tokens
Why tokens instead of classes?
If you’ve ever made a website with CSS or with Webflow, you’ve used “classes” to manage your website’s layout and visual styles. Sometimes we love classes. They give us a way to re-use styles which saves us valuable time. But they have some limitations that make classes very frustrating to use in the context of visual development tools.
Scenario: You’re building a website with Webflow. You have two separate elements, a button and card, and you want to give them the same box shadow. Buttons and cards have unique styles so they each already have a unique class. What do you do?
A: Manually configure the box shadow on the existing Button and Card classes individually. With this option you’re doing the same thing twice. It would save time if we could re-use the box shadow styles.
B: Apply the Box Shadow class on top of the existing Button and Card classes, making a combo class. Now you can’t edit the styles on Button or Card without first removing the Box Shadow class. Don’t forget to re-apply it! And good luck managing the classes on a different breakpoint. To edit the Button or Card classes you must first remove the Box Shadow combo class, then Webflow will kick you back to the desktop breakpoint, then you select the intended breakpoint again, then make your style changes, then re-apply the combo class. Experienced Webflowers know the pain.
There’s a better way. It’s Design Tokens.
What are design tokens?
Design tokens are everything that you wish classes would be - a way to re-use styles without limitations.
Mix-and-match tokens freely: You can apply as many tokens as you want to an instance in any order. No combo class silliness, no limitations with breakpoints. You want to re-use a drop shadow? Make a token for it and slap that token anywhere you want to see the shadow. Couldn’t be easier.
Atomize your styles, or don’t: You can make a token just for the color red if that suits your workflow - there’s no disadvantage to doing so. Or you can apply a combination of styles to a single token in same way you’ve been using classes in Webflow. This makes tokens perfect for utility-based frameworks like TailwindCSS!
Universal format: We didn’t invent design tokens. There is an independent spec (by the Design Tokens Community Group) that defines a data format for tokens, meaning you can potentially import and export tokens between multiple apps. Soon you’ll be able to sync tokens between Webstudio and Figma through the Tokens Studio for Figma plugin!
How to use tokens in Webstudio
The workflow for styling tokens in Webstudio is nearly the same as styling classes in Webflow, except better.
The top section of the Style Panel is our Style Sources Input. This is where you’ll create, style, and arrange your tokens. When you select a component's instance on the canvas, the tokens you see inside this input are sources of the styles on that instance. | |
Want to style something immediately without making a token? Go for it. All component instances in Webstudio have this Local style source by default. Styles applied on Local are unique to an instance and can’t be re-used, but you can easily convert styles from Local to a new token through the token menu. | |
To make a new token, click inside the Style Sources Input, type a name, and hit ENTER/RETURN. | |
The token you’re currently styling will be blue in the Style Sources Input, while others are gray. Simply click on another style source to select it. Any styling you do will be applied to the current token and reflected across all instances of that token. When you add a style, the label for that property will turn blue to show that it is applied on the current token. | |
Hover the label for a helpful description of where the styles on this property come from. In this case we see that the width value that we just applied is coming from the Base breakpoint, the “new token” token, on the Body instance. |
We have other label colors to help you keep track of your styles at a glance:
Blue | This style is on the current token. |
Orange | This style is coming from another source: a token that is not selected, inherited from a parent instance, or cascaded from another breakpoint. |
Gray | This is a Webstudio default style (like font-family: arial). |
Red | This style is on the current token, but it’s being overwritten by another token in the Style Source Input. |
The order of tokens in the Style Source Input matters. When multiple tokens have a value for the same property, tokens toward the end of the list will overwrite tokens toward the beginning of the list.
Coming Soon
Tokens are super powerful and versatile, but this is just the beta. We have some exciting features coming that will give you even more freedom to manage your tokens.
Tokens Manager: This will enable you to edit, create, and delete tokens in bulk, independently of the Style Panel. You’ll be able to create and switch between multiple token libraries or “themes”, like light and dark mode!
Tokens Sync: Since Design Tokens are a standardized format, it will eventually be possible to import, export, and sync tokens with your favorite apps. Soon you’ll be able to sync tokens between Webstudio and Figma through the Tokens Studio for Figma plugin!
Last updated
