Join the Webstudio community

Updated 3 months ago

If the token exists - it should be prioritized

At a glance

The community member is experiencing an issue when editing styles, where they think they are working with a token but are actually applying local styles. The community members discuss the intentional design choice to prioritize local styles by default, as it can be easier to undo changes and work with local styles, especially if there are many tokens. Some community members suggest that even with a single token, it may be better to default to local styles to avoid unintended changes across multiple instances. The community member also mentions their habit coming from a different tool, Webflow, where the editing experience is different. Another community member provides a tip to manually set the focus to the token to make changes to the token instead of local styles.

I often run into this issue when editing styles—I think I’m working with a token, but it turns out I’m applying local styles instead.

Here’s what happens:
  1. I create a block, style it, and save the styles as a token.
  2. I duplicate the block three times since I need four identical blocks.
  3. I select the third block (since it’s closer to my cursor) and start adjusting styles, thinking I’m editing the token.
  4. I realize the changes are only applying locally, so I reset them.
  5. I go back to the first block, see that the token is actually active there, and when I edit it, all blocks update as expected.
Could there be an option to prioritize tokens by default? That way, if I need local styles, I can manually switch to them instead.
O
Y
N
7 comments
We made this choice intentionally, because if we pick a token for you, it might be the wrong one and it will be harder to undo those changes than on local, from local you can still see all the changes easily, the go to CSS preview, copy and insert in the right token in the advanced panel all properties you need at once.
yeah, it makes sense if there's a lot of tokens
even if there are 2 🙂
actually even 1, what if that token is reused across instances and you don't actually want to modify all of them
this my habbit is came from webflow...
@Yurii Alex If you want to change the styles of the token instead of local, you can manually set the focus to the token manually by clicking on it until it gets violet. Even if you do that on your third instance, changes will effect all instances with that token. But always take care that token is not violet when you want to make changes only locally: then the local button must be blue.
Webflow is different in this case because there is always only one item that you edit essentially
Add a reply
Sign up and join the conversation on Discord