Allow assigning variables to component instances that are nested within other component instances

A more straightforward approach for Figma would be to allow users to map variables to the various properties of the main component (they already support this for the variant property) and then let users pull the variables along with the nested property every time the user nests an instance of a component within another component.
So, for example, if a main component a has variant states p(a) and q(a), which are mapped to a boolean variable x, when an instance i(a) is nested within a main component b, an instance of the mapped variable x(a) should get created with each new instance i(b).
I see how this might spiral into a plethora of variables x(b1a1), x(b1a2), x(b2a1), x(b2a2) etc., to handle, leading to potential performance issues, but if this is feasible, it would be a dream come true for prototyping using design systems.

Agree that being able to apply variables to properties that propagate through layers of nested instances is essential please.

We defenitly need it

I initially thought I was going crazy over this. It seems like a no-brainer to allow this to happen since we have libraries of components from our design kit applied into each design view.

The only way to circumvent this is to detach the instance and risk forgetting to update it in the future.

This was driving me crazy and I relented on breaking some of the component instances making the call that the conditional experiences were more important for testing than maintaining the link to the original component.

It seems like a tricky problem, getting the scope of the variables to bubble up from instances that could be within libraries to a component. But it would be a welcome fix so we can still use our design system components as they area and have meaningful state and variables changes stay constant throughout a single experience.

This is still an amazing feature to use, with a little grind I’ve been able to prototype something that was far more flexible and real without making a zillion frames.

+1 : Only being able to map variables to the highest parent element means that you still have to create dozens of unnecessary variants to make a prototype work.

Also cant apply them to font sizes, so again you have to do labour intensive workarounds.

Variables are sooooo close. But still lacking.

We need a solution to this limitation ASAP. The potential of using variables for prototyping and testing is huge, but this particular issue is really messing with our ideal workflow and having to create countless unnecessary variants is just completely antithetical to your celebration and desire to eliminate prototype mess/connector spaghetti or having to detach everything completely destroys the utility of design systems/libraries.

This seems to be a must to make variables really useful for advanced prototyping.

+1, variables are so limiting without this feature

Without this a simple row of dependent dropdowns in my case will require 2646 variants instead of 3.

Though I specifically need to propogage variables up from a child to it’s parent.

+1 on this

Please make this happen! I thought I was going crazy when I couldn’t find the “set variable” option.

Yes! this would be super useful. Run into this every time I try and use variables for prototyping.

We need this, otherwise it’s kinda useless, you can’t use your components… if not, what’s the point - for one off uses? Not very useful is it then… I heavily rely on my components to make scale wide design tweaks, you can’t do that if you have to unattach all the components…please Figma… do right by us, we should be able to apply variables to nested components.

+1 to assigning variables to nested components would be great.

Also, I feel the much needed feature would be having multiple variable scopes. Currently variables scope is global to a file. It would be super useful to have variable scope at page level and outer frame level. This way I can manage 100s of variables.

I also have a need to create variables for UI copy so that the UX writer can easily manage the UI copy. I have tried it, with works beautifully but I end with many 100s of variable. Again variable scope with help.

+1. Seems we’re able to tweak look and feel at the instance level to create additional variants. I’m not certain why we couldn’t further contextualize text variables to be more relevant to higher level components. This seems akin to Classes and Instances that have variable mapping.

It’s always gratifying when I am running into an issue in Figma and I can see that I am not alone. I just started using Variables less than 24 hours ago and am already running into a significant limitation due to not being able to assign variables within nested instances. If I define a variable at the component level, why not allow that to carry over when nested inside other components? I’m having to break apart all of my precious components in order to achieve some basic dropdown functionality within a parent component. Cry! P.S. Love you Figma!

I’ve been wondering why I didn’t see the Assign variable icon in my component until I realised it was because it’s nested in another component. Definitely a must!

A big +1 for this. I just learned about how variables work and got very excited. When I actually started applying those to my designs, the first thing I realized is that they won’t help much because of this deficiency.

This is also an issue in my team, would love to see this solved.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.