No understanding of tokens/components/classes/instances in webstudio

[rivedive]

Maybe i did not find it in the docs but where do you explain the use of tokens/instances/classes/components. I am coming from webflow and don't have a background in devoloping websites. Can u explain how to use these things? Or guide me to a ressource where i could read up on how the concept works in webstudio?

[kof]

We need to start working on university-like articles and start with those exact things that differ to webflow. As we don't have it yet, will try to write one in the next days, here is a short version:

Style Sources

Style Sources is the UI that looks like webflow classes. We made it look familiar so that Webflow users have an easy way to learn it.
Style Sources are functionally like Sass mixins but if you never used sass, don't worry, read on.

1. Local by default

By default you don't have to name them, because the Local style source doesn't need naming, you just style it.

2. Design Tokens

Design Tokens are there for reusable styles between instances. You can create one and name one just like with classes.
Here are the differences to classes:

1. Name doesn't result in actual class name confict even if you have 2 with the same name through copy/paste from a different project. Both will work, you can rename them as you see fit when you see 2 Tokens with the same name. Things just work by default.
2. You can always start with a Local style source and click "Convert to Token" when you need to make it reusable. No naming by default.
3. No specificity issues like with combo-classes. When combo-class was made out of classes, you can run into specificity issues and get unexpected results check out a demo here
4. You can mix tokens as you like. Basically you add them and remove them as you see fit.
5. Sort them by drag&drop if you have a conficting property defined on one of the tokens. Last token wins. E.g. if you want to override a property defined on a token, just for one instance, move Local source to the right, so that it overrides and set the styles on it.

Please let me know what questions you have and I will update this guide and then turn it into an article.

[kof]

I hope this article and video explained this https://webstudio.is/blog/design-tokens-better-than-classes