Join the Webstudio community

Updated 2 months ago

understanding style sources

At a glance

The community member asked if they can view all the Style Sources listed and understand what each of them does. In the comments, other community members provided some guidance:

- You can see all defined properties in the style panel, and the colored labels indicate where the values are coming from. You can also see the combined CSS properties on the element in the CSS preview.

- The community members also suggested checking the documentation, which includes information on design tokens.

The community member acknowledged having some issues initially, but was able to figure it out with some trial and error. They were looking forward to the Figma sync and found the shared documentation helpful.

Useful resources
Hi everyone,
sorry might be a noob question but I can't wrap my head around it.
Can I view all the Style Sources listed somewhere and see what exactly each of them does?
Attachment
image.png
O
h
3 comments
you can see in style panel all defined propertyies, they have a colored label, when you click/hover on that label yo can see where the value is coming from

additionally you can see all css properties combined on the element in the css preview on the left
Yeah I had issues in the beginning but figured it out with a little trial and error (I'm not a web designer so probably lacking basics, I never fully understand classes either).
In my head it made sense that there would be some sort of list with all defined tokens, nevermind though I'm looking forward to the figma sync!

Thanks for sharing the docs, that's exactly what I needed!!
Add a reply
Sign up and join the conversation on Discord