Skip to main content
June 21, 2023

Allow assigning String variables to Text props in component instances

  • June 21, 2023
  • 56 replies
  • 13651 views

The new variables feature is great! But I’m asking you to add an ability to assign String variables to Text props of component instances.

My use case
I have a generic component “header” in my company’s design system that can be used with any text. I insert the instance as a part of my specific design frame for iOS. A UX Writer edits the header text. Then, I create a frame for the same screen for Android, Desktop and Mobile Web. In total, I have 4 screens with the same header.

Now if the UX writer decides to change the text inside the header instance, they have to copy paste it 4 times. I’d like to solve the sync problem and the need to maintain consistency manually. I wanna make a String variable “screen-1-header” for example, and bind it with the Text property of the “header” instance. BUT as far as I see, Figma doesn’t allow it at the moment, which is sad. I can assign a variable to a text layer that is not a part of a component, but I don’t like the idea of detaching instances from master components.

Please expand the variable feature to text props in instances. It’ll burst my teams workflow.


UPD: although the assigning works on text layers within a component, it doesn’t work if the text layer is connected to a text prop.

56 replies

Nick_Man
August 7, 2024

Please for the love of god let us assign variables to text elements nested in components. For example, I’m using Material 3 Design Kit. All text fields are built out with all kinds of great switches and knobs allowing me to control switching variants and properties using variables, saving a lot of time not having to manually do it or create additional screens. But if I need to say, have the same mock value show up in a field in one place, then it appears somewhere else, and also propogates between different variants of either of those elements, I have to detach the entire component, recreate all those variants locally and assign a string variable, because a lot of times, when a variant is changed via an interaction, the text will reset to the base text for the component in that state (say going from Enabled to Hovered, which is SO frustrating. Basically, it defeats the purpose of having variants at all. I might as well just create them all myself from the start. Yeah it’s a great base to work off of, but what’s the point of having a shared library between teammates if we all end up making local versions in our design files that, over time, because further and further away from consistent because they are not pointing back to the core library of components? Seems so basic. I mean, many UIs are forms, or require some sort of manual entry of values from URL addresses, to IDs, to names, dates… like, I could create a dynamic mockup of a list of 5 items that starts with none, but as a user “enters” values into the text fields and submits them, they could “create” a new list item with that name… it seems so obvious - like how is text/strings/inputs the last variable type to gain functional support? I can’t believe this has been a thread from over a year ago and there’s still no new news about the capability.

Brian_Duchek1
New Participant
August 19, 2024

Seriously, this reads like a bug report from the twilight zone (just keeping the thread open).

This was the first thing I tried doing with my components, and the fact that it was borked like this left my jaw on the ground.

MyHogblom
New Member
September 9, 2024

+1 for this ‘feature’.

The docs say that you can apply a string variable on any text layer, which is not true, as you can not apply it on a text layer that is connected to a text property 😦

MarKamp
September 17, 2024

This feature would be much appreciated!

Martin_Puskac
September 23, 2024

Is there any update on this topic?
Thought in UI3 this might be fixed, but no.

Constantine_Zuev
October 7, 2024

October 2024, new UI is everywhere… But no solution to this issue 😭

Shannon8
New Participant
October 9, 2024

I was exactly looking for this! I was thinking I might’ve missed it, but I am sad to find out you can not combine text properties and text variables 😅

October 11, 2024

We are using a component library that we don’t have access to edit. So we can’t remove the button’s text property to assign a translation variable to it (which by the way is already crazy that we have to do this).
This is extremely inconvenient and frustrating for us. 😩

Rachael_Rutkowski
October 15, 2024

I still need this as well.

Nick_Man
October 15, 2024

Yeah it’s wild to me that I have to detach a component to be able to create a simple drop down menu that allows the user to select one of three options. Like Figma really thinks we are only using it to create slideshows apparently. I’m going to keep responding to this every 2 months to keep the thread open until they figure this out.