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

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.