Two sites, one design system

Currently you would have to copy/paste the variables between projects. Luckily this is very easy to do.

Just created a Google Sheet containing all Open Props and more. For me it was easier this way to see all css properties of a design system.

If I change something, I would do it on the sheet first, then copy/paste it into the two pages as mentioned here.

You can duplicate the Google Sheet here.

If you want to link one variable to another like shown below (e.g. --foreground-primary to the color --gray-3), then just get a checked checkbox in the colum Var, so the formula in CSS Property will wrap var(…) around it. This will work in Webstudio to inter-link multiple instances/properties.

After you defined variable and value, the CSS Property get's concatenated with the formula. You can just copy/paste it into Webstudio (as mentioned in the first link of this post).

@Oleg Isonen, is there something on the roadmap to make design systems easier in Webstudio?

First something like Webflow Variables. I created the Google Sheet because I needed an overview of the properties. Otherwise it's messy and overwhelming, but for sure it's just a workaround.

Second something like Webflow Shared Libraries, which @Daniel Kozma is kinda asking for, right?

Let me know – I am more than willing to participate in UI/UX testing… because quite frankly the features of Webflow were not implemented in a great way the last time I used them.

What's missing currently?

Area/categories? what else?

For design systems built in Webstudio fast?
I have quite some ideas in my head…

If you want I can create a whole list of features since I am building one right now and it's a bit of a hassle (propably in a new thread to not explode this one).

Webflow has their version of it with Variables which seem to grew quite a bit since I've last checked. Responsive breakpoint sizes for text, dark/light mode for colors, multiple collections and groupings for organization, the ability to share this with others…

But in short:
Something that like the sheet shared above, but with the open props / variables. Also I would like to attach variables/props and then change the values immediately from the stylepanel (and not go to the Root of the page every time). This workflow right now is pretty unnatural for designers…

CSS variables are responsive automatically, you define them on breakpoints by design. That's how it works in CSS.

Collections/groups - yes I get it.

the ability to share

What do you mean? e.g. you can copy all variables or some of them using search and share them, its just text

Also I would like to attach variables/props and then change the values immediately from the stylepanel

I don't understand this

Why do you want to change a design system in-place if its reusable. You define these things once.

Oh you mean as you are building the design system, you want to build it on that particular element even though the variable would be defined on the root!

Sometimes things change. So it makes sense to me to be able to change things while moving forward.

For example: I realize during a design sprint that our hover effect on buttons is too little (which is linked to the accent-shadow).

In Webflow I can change it's value in the design panel visually, but it is a global variables (so to speak on the root).

@Oleg Isonen, created a new thread to not explode this one 😅

https://discord.com/channels/955905230107738152/1369942887348834304