Skip to main content
lucasvieluz
Jun 21, 2023 8:35 PM UTC
Question

Help to set an image value in variables?

I need set value for assets in my design system, ex:
My logo dark mode vs light mode, the brand asset are different for the color scheme.

The options available are:

  • Color
  • Number
  • String
  • Boolean

I try insert the URL from image value in string, but I dont have success to retrieve value and set for background.

Anyone have a idea to resolve this? 🤯

Anynone can help me?

This topic has been closed for replies.

13 replies

Mattias_Berkesten1
Jun 21, 2023 8:58 PM UTC

Just played with something similar. Tried to change the logotype of our multibrand design. In our header component i put both logotypes and controls them with booleans properties. Then I set the boolean values from two booleans variables.

Maybe not the best solutions since it will create more layers in the component?

Baffour
Jun 22, 2023 3:00 PM UTC

This wasn’t obvious from the UI but I discovered it in the Playground File.

You can bind a string variable to a variant property, which means if you have a component with each image as a variant, you can use a variable to switch between them

lucasvieluz
Jun 22, 2023 3:18 PM UTC

Tks for help!

lucasvieluz
Jun 22, 2023 3:19 PM UTC

I go try this, tnks 😉

Devon_Anderson1
Aug 21, 2023 9:12 PM UTC

I can’t get this to work. Do you have to name the modes the same as the variants?

For example type=

Daniele_Q
Active Member
Oct 25, 2023 5:35 PM UTC

@lucasvieluz I’m probably stating the obvious here, but if you have an svg logo, you can assign color variables to the svg and they will switch in dark mode.

Of course, if you have a png, I feel your pain.

We desperately need a variable for assets, that will switch a graphic asset with modes.

Daniele_Q
Active Member
Oct 25, 2023 5:40 PM UTC

Yes… variant are identified by names, and you can think of them as strings.

Zlatko
Active Member
Dec 11, 2023 3:24 PM UTC

I think this feature should be coming soon, no?

Maker of kinverse.app
Josh_Madrid
Feb 17, 2024 11:19 AM UTC

Running into this issue too i can build a complete complete that isnt bouncing around these things like styles, variables, tokens, & modes

Missy_Turco
New Member
Jan 17, 2025 6:09 PM UTC

I’m in need of this as well. I am working with several different partners and when demoing a design flow to them I want to make sure the demo includes their name and logo without having to manage a separate prototype for each of the partners as designs change. I am using modes to quickly switch between partner names which is great, but I can’t switch the logos using this same method which is a bummer.