String Variables & Binding
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
Section titled “Before you start”- The plugin connected to your project. See the Figma Plugin overview.
- Your pages and frames set up with the
apg_prefix. See Figma File Structure. - Strings and target languages defined on the project in the webapp.
The ApptonomyTranslations collection
Section titled “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 everyapg_page.
Because the collection is generated from your project, the set of variables you can bind to always reflects your project’s current strings.
Bind a text layer to a string
Section titled “Bind a text layer to a string”Binding tells the plugin which string a text layer should display.
1. Select the text layer
Section titled “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
Section titled “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
Section titled “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.
Live locale preview
Section titled “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:
- The plugin loads the strings for the selected locale.
- It writes each translation into its ApptonomyTranslations variable.
- Every bound text layer updates to the translated text, with the locale’s font and reading direction applied (see Fonts & Text Sizing).
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
Section titled “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.
Verify it worked
Section titled “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.