Skip to main content
Viacheslav_Poliakov1
New Member
June 26, 2023

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

  • June 26, 2023
  • 51 replies
  • 13908 views

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.

51 replies

Jonathan_Brown
January 22, 2024

I would like to use a string variable to display which component is currently being utilized with a variant interaction.

I have 100 instances of a component. The component has a property called “Component Name”. When the mouse enters one of these components, I would like the prototype variable to be updated to the instance value of the property.

It would be preferable to define this in the component definition, rather than on each of the 100 instances.

Is it possible currently to create a variant interaction:

  • Mouse Enter
  • Set Variable
  • Variable Target: # Component Name
  • to: Component Name
    ?
Figmate
January 24, 2024

Hi @Jonathan_Brown, Thanks for reaching out!
I found other community members asking for something similar here.
So I’ve merged your topic with an existing feature request from others in the community to have all the thoughts in one place! Thanks,

Jose_Devian2
February 21, 2024

any news regarding this?

February 21, 2024

Hello. What do you mean by “topmost component instance”? I am seeing the ability to set a variable to a component property but only on components I import from another library and not the ones I create locally. I am confused…cheers.

Alexander_Gritsay
March 22, 2024

Our team needs the ability of assigning string variables to components text properties.
Now we can’t use variables for localization. Let’s look on buttons as an example:

  • We have button component in our design system file. This button has a text property for its label with a default value “Button label”.
  • This component is shared between all the files in our entire project
  • Of course in all instances of the button the label property is overridden
  • Now I can’t apply string variables to the property at all
  • The only workaround for me to use variables is to delete the text label property in the main component in the design system. But if I delete the property in the main component then all the button instances’ labels in all my files in the entire project will reset to the default value “Button label”. And of course I don’t want to lose all my button labels.
    So for now I don’t see a way to fully localise my files with a variables feature.

Hope to see the ability of assigning string variables to components text properties in the future updates as well as the fix for this “delete text property-> reset to default values” behavior.

April 1, 2024

This issue is now killing me…it seems the variables don’t work well with having sub-components even at the top level. If you assign a conditional at the top level component, nested components interactions regular behavior also seem to stop working. It’s a total nightmare 😦 It’s almost like we have to go back to not using component interactions to be able to use variables at the moment.

Stan5
New Participant
April 5, 2024

Variables are so limited and yet you already put stuff behind massive paywalls (e.g. 4+ modes). Such a joke.

Pyetro
New Participant
May 15, 2024

Really needed! This feature would automate tons of layout mechanics…

+1!

Phil_Beresford
May 21, 2024

+1,000,000

Dying here without this feature!

Brian_Nail1
June 13, 2024

Same.

Seems like it would be of great benefit to have the variants (as they are today) but then have the ability to override those variants with variables when creating a prototype.

As it stands now, I am having to break components apart to access the various elements within so that they can be controlled by variables. It’s making a mess of my files and destroying the power of having a component library.