Please Figma, do this!
3 Likes
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.
3 Likes
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 Like
+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 
2 Likes
This feature would be much appreciated!
1 Like
Is there any update on this topic?
Thought in UI3 this might be fixed, but no.
2 Likes
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. 
1 Like
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.
1 Like
Hoping that after all the UI3 and AI stuffs, they’ll shift their focus back on fixing limitations like these…
1 Like
I’m interested in hearing how people are using string variables. There seems to be no (EDIT: conventional) use for them as long as you can’t pass them to components, as any design which would benefit from setting up string variables would almost certainly also make use of a lot of components?
Any update on this Figma?
So I’m using string variables in a way that works around other issues I have with components and variables. I’ll try to make it simple and brief…
Essentially, I create string variables that share the names of the variants of a specific component. Say the component is a notification bell icon in the top header…
I might name the variables like this - all caps being variable name, and the sentance case being the actual string …
(variable) NOTIFICATION - (string) Notification
(variable) NO NOTIFICATION - (string) No Notification
(variable) NOTIFICATION STATUS - (variable) NOTIFICATION … (let’s say in this example we start the prototype with a notification)
Then I will map the NOTIFICATION STATUS variable to the “Variant” or “State” property for the icon used in the header so it knows which variant of the icon component to reference at any given time.
So now with that setup, when the user “reads” the last unread notification in an open notification panel (lets say it’s open to start or that they opened it clicking the icon, whichever…) - I have that click on the notification (to read it) do two things, one, it will likely want to switch the notification item instance in the list to the “read” variant (typical instance variant swap logic, just as an example of what people usually do to swap instances/variants - but required a direct click on the thing that needs to change) but then also change the variable NOTIFICATION STATUS to NO NOTIFICATION… which will control the variants of a component that is NOT being clicked or interacted with directly.
Doing this type of setup means that now I can have an action taken on a totally different part of the page control a variant of a completely separate component. It takes some setup but I’ve gotten used to basically having static variables named identically to any components that need to be manipulated remotely, as well as the “controller” variables, the ones that will be assigned those static variables and mapped to the instances of respective components used on the page. It’s a great way to have the UI also remember states or to use the variable window to control what variants are used when the prototype is first loaded (or reset) by whomever is viewing it (instead of manually going to that component on the first screen or whatnot and changing it by hand) - also a great way to have a bunch of them change at once… like if you need a bunch of cards to suddenly be outlined in red to show a critical status or something, but you don’t want the content within the cards to change if they have changed state while using the prototype…
ok i’ll stop there… this is the only way string variables have been useful to me TBH. Hoping that changes with being able to map to text in components sometime soon 
1 Like
Very interesting, thanks for sharing! This is something that’s definitely on my wishlist, but I had no idea you could get it to work using string variables.
I’m also using string variables in a somewhat unconventional way, namely as aliases for icons. For example, I’ll have a string named “restore-recently-deleted-item-symbol” with value “arrow.up.trash” which I’m then exporting (along with color variables) to a json which is utilized in a StyleDictionary pipeline to generade ColorSets, SymbolSets and ImageSets for iOS. For example, this ensures we get SymbolSets with a semantic name (restoreRecentlyDeletedItem) for our developers to use in xcode, while still maintaining the reference to the SF Symbol (arrow.up.trash) and allowing us to easily make changes to icons without having to touch the app code.