Webstudio
Log in

Join the Webstudio community

Updated last year

View to show different Design Token States across all / specifically affected components

At a glance

The community member discusses issues with Webstudio's integration of Radix components and the lack of documentation around design token element states. They note that Webstudio does not have a filtered view to show 'hover', 'focus', or 'active' element state styles, making it difficult to understand the full functionality of components. The community member provides an example of creating an e-commerce store where they cannot view the disabled or enabled states of the store components during development.

In the comments, other community members suggest that the Design Tokens UI is similar to Webflow's classes UI, and that the system is powerful despite its complexity. They mention that Webstudio demonstrates the states in videos and screenshots, and question whether the community member's issue was that they did not watch the video or find the description of the states in the text.

Useful resources
FFoxNZ
·
This follows my troubleshooting from how Webstudio integrates Radix components (https://discord.com/channels/955905230107738152/1209297578265673798) and discovering the hidden and non-documented use case of design token element states.

Turns out they exist, and that should've been apparent if none of the Webstudio Design Token documentation mentions 'states' apart from a single screenshot https://docs.webstudio.is/university/foundations/design-tokens#how-to-use-tokens-in-webstudio. Even so, Webstudio doesn't have a filtered-view to show 'hover', 'focus', or 'active' element states styles making it very difficult to understand the entire webpage styling and/or functionality of multiple components (e.g Radix components as per my other suggestions post) if a certain state is applied.

For example, if I were to make a temporary e-commerce store to sell limited edition merchandise or tickets to a geographically-local event, 1. I would assume people immediately say that it's not the best way to implement such a feature, but 2. there's no way to view the store components (e.g. menu button, image banner on homepage etc.) being disabled or enabled during the front-end development stages.

Looking in past discussions, there are already some weird behaviours of the design tokens trying to display properties used across multiple design token states, however this probably shows how complicated this integration of design tokens is to begin with.
O
5 comments
OOleg Isonen
Design Tokens UI is very similar to Webflow's classes UI from multiple UX standpoints. See it as an improved version of it, getting rid of combo classes and improved composability.
OOleg Isonen
Now like in the previous message I really need a specific thing you couldn't find or achieve.

I only hear "I don't like this because its complicated"
OOleg Isonen
The fact that you can style every element with different tokens, each token can have different states and styles can be defined on different breakpoints is not a simple system, its a powerful one. In fact just as powerful as what developers use, but less fragile and requires less knowledge to use.
OOleg Isonen
We demonstrate the everything they do in the video as well as show states on screenshots.
OOleg Isonen
Was the problem that you didn't watch the video and didn't find description of the states in the text?
Add a reply
Sign up and join the conversation on Discord