Setup your workspace 🛠
Streamlined workflow 🤝
Supported use cases 💪
Feature guides 🚀

Integrate dynamic values in your copy using Variables

With Variables, you can store copy in Frontitude with dynamic content. This saves developers time by getting variables inserted by the design or product teams and allows designers to view these texts with mock content in the design instead of using placeholders.

Adding variables to your copy:

You can add variables anywhere you edit your copy with Frontitude.

Frontitude’s web app

  1. Open your Copy Library or your Projects.
  2. Select a component or text.
  3. In the editing panel, highlight the text you’d like to replace with a variable.
  4. Click on Insert a variable.
  5. Select an existing variable or create a new one by entering its name.

Add variables to your copy in Frontitude
Add variables to your copy in Frontitude

In Figma

  1. Open the Edit tab in Frontitude’s Figma plugin.
  2. Select a text in Figma.
  3. In the text area, highlight the text you’d like to replace with a variable. 
  4. Click on Insert a variable.
  5. You can create a new variable or insert an existing one from your workspace.

Add variables to your copy in Figma
Add variables to your copy in Figma

Manage and store all your variables in Frontitude

You can view and manage all the variables created in your workspace. 

  1. Open the Data Management tab in your account settings. 
  2. Under Workspace Variables, you can view or rename all the variables you or your teammates created.

Variables with plurals

Variables can be used hand in hand with plurals. In fact, in many cases, components will include both.

It is possible to add plural forms to a component that includes a variable and use the same variable or a different one.

In the case of a component with plural forms defined, variables can be added exclusively to all plural forms.

Developer handoff

Once created, variables will be embedded in all copy exported from Frontitude. Instead of mock data, the exported content will include the raw string with the variable placeholder.

Example:

variables will be embedded in all copy exported from Frontitude

Fully compatible with the i18next standard

Like all Frontitude’s developer features, variables are fully compatible with the i18next standard. This means developers can use the popular i18n library to fetch copy from Frontitude straight into their code and consume it in the UI components without adding any logic.

Copied!