Apptonomy

String Variables & Binding

3 min readLast updated View as MarkdownAgent setup

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.
  • 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

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.

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.

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).

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.

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.