Join the Webstudio community

Updated last year

I m working on a website and thought I d

At a glance
I'm working on a website and thought I'd share my personal biggest wishes/priorities:

  • Color variables/swatches in color picker
  • Global styles for tags (h1, a, p, etc.)
  • Transitions
  • CMS
Lovin Webstudio!
O
J
A
20 comments
in particular tag styles and transitions need to be added asap
color swatches - could be a token for a color, no?
we do have a plan for variables, but its a bit separate milenstone, not a small enhancement
same for CMS - big separate milenstone
Love to hear it!
For color swatches, there is a workaround but it's not scalable...

Lets say I have all my tokens (e.g. background primary, color primary, etc.)

When I go to create a button, I have to add the various color tokens to it, and I have to do that for every button. Which is a time suck instelf, but then if I decide to change the style, I have to change it on every button.

It's much smoother to go to the button, select background, and then select the Background Primary color swatch.
The other workaround is I paste in my colors to the button, but I don't like having a color manually entered that's not in a token (leaves room to forget to update it if my colors change)
I would love to better undersand why tag instead of token?


As for color swatch, @Oleg Isonen we could really use a set of saved variables for this. I think this might tie closer to the tokens/class configurator we spoke about a while back. Ideally a user would set something like "Primary 500" and if they update P500 it's updated everywhere it's been used (like a token).

It's just painful to create all the tokens in the first place without saved color variables
That sounds pretty cool Alex. As for global tag styling, I don't have an opinon on the implementation, rather just a way to say "here's what all links should look like". That way I don't have to add my link class to every link. Same for headers and so forth.
Thanks J. Much to think about here πŸ€”
in particular this is crucial for pasting markdown without having to style each link and co ( @John Siciliano we support pasting markdown on canvas)
What will really solve a reusable button is ability to create a component
we have a plan for variables manager where you can create variables of different types, e.g. css variable with color as a value.

Those variables will be usable for any style panel value and even properties.
@Oleg Isonen Yes having a true component (one with properties) would solve many of scenarios that require some sort of color variable. There are probably still some scenarios that aren't covered. Glad to know you are considering adding components with properties. That was one of my favorite Webflow updates in a while.

And sounds good on the variables manager. Love it
Here's one reason (of probably many others) why having a variable for colors is needed. I want to style the link on hover by changing the color. I can't use tokens in this scenario. I have to add a color and the only way I can do that right now is by copying and pasting the color in.
True, this is actually the case, we need those sweet variables.
Variants UI for components would potentially also solve this to conditionally activate tokens, but it seems like a more advanced technique than necessary
We are seeing the need for variables from all sorts of angles: AI, tailwind, data bindings
so the chances we will work on them soon are high
Cool! Yeah I think it would be really cool to use variables all over the place. Thanks Oleg!
Add a reply
Sign up and join the conversation on Discord