---
title: String Variables & Binding
description: Bind Figma text layers to your project's strings so the plugin can preview and render every locale.
---

Apptonomy Bridge localizes a screen by driving your text layers from Figma variables. Each variable holds one of your project's strings, and swapping the active locale swaps every bound layer at once. This page explains the variable collection the plugin manages, how to bind a text layer to a string, how live locale preview works, and how translations are cached.

## Before you start

- The plugin connected to your project. See the [Figma Plugin overview](/docs/figma-plugin/overview).
- Your pages and frames set up with the `apg_` prefix. See [Figma File Structure](/docs/figma-plugin/file-structure).
- Strings and target languages defined on the project in the webapp.

## The ApptonomyTranslations collection

The plugin creates and maintains a Figma variable collection named **ApptonomyTranslations**. You don't build it by hand — the plugin creates it if it's missing and keeps it in sync with your project:

- It adds one variable for every string in your project. Each variable is named for the string's ID.
- It removes variables for strings that no longer exist in the project.
- It stores translations in a single variable mode named `apg`, which it applies to every `apg_` page.

Because the collection is generated from your project, the set of variables you can bind to always reflects your project's current strings.

:::note[Refresh to pull new strings]
If you add strings to your project in the webapp after connecting, use the refresh control next to **Preview Language** to pull the latest project data. The plugin reconciles the ApptonomyTranslations variables against the updated string list.
:::

## Bind a text layer to a string

Binding tells the plugin which string a text layer should display.

### 1. Select the text layer

Select the text layer inside an `apg_` frame that should carry the string.

### 2. Bind its text content to the matching variable

In Figma's right panel, bind the layer's **text content** to the ApptonomyTranslations variable whose name matches the string you want to show. Figma exposes this as the text-content variable binding on a text layer.

### 3. Repeat for every localizable layer

Bind each headline, subhead, and caption to its corresponding string variable. Any text layer left unbound is treated as static art — the plugin never rewrites it.

:::tip[Keep bindings identical across pages]
Bind the same string to the same-named frame on every platform/size page (for example, bind `apg_screen1`'s headline to the same string on the iPhone page and the Android page). Consistent bindings mean a single locale switch updates every device variant the same way.
:::

## Live locale preview

The **Preview Language** picker on the plugin home lists your project's target languages. Choosing one renders that locale directly on the canvas:

1. The plugin loads the strings for the selected locale.
2. It writes each translation into its ApptonomyTranslations variable.
3. Every bound text layer updates to the translated text, with the locale's font and reading direction applied (see [Fonts & Text Sizing](/docs/figma-plugin/fonts)).

Switching back to your project's primary language restores the source strings. The refresh icon next to the picker re-pulls project data and resets the canvas to the primary locale.

## Translation caching and refresh

To keep preview fast, the plugin caches each locale's translations locally for **24 hours**. When you preview a locale:

- If a cached copy exists and is under 24 hours old, the plugin uses it.
- Otherwise it fetches fresh translations from the platform and updates the cache.

Your project's primary language is never fetched — its strings come straight from the project data, so the primary locale always reflects the latest source copy.

The refresh control forces a fresh pull for the current locale, bypassing the cache. Use it right after you've updated translations in the webapp and want to see them in Figma before the 24-hour window elapses.

:::note[Why you might see stale text]
If a translation you just edited in the webapp doesn't appear in preview, the 24-hour cache is likely still serving the old copy. Click refresh to force a fresh pull.
:::

## Verify it worked

- Selecting a non-primary language in **Preview Language** updates every bound text layer to the translation.
- Unbound (static) layers stay unchanged.
- Switching back to the primary language restores your source copy.

## Related

- [Figma File Structure](/docs/figma-plugin/file-structure)
- [Fonts & Text Sizing](/docs/figma-plugin/fonts)
- [Exporting Screenshots](/docs/figma-plugin/export)