Figma String Variables: Manage UI Text in One Place

WHY IT EXISTS Manually updating text across dozens of screens is slow and error-prone. A single typo in a button label could mean hunting it down in multiple places, and ensuring consistency across a large project is a constant battle. String variables were created to centralize text management, ensuring consistency and speed.

THE MENTAL MODEL A string variable is like a named placeholder for text. You create a variable, say welcome_message, and give it a value like "Hello, user!". Then, instead of typing "Hello, user!" in your design, you apply the welcome_message variable to your text layers. The power comes when you need to change it; update the variable once to "Welcome back!" and every connected text layer updates automatically.

HOW IT WORKS In Figma, you create variables within collections. You'd create a "Strings" collection, then add a new string variable, for example, cta_button_text, with a value of "Get Started". Then, you select a text layer in your design and, in the Text section of the design panel, you apply the cta_button_text variable. The layer's content now displays "Get Started" and is linked to the variable.

WHEN TO USE IT Use string variables for any text that appears in multiple places or might need to change based on context. This is ideal for button labels, headlines, form field placeholders, and legal copy. It's especially powerful for localization, where you can create a "mode" for each language (e.g., English, Spanish) and switch your entire design's text with one click.

WHEN NOT TO USE IT Avoid using string variables for truly unique, one-off content like the body text of a specific article or a user's unique comment in a mockup. The overhead of creating a variable isn't worth it if the text will never be reused or changed system-wide. It's for repeated or swappable text, not all text.

ONE CANONICAL EXAMPLE To prepare a design for translation, create a variable collection named "Localization". Add a string variable called greeting with a default value of "Hello". Then, create two modes: "English" and "Spanish". In the "English" mode column, the value for greeting remains "Hello". In the "Spanish" mode column, you set the value to "Hola". By applying this variable to a text layer and switching the frame's mode, you can instantly preview the translated UI without duplicating frames.