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

Share an idea
,
1

I haven’t found this in “coming soon” for variables…

As it works now, a variable can control properties only of the topmost component instance. You have to assign a variable again and again to each instance each time you place it, you can not nest components with variables at all.

22 Likes
2

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.

12 Likes
3

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
2 Likes
4

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).

13 Likes
5

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.
  1. 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.
  1. 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.
4 Likes
6

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

4 Likes
7

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.

2 Likes
8

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.

2 Likes
9

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.

10

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.

4 Likes
11

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
12

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.

13

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.

4 Likes
14

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
15

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
16

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.

2 Likes
17

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 :crossed_fingers:

1 Like
18

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
20

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.

21

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