Skip to main content

I have Foundation, Alias and Mapped collections in my Variables panel. I have Light and Dark mode for all collections. For dark mode Alias, they can have Foundation dark mode as source. Dark mode Mapped can have dark mode Alias as source. 


1 Strange workflow

What I find.. is that when I want to pick a dark mode Foundation or dark mode Alias colour for my dark mode Mapped set… They are not available. I have to select a layer in my artboard, that is set to using dark mode… → Then I will have the dark mode colours available for selection inside my Variables panel. This is a very convoluted and cumbersome workflow for setting the dark mode colours that I want to use. 

Question 1 : Is this an intended workflow from Figma? Because it could definitely need some improvement.

2 Bug
When I have, as described above selected my colours for my Mapped dark mode set in my Variables panel → The colours displayed are not dark mode colours. They are in fact light mode colours. I can only describe this as a bug. This makes working with light and dark mode across various collections Foundation/Alias/Mapped very confusing.

Question 2: Is this a recognised and prioritised bug by Figma?

 

Video description:
 

 


thanks.

Anyone?

Hello ​@Harald_Skogland - sorry for the delay. I spoke with an engineer, and here’s what the discussion concluded with:
 

For both of your issues:

This seems to be a misunderstanding of how to structure tokens.

You are creating a cross-collection alias where both collections define "light" and "dark" modes.These two modes are disconnected, so Figma will always render the default mode of the aliased set (in this case the "Foundation" variable collection), regardless of which mode that token is being picked into. We do no "name matching" here.

 

We'd recommend only defining one mode in the "primitives"/foundations collection, and use the semantics collection (in this case, "mapped") to determine light/dark mode.

 

Hope this helps a bit.

Thank you very much for your reply and clarification of this issue. 

Terms & ConditionsCookie settingsAccessibility statement