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.