Figma File Structure

Apptonomy Bridge only looks at pages and frames you mark for it. This page covers the naming conventions it requires, how it validates frame sizes, and how to lay out text so it can be localized and rendered.

Before you start

The Apptonomy Bridge plugin connected to your project. See the Figma Plugin overview.
If you’re starting fresh, open the Apptonomy Figma template from the webapp’s Figma page (Open Figma Template) — it already follows every convention below.

The `apg_` prefix

The plugin ignores anything not marked with the apg_ prefix. The prefix is required in two places:

Pages you want the plugin to see must start with apg_.
Frames you want exported must start with apg_.

A page without the prefix is skipped entirely. A frame without the prefix is skipped even if its page is prefixed. This is deliberate — it lets you keep working pages, component libraries, and scratch frames in the same file without them being picked up.

One page per platform and size

App Store and Google Play require different screenshot dimensions per device class. Give each platform/size combination its own page, and encode the pixel size in the page name.

The plugin reads a WIDTHxHEIGHT token from the page name (for example 1290x2796) and uses it to size-check every frame on that page. A page name like apg_ios_6.7_1290x2796 both marks the page for export and tells the plugin the exact frame dimensions to enforce.

Frame naming

Each frame on a page is one screenshot. Name them in order with the apg_ prefix, for example apg_screen1, apg_screen2, apg_screen3.

Keep frame names unique within a page. If two frames share a name, the plugin renames the duplicates at export time (to duplicate_1_<name>, duplicate_2_<name>, and so on) and reports it in the export activity log, so you won’t lose a screen but the naming won’t be what you intended.

For consistency across languages and devices, use the same frame names on every page. That way apg_screen1 means the same screen whether it’s the 6.7” iPhone page or the Android phone page.

Frame sizing validation

When you export, the plugin checks each frame against the size encoded in its page name:

Frames whose width and height match the page’s WIDTHxHEIGHT are exported.
Frames that don’t match are skipped, and the count is reported in the export activity log as “N frames with incorrect size found!”.
If a page name has no WIDTHxHEIGHT token, no size check runs and all prefixed frames are eligible.

Frames are also skipped when they have no children or are hidden. So an empty placeholder frame or a frame you’ve toggled invisible won’t be exported.

Text boxes

Put every piece of screenshot copy in its own Figma text layer inside a frame. The plugin localizes screens by swapping the contents of text layers that are bound to string variables — see String Variables & Binding for how binding works. A text layer that isn’t bound to a string variable is treated as static art and is left untouched during locale preview and export.

Because the plugin adjusts alignment per locale, leave enough room in each text box for longer translations. Copy that fits on one line in English may wrap in German or Finnish.

Fonts

The plugin sets a text layer’s font per locale when you preview or export a non-primary language, defaulting to the Noto family so every script renders. Right-to-left locales get right alignment automatically. See Fonts & Text Sizing for the full behavior. When you design in your primary language, use whatever fonts your brand calls for — the per-locale substitution only kicks in for languages whose script your chosen font can’t render.