Join the Webstudio community

Updated 7 months ago

Sharing tokens between projects

At a glance
This is a question for the development team.

When the token manager or search feature (not sure what your decision) arrives, would it be possible to share my tokens between projects? I know that I can copy/paste between projects right now, just curious if there will be a different way of handling this later. Basically, I'd like to have a master list to add/subtract/improve on for my projects.
O
J
J
59 comments
We were discussing it today once again internally. I think what you want is a style guide library that you can reuse across projects and also update in one place and receive updates in all those projects, is that correct?
Yes, that's correct.
Each project would need to have it's own set of colors/fonts/etc but the majority of my tokens could be reused.
I have this use case too. Currently I need to remember to go back to my master project to add tokens I want to include in it for future projects (and sometimes forget)
Same here... except replace "sometimes forget" with "always forget". πŸ˜›
Another thing that happens is I find a mistake and need to correct it on the original. So updating is a case too
Here is what I think after discussion with @Ivan Starkov :

"Immutable tokens."

Meaning tokens can be locked down. You create a style-guide project, copy that style guide to any project and be sure that the tokens from the style-guiide project will always update the tokens in your local project, because these tokens can not be changed locally.

We could also have an official "update mechanism" on top of that. Meaning when original project has an update, downstream project once opened receives an offer to upgrade.
That sounds very cool!
Kinda like a library in code world.
Would this mean that I could have a bunch of them locked down and then something like colors could change per project?
On top of that there could be a log of changes with every update and a version.
Cool! I think once css vars are out webstudio will create a starter style guide. I wonder how an official style guide could fit into this system
I mean locking down tokens is a separate feature that can be used in any case, no matter if you use the project as a library or not.
Same for locking down instances and later nocode components
In fact style guide is often just the first step towards a full design system that is made of components to manage larger projects with full reusability.
Official style guide should be a recommendation and a resource for learning and taking an example. Maybe a requirement for "approved" templates later once we are sure and want so standardize on it.
forsure on approved templates
This all sounds pretty amazing. I assume this would be quite a large task?
well its not one task, its several, which we will be tackle piece by piece as we see the right moment.
e.g. first lock down tokens
second lock down instances
introduce versioning, because you def want to be able to upgrade and roll-back
all of these are going to improve this maintenance experience bit by bit
versioning too... oooh!
verrsioning is super important, just today someone was upset about not being able to restore after fucking up something
I did notice they joined the discord today too... so...
I have a pretty interesting plan on providing not just versioning but a history for undo-redo that's persistent. So not just some specific point in time recovery but full going back every step even after reload
Sounds like it will take up a ton of memory.
storage space - yes
memory - I only need to load at once the last 10 steps or so
Well all these features sound amazing! I'll try to quietly wait for them. πŸ™‚

Right now Webstudio offers me everything I need. All the other things are just gravy at this point.
yeah, I want to be careful about each of those features, get them right is important
right now we need to work more on cms integrations and ergonomics of the builder
we are getting ready to release webflow copy-paste next, then copy-pasting css, then taking care of search and shortcuts
css variables are also on top of that list
and improving UI for gradients and adding transforms
that's good to hear, I've been hoping for variables for a bit now. πŸ™‚
css vars are #1 for me
yeah, I would say that css variables on the tree will be done right after that release we are working on right now
its still not solving theming/style guide probelm, because you want global css variables that can be resused across all pages
The CMS was the big one that I was waiting for. That was a big deal to me.
global variables if they live outside of body need a separate UI.
are you already using it?
Been messing around with it a bunch, but haven't put anything live with it.
ohhh. this is what i was talking about
Just got a contract that I'll be using for it. I'm trying to setup a multi-tenancy payload cms for that project. I got a single version running, now I plan to build it out bigger.
I will have very soon a session with Bogdan about global variables in general and global css variables. So far we have been avoiding anyhting global but this will have to change soon to have the design-system/theming done.

In particular I want the most intuitive way of combining css variables with js variables. Webflow made a mess out of it as usual, nobody understands shit now what their variables are.
The truth is there are js variables, which we support now. There are css variables that we are going to support soon. These are very different.
"combining css variables with js variables" very interested to see what you come up with for this!
You want to be able to use just static css variables that live in subtrees and you want to be able to bind them to js variables coming from anywhere and you want to be able to manage a centralized list of variables too and be clear about how these are used (css vs js). Making this all fit together naturally is the biggest task.
Going to need some UI mastery on that task.
as well as all the backend logic.
In particular its challeging architecture from code perspective.
yeah lots to solve. just to illustrate the biggest pain point for me right now: colors.

Using my colors on hover state and borders are two biggest places where I need to hardcode the values. Second annoyance is I have to have a background token and a color token for every color.
I've run into that too. Or needing to code my colors onto the gradient stops.
yeah, its just a class of problem, we can have tree-based variables relatively quickly done, but that won't solve your problem as you want a global cross-page variables management.
Well I'm glad you're taking the time to think through the problems so you can come up with a good solution vs something fast that won't scale.
Add a reply
Sign up and join the conversation on Discord