Assign variables to variant properties of the main components & nested instances

For variables to be useful with components, we need to be able to move instances around between frames with different modes, and have the nested instances change according to the variable values of the mode they are in.

Currently, instances respect mode, but nested instances do not.

Agree that we need variables to propagate into nested instances within components please.

Hello,
With component there many limitation, Two of them are:

• Impossible to bind a variable with any properties of a components.
• If a component from a published libray have nested component then it’s impossible to apply variables to it.

So it’s important to be able to apply a variable to a property (of any kind). And it’s important to be able to use a property as a modifier of a component. For example it would be nice to show/hide a piece of a component with a boolean variable and not necessarely through a component property (I definitively see this like a nice way to hide/show items from a list using this without having to create 50 nested properties).

Hey there, @XavierV

read this, They are already planning to develop this feature:

Coming soon

While variables is evolving and growing, we want to help you plan ahead. Here’s what we’re working on.

1. Support for additional variable types

• Image variable type: Image variables will allow images to dynamically switch between modes, such as logo switching or product image switching for prototyping. They will be applicable anywhere you can apply image fills.
• Typography variable type: We’re exploring how we want to support typography variables. We want to provide a way to switch between combinations of typography properties, like font families, sizes, spacing.

2. Support for additional properties

• Additional property fields: Soon, you’ll be able to apply variables to stroke width, effect colors, layer opacities, and more.
• Additional component property types: Currently, you can only assign variables to variant properties. We’re working to support additional component property types.

3. Extended collectionsWe’re designing a way to handle theming for sub-brands, which are often managed by different teams at large companies. With extended collections, you’ll be able to add brand-specific overrides to an existing variable collection and publish those overrides as additional modes.Extended variable collections will be an Enterprise-only feature.

This coming soon bit doesn’t talk about allowing to bind variable properties (and triggers) to components, though.

yes you are right, cannot find anything about variable and property binding. Seems to be a MVP for me. What the point if it’s not possible to bind variable with property ? If it’s not possible the only way is to drop properties and use only variables.

I find it bizarre that their mvp didn’t include applying variables to nested elements in a component. I can apply a variable to a CTA in my library but if i apply it to the text inside said CTA, then the interaction doens’t work.

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.

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.

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.

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.

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.

Just the way we needed to have control over nested properties to change them instead of creating more variants of parent component, I need to apply variables to the component instances which are in lower levels of another Component (or at least for the nested properties of that top-level parent)

For example, I have an “Item Card” component. I have a different design system which changes a discount tag to another variant of its own.

1. It is obvious that I can not create a variant for Item Car, only to change a discount tag.
2. It is not related to prototype to do it with “set variable”
3. because of transparency of discount tag, I can not do it with a boolean

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.

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 🤞

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!

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:

1. Create Component A, which includes a nested Component B containing a text layer.
2. Paste an instance of Component A and apply a string variable to the text layer.
3. 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!

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 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 💭

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!

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 😃

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.