Published Variable Adjustment - Editing Non-Local Variables

I am working on building a design system using components, variants, and variables. I noticed that you can publish variables so that other files can access the variables from the library, but you cannot make any adjustment to those variables. Is there a way to fix this or am I missing something?

Here is the scenario. I want to have a field with a label. I want the label to have a text variable for the required field indicator. On project 1 I want to use the word “Required” to indicate required fields but on project 2 I want to use an “*”. I want to use a variable in my design system for the contents of the required indicator so that it can be adjusted across all of the components that have the ability to be required at once when I start the new design.

This same thing would apply to a bunch of other attributes of my design system. What is the point of variables in the design system if you can’t adjust them and have it affect all of the things that use them?

Hey there, thanks for reaching out!

It sounds like you’re referring to being able to change modes, which should change the value of the variable from “Required” to “*”?

If so, here’s a help center article on how to author and change variables modes that should help:

I am not referring to mode change. I do see that mode change is possible today. What I really want, and what I think would make variables more usable for large companies who use their design systems for many clients, is the ability to adjust variables on use but have it adjust the default values across the file.

As I said in my post, I want to set a default value for something (as a variable in my design system) and then let the designer change the default value to something else when they use it in their file. This is just like how most code frameworks work. For instance Bootstrap. When you use it, it comes with a base setup for the color for “primary” but then when you use it, you can override the variable for the color “primary” to make it match that specific project’s color. It makes the design system/framework strong (it defines the base values for optimal/quick use, but allows each implementation to adjust those defaults.

Without this, we would have to just copy our design system from project to project and then adjust and publish more components. This makes design systems project-specific instead of enterprise or team specific. Variables could be the feature that takes the design systems to the next level.

Thanks for clarifying!

We’ve updated your topic to a feature request and the Variables team is already looped in to consider this for the future.

Great, thanks. So you are saying that it isn’t possible right now? If not, what is your suggestion on how to implement this? Would I create local variables and go to each component as I use it and override the values?

As a workaround, in order to be able to specify a “default” variable value in each file that uses that variable, you can set the modes on the file’s pages. In the previous help center link, there’s a section on “Switch modes on a page” that will explain this a bit more.

Yea, that won’t work because we already have modes for things like light and dark :(. We would have to multiply modes by how many clients we have, which would be crazy. Also, the projects are unique clients so we couldn’t share the designs with everyone every time. Like if we had a mode for Client 1, Client 2, Client 3, we would also have to have a mode for Client 1 - Dark, Client 1 Compressed, Client 1 Light, Client 1 Expanded… etc. and that would become way too many. We service hundreds of clients per year 😦

Thanks for the help and suggestions. If you think of some other way, please do let me know.

This would be amazing! 👍

Wishing for this! 👍

That is what i’m looking for: edit the ‘brand-colors’ to meet my clients brand color for that specific file/project!