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.

12 Likes

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.

10 Likes

Nah mate, don’t do anything, why bother :rofl:

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.

2 Likes

Not only strings, all properties including boolean are not compatible with variables :frowning_face: 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 :unamused:

3 Likes

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 …

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… :slight_smile:

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

4 Likes

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

4 Likes

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.

2 Likes

Please fix it soon, I’m dying

1 Like

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.
1 Like

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!

2 Likes

Please fix it, same problem here.

2 Likes

Bump. Same issue here. Pretty please add this feature! :pleading_face:

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

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

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.

1 Like

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

2 Likes