Hoping that after all the UI3 and AI stuffs, they’ll shift their focus back on fixing limitations like these…

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?

@Max73

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 🙏

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.