It’s may be a bug, not sure we are speaking of the same one but I saw something similar. Try to double click on your component and see if it updates with your variable.
I’m using a text property with my button component, because the label changes for most instances. It would be great if I could set this property to a variable as then I can use them for internationalisation. I hope this is high on that to do list.
3 Likes
Yes, I would really like the ability to use variables on nested components as well. I can’t really find any workaround to it, other than creating pages for all different scenarios.
3 Likes
I’m playing with interaction orders, for now it seems to be working for my specific scenario. I can apply an interaction and a variable to a nested component, but the variable needs to have higher priority for it to work.
It weirds me out I can only either have a nice component system or working variables.
As good as this update was I hope it will get expanded soon.
2 Likes
Do you have a link to a file where I can see how this works because what I’ve been resorting to is either breaking the component or applying it to a top level instance.
1 Like
Binding to nested components could also help with variant changes across multiple components in a layout. If there are components with size variations and use the same naming scheme, they could all be switch by the mode instead of updating the properties of each one.
1 Like
Hey,
I would definitely be happy if variables could also be added to nested components and properties, e.g. icons in a button. Also being able to connect “content” of a text property of a component to a variable would be great.
Please the first one would be great as it doesn’t make sense otherwise with nested components.
1 Like
I hope the nested feature is on the way sometime in future, otherwise the functionality wont be compatible with design systems when used in prototyping, likely meaning most will avoid it (or detach everything). Variables are a great start though and the way it’s been implemented is very intuitive, I can’t see why nesting wouldn’t be coming 
1 Like
The fact that nested variants can’t be bind to variables makes the 2 systems not working together as they should. Can’t wait a release where it’s possible to do that!
2 Likes
When utilizing Figma’s variables feature, we also have encountered a bug that affects the functionality of our design library. This issue arises when properties and variables conflict, leading to text editing becoming disabled. Here are the steps to reproduce the problem:
- Create Component A, which includes a nested Component B containing a text layer.
- Paste an instance of Component A and apply a string variable to the text layer.
- Within Component B, create a text property for the text layer and expose this nested property in Component A.
Result:
As a consequence of the described steps, we are unable to modify the text within the instance.
I also agree that not be able to apply variables to nested components greatly reduces the ease for using them when prototyping. I have been stumped by this limitation several times and had to default back to having loads of variants or simply just moving from page to page, which complete defeats the point of why they rolled out variables in the first place. I also brought this up in another post Swap a variant instance using modes and a string variable and it would certainly welcome a quick fix!
1 Like
Yes, totally agree. I feel like this shouldn’t be a choice.
Running into this issue trying to assign a boolean variable to a boolean property in a nested component. In order to achieve this, I need to break the component link which breaks the whole point of having things built in a component.
I would agree with this as well; something I just ran into myself. I started looking into nested components and updating the properties in the nested components, but that doesn’t seem to be a win as a workaround for this topic since those can only be updated via the instance selected, and you can’t attach variables to those properties created either (which I think could be a good supplement to the variables feature). Would love for this to get fixed since nesting components is widely used, especially for any dropdown, navbar, or menu!
2 Likes
Also running into the nested component issue with variables.
It feels like one of the major hurdles that needs resolving to fully adopt a variable workflow.
I would say this is more important than any other variables issue right now. Anyone building a design system will have used nested components and will have hit this issue after building out all their design system components, only to find they can’t set variables to nested components, frequently used in Dropdowns, Overlays/Popovers, Lists, Menus etc
very much looking forward to getting support for this.
edit - workaround right now is to just not make a collection of Components into a Component, but just keep them in a frame and copy and paste it. Feels a bit wrong and updating it would mean replacing all of the instances of that duplicated Frame if you need to make changes. Workaround is basically more manual work 
I might be talking nonsense - or this might already be possible 
, but hear me out.
What if we could set a variable to a component property? 
I was working with a dropdown and thought this could be useful since I have a main component for the dropdown and I want to use it in multiple instances with different text and different placeholders.
Just a thought 
In need of this feature asap, without the ability of setting variables to nested instances I still get cluttered screens because of having to duplicating everything unnecessarily and the workflow is really awful that way. Same with an option to switch variable modes through prototype to make it interactive without workarounds.
-
- As a user I want to be able to assign variable values to nested components so that I can significantly reduce the number of instances of a complex component.
Yup, I really need this as well. Seems counter-intuitive that I’d have to detach an instance to assign variables to the nested instances…