Skip to main content

I am facing a bug where Figma does not correctly reference variables in a different collection even when the appropriate modes are set.

 

For context, I have created a simple multi-brand design system with:

 

  1. Primitives collection: storing hex values of colors for each of my company’s brands (yellow and green)
  2. Semantic collection: storing references to variables in the primitive collection for the same brands

 

After setting up the primitives collection, when I try and edit the variable for green brand in the semantic collection, the variable ‘picker’ window shows the correct green that should be referenced from primitives, however for some reason this does not apply.

 

 

The video demonstrates the issue. I also show correctly applying the mode for the page to be the green brand from primitives when attempting to troubleshoot. 

 

Am I doing this entire thing wrong?

Hi, thank you for sharing your issue.

 

I think I have this problem too and it also happens in the same collection not only when referencing variables from other collections.

 

Have you found a solution to yours?

 

Thank you for your help and time.

Hi! 
 

Based on your video it is working as intended. 
if you apply that your semantic variables on a frame, and then change the variable mode (in the primitive collection) of that frame or on a frame containing that frame you will see that it changes changed. In the collection view you only see the default value of a variable (the default being whichever column is the first or the one most to left).

However, you should see in you variable mode dropdown that you can apply brand both via your primitive collection and your semantic collection, which is wrong if you goal is to create a multi brand design system. Either you match the primitives between brands in your primitive collection (so remove the second column in your semantic collection) or you keep the primitives of your brands in separate collections and match them in your semantic collection. The matching doesn’t need to happen twice if they are meant to be equal (as in Brand A primitive 100 = Brand B primitive 100 which gives the variable General primitive 100 etc). That’s how you create a multi brand design system!! 
hope this help clear up things!

Have a good day!
 

 

Sorry but that was very confusing and not helpful. In his video he is selecting the green colors for the green mode and the cell in the variables table is showing the yellow colors even though he just clicked on a green color from the popup selection window. Any user experience that provides an affordance with specific parameters in a selection window and then those affordances show up as something different in another window is doing user experience wrong.

"if you apply that your semantic variables on a frame, and then change the variable mode (in the primitive collection) of that frame or on a frame containing that frame you will see that it changes changed." This is very confusing. The frames on the canvas should not interfere with how the variables are stored in the variables data table.

"However, you should see in you variable mode dropdown that you can apply brand both via your primitive collection and your semantic collection, which is wrong if you goal is to create a multi brand design system. Either you match the primitives between brands in your primitive collection (so remove the second column in your semantic collection) or you keep the primitives of your brands in separate collections and match them in your semantic collection. The matching doesn’t need to happen twice if they are meant to be equal (as in Brand A primitive 100 = Brand B primitive 100 which gives the variable General primitive 100 etc)." This is very confusing also. I think what you are saying is that the primitives collection should just be single key: value pairs and not key: value, value. Which I actually agree with but there is more than one way to build systems.

Reply


Terms & ConditionsCookie settings