Skip to main content

Allow assigning String variables to Text props in component instances


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.

55 replies

Francisco_M_Ferreiro

Tried the new variables in current projects, and this is a bummer.
We have set text properties to many components, specifically because we usually change those text for different countries.

In the way its currently working, we have to redo the components, loose the properties and use variables. Not great.


Pavel_Kiselev

Nah mate, don’t do anything, why bother 🤣


Jordan_Hughes

It’s the same for us.

We’ve gone through our component library and assigned text properties where possible allowing designers to easily apply overrides to one or more instances from the component property panel.

Now if designers want to use variables, we have the following options:

  1. In my mind, we take a backwards step and remove text properties to unblock variables.
  2. We don’t do anything, but as you mentioned, inevitably components will be detached in order to use variables leading to inconsistency later on.

If we pursue option 1, we’re forcing more deep selection/click throughs on layers to select and change content. And let’s say we want to use the ‘Simplify all instances’ option, then being able to add/change your variables on instances is buried further with another click under the ‘Show more properties’ button.


Constantine_Zuev

Not only strings, all properties including boolean are not compatible with variables ☹ This is the biggest blocker for using variables so far. When Figma team introduced properties last year, this was a huge step forward. It let us greatly reduce number of variants. In many cases eliminated them completely. Now if I am to use variables I have to undo all the work in Style Library and use variants. Huge disappointment 😒


Hey there,
Didn’t see your post, and I just posted about it too.

Until this bug might be resolved by figma teams, I created a copy of my typography component without the text property and for my incoming projets i’ll swap for this instance in components using nested typography component …


Rodrigo_Degani

Hi everyone,
Same problem here. Not able to assign text variables to text properties.
It seems I’m able to assign variables to a component’s variant properties, as long as it’s not nested inside another component…
It would be nice to know what Figma is planning to add this in the near future so we can decide if we need to revamp our components or not… 🙂


Rodrigo_Degani

FYI yes, it’s in their plans to add support to additional component property types:

Figma Help Center

Tomas_Polak

Same problem for us. Please figma fix this and make component params fully compatible with variables. Than it will be killer feature.


Mikko_Pekkarinen

As others have already said, this is a must have. Text properties must support variables as well, this will unlock awesomeness for creating localised prototypes and save a lot of time.

Just adding my 2c.


Pondsuda_June_Saelim

Please fix it soon, I’m dying


Luongnd
  • New Participant
  • 12 replies
  • August 15, 2023

Hi, which part of this does it mention they plan to do it in the future?
Is it this one:

  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.

Rodrigo_Degani

Hello,
It doesn’t state it unmistakably, but to me it looks likely looking at the Additional component property types bullet point.


I discovered today this problem and I almost cried. I tried to put a String Variable in a old text component and I didn’t found the option, and this would save me a lot of time.

Please give suport for that!


Thiago_Rebello

Please fix it, same problem here.


Tascha
  • Active Member
  • 30 replies
  • September 18, 2023

Bump. Same issue here. Pretty please add this feature! 🥺


MaxZuman
  • 26 replies
  • September 21, 2023

So do I understand correctly — if I want to switch my potentially huuuge design system to use string-vars on my buttons (to make multi-language setup or smthn) — I need to DELETE all text properties in components and then assign all the vars I want to all the children? (in one small step for a mankind loosing aaaall the texts assigned to the properties of aaaaaal children?)


MaxZuman
  • 26 replies
  • September 21, 2023

Or should I walk the frames, detaching all the children from main components, saving all the siigned texts to the text-properties and then assigning them to clones of original components without text-properties and then assigning vars to them?

Looks like a nice pair of crutches


Luongnd
  • New Participant
  • 12 replies
  • September 22, 2023

Yes, that’s what stopped me from using variables for now. All the text value in instances that have these text props will reset.

I wonder if there’s any news on this so far.


Hans_Humblet

For me this makes using string variable impossible in a lot of cases 😦


Edward5
  • 1 reply
  • October 2, 2023

Same here :S we need that! :S


Anna_Foltman

I was just about to approve using String Variables for translations - it worked great especially since we translate designs in reverse. For some time I thought it was just a bug that some strings connect to variables, and when you unfocus them, they lose the variable. Now I see that it’s a missing feature. I agree, that without it, this feature is unreliable and unusable in a scalable way.


Anna_Foltman

Aymeric_Bianco_Pelle1

Hey everyone, had the same issue, wrote a plugin for it, hope this helps ! https://www.figma.com/community/plugin/1283084251253914878/apply-string-variable-to-prop
And that this shameless auto promo is not frowned upon !


Now that variables are available for nested instances I was excited to use a variable on a (nested instance) text property, but just realized you can’t. Sadface…


Tim_Daff
  • 3 replies
  • January 4, 2024

Barmp. Just came across this for the first time and thought I was missing something obvious. Hope the Figma team can get this shipped soon 🙂


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings