Skip to main content

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.

We really need this!


This seems to do the job as a workaround, thanks! ❤️


Hello! I would love to see this too. Especially because I use the Relay plugin from Google and it only supports component with properties, so now I need to have two components, one for the design and a clone of it for Relay


Almost a year later, but this is still not implemented 😭


This stops me from using text variables seriously


Let’s go Figma team! Lot’s of great reasons to ship this feature 🙌


I found a bug(?) and potential work around for this until we get this feature in place. 🐞


If you only select more than one text element the variable button appears, and allows you to connect a string variable to a text in a component with text property. But the text property will not be connected, only overwritten. 🥲



<Nearly 12 months later> How can this not be implemented already?


Death by a thousand cuts!


😅 🤣

OMG! Thnk you very much for this crazy way! Awesome! )))))))))))))


This shouldn’t work, but it does! hahaha 😂


Also to add to this, I only find that this works if you use two different variants of the same component


Yeah I just noticed this too, thought it was a bug that you COULDN’T assign it to a single instance which is how I found this thread! Guess it’s the other way around 😂


One thing to note with this workaround though - if you have any interactions tied to an instance the variable won’t flow through while prototyping (i.e. hover states), or at least that’s what’s happening to me!


Yeah don’t think this work-around works anymore…


Without this text props are useless to me. To use the translation variables collection we have created, I have to go into every component, remove all the text props, and then attach the string variable.

Please Figma - implement this


Posting to say I also need this feature too, and to keep the issue from closing. I’d like to add the text prop on the parent component for a “county” name and have the prop propagate to multiple “fields” within the component (county@domain.com, County Website, etc.)


Please Figma, do this!


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.


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.


+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 😦



This feature would be much appreciated!


Is there any update on this topic?

Thought in UI3 this might be fixed, but no.


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


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 😅


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


I still need this as well.


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.


Reply