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’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:
In my mind, we take a backwards step and remove text properties to unblock variables.
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.
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
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 …
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…
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?