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

Andy_Stites
April 2, 2024

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

Mikael_Cederbom
Active Member
April 9, 2024

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

Phil_Beresford
May 21, 2024

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

Death by a thousand cuts!

basil.korneychuk
May 27, 2024

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

stephensbrown
New Member
June 5, 2024

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

nicholaskaschak
New Participant
June 7, 2024

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!

TiffaniF
New Member
July 4, 2024

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

Morten_Larsen
New Participant
July 18, 2024

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

dalemoore
July 22, 2024

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

ingrid.beke
August 3, 2024

Please Figma, do this!