Variables: Cannot use it with the text property of as text component

The new variable feature is really awesome and opens a lot of opportunities but I don’t know why you can not bind a text variable to the text property of a component. I would love to create local text variables in my mockups in order to bind it to every wordings but right now, I can not. So I don’t know if I’ve got to rebuild all my text components and remove the text property or wait for an update … I don’t understand how and why they missed it.

13 Likes

Agree! Please modify the text property to include the variable. Working with UX writers will be simpler, especially when translating copy into different languages.

Regards, Figma!

3 Likes

Try here, in text style section:
image

1 Like

@Natalie_Doronina — What they’re referring to is the text property used in components. While it’s true a text variable can be applied to a text style, it’s not currently a feature for component text properties (even if the text layer in the component is linked to a style).

4 Likes

Agreed - this was literally the first thing I wanted to do with variables. The new variables functionality gets us SO CLOSE to being able to type directly into prototypes (with enough keypad interactions set up) but this is a last hurdle. (along with multi-key inputs of course)

4 Likes

I too would like to set the text value of Variables to a component property, I am planning to use Variables to manage the text content used in the product, but currently I have to give up using it in conjunction with component properties. I hope this feature will be added.

This is very important, since we make extensive use of the Properties for labels, values, etc. (It makes it a lot easier for the designers than clicking in to the text.) I don’t want to have to unbind all those Properties, but I don’t want to limit our prototyping capabilities.

YES! please this is too necessary!

@Kyle_Rawding, providing users with a mostly working keyboard experience using variables is possible! @Levi_Jones seems to have cracked it:

Here’s the community file: https://www.figma.com/community/file/1255367798948126636

Levi mentioned in his twitter thread that backspace isn’t really available, it clears the entire input.

2 Likes

So cool! I work mostly on desktop products, so I did a similar method with 26 keyboard input variable interactions set up on the same text field, but recognizing capitals doesn’t work well without the explicit caps-lock button.

1 Like

It is pretty essential, I was trying to components with Localization and I realized I can’t link local variables to component text when text has a property attached from the HOC wrapper.

Please put those on the road map

1 Like

+1 This should be prioritized as it feels fundamental to be able to localize components within a design system.

Having to detach components and attach variables feels like it completely defeats the point entirely - as changes then become massive pain points, vs updating the design system at large.

3 Likes

Yep, even to make a simple select field prototype, I need to destroy my text properties and replace them with variables. Other way I can’t paste a selected list item text into the value.

2 Likes

+1 Yes, please! I cannot localize components from my Design System due to this limitation and the Variables end up being pointless in this case. This should definitely be prioritized.

2 Likes

According to this article, Figma is working on the ability to apply variables to component properties.

Additional component property types: Currently, you can only assign variables to variant properties. We’re working to support additional component property types.

7 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.