Team

Translation & Internationalisation

Design for global audiences — duplicate wireframes into new locales, translate copy in one click, and validate text-expansion issues before development.

🌐 Team5 min read

How localisation works in WireFlow

WireFlow treats each language as a locale variant of your project. The wireframe structure (layout, element types, link map) stays shared; only the text content diverges per locale. This means a layout fix propagates to all locales automatically.

ℹ️

Supported locales: Any BCP-47 language tag (e.g. fr, ar, zh-TW). RTL languages (Arabic, Hebrew) flip the canvas direction automatically.

Adding a locale

Open Project Settings → Localisation

In the builder, click the gear icon in the top bar, then Localisation. Your base language is shown at the top (set during project creation).

Add target language

Click + Add locale and pick a language from the list or type a BCP-47 tag. WireFlow creates a copy of every text element tagged with the locale.

Auto-translate

Click Translate all to use the AI to fill every text element. Review the results — machine translation is a starting point, not a final product.

Switch locale in the builder

Use the locale switcher in the top bar (flag icon) to flip the canvas between languages. Edits apply only to the active locale.

Text expansion & overflow detection

German and Finnish text can be 40–70% longer than English. WireFlow highlights elements where translated text overflows the original bounding box in red — giving you visual feedback before any code is written.

To fix overflows you can:

Resize the element in the locale-specific view
Shorten the translation copy
Reduce font size for this locale only

RTL layout

When you add an RTL locale (Arabic, Hebrew, Persian, Urdu), the canvas sets direction: rtl and mirrors horizontal layout. Navbar items, icon positions, and text alignment all flip. You can toggle RTL preview at any time from the locale switcher.

💡

Tip: Always test RTL early. Retrofitting an LTR wireframe for Arabic is significantly more work than designing with RTL in mind from the start.

Exporting translations

Go to Export → Strings to download a .json or .xliff file containing all text strings keyed by element ID and locale. Hand this to your professional translator or import it directly into your i18n library (react-i18next, Android strings.xml, etc.).

JSON export sample

{
  "home.hero.title": {
    "en": "Design faster, ship sooner",
    "fr": "Concevez plus vite, livrez plus tôt",
    "ar": "صمّم أسرع، اشحن أبكر"
  },
  "home.cta.button": {
    "en": "Get started",
    "fr": "Commencer",
    "ar": "ابدأ الآن"
  }
}

Assigning a translator role

Invite your translator as a Viewer and share the specific locale link. They can edit text in the locale view only — the base language canvas and layout remain protected.