Workflow Guide

A Practical Figma Translation Workflow for Product Designers

Updated April 2026 · 10 min read

Most product designers hit the same wall when asked to localize a design: extract text, paste into a spreadsheet, wait on a translator or AI tool, paste the translation back, fix every broken layout. Repeat for each language. It's slow, error-prone, and burns the enthusiasm for doing it at all.

The better approach is a workflow where translation is embedded in the design process — not bolted on after. This guide gives you that workflow, step by step, using tools that keep everything inside Figma.

Why Most Figma Translation Workflows Break Down

The typical failure mode isn't the translation itself — it's the friction around it. Teams use hosted translation plugins that hit quota limits mid-project. They lose formatting when text is extracted and reimported. They forget to test layouts with real translated copy, so bugs surface in dev. And for RTL languages like Arabic or Hebrew, the layout mirroring step is often skipped entirely because it feels too manual.

A solid workflow eliminates each of these friction points by design.

The Workflow: 6 Steps

Design for localization from the start

Before you translate anything, your file needs to be localization-ready. That means:

Use text layers, not images with embedded text. Plugins can only replace text in actual text layers.
Name layers clearly. Many plugins use layer names as translation keys. btn_submit is better than Rectangle 42.
Use Auto Layout everywhere. Fixed-width components will break when German text expands 30% or Arabic text contracts. Auto Layout handles this gracefully.
Avoid hard-coded line breaks. What fits on one line in English may need two lines in French. Let the layout adapt rather than forcing wraps.

Set your target languages upfront

Know what you're translating to before you start designing. If Arabic is in scope, you need RTL variants. If German is in scope, test for text expansion (typically 25–35% longer than English). If Japanese, test for character-dense layouts where your English copy might look sparse.

Building this awareness into design reviews — not as an afterthought — cuts the rework in half.

Translate inside Figma with AI — not a spreadsheet

The biggest productivity leap is eliminating the export/import loop. With Lokali, you select a frame, choose target languages, and the plugin replaces text layers in-place. The formatting, fonts, and layer structure stay intact.

Lokali uses your own API key (OpenAI, Anthropic, or Gemini) — you control the model. GPT-4o is excellent for Arabic, French, German, and Japanese. Claude is strong for nuanced copy and tone preservation. The point is you choose — and you're not paying a markup to a plugin vendor's hosted API.

Handle RTL languages separately

For Arabic, Hebrew, Persian, and Urdu, translation is only half the problem. The layout needs to mirror: navigation moves right, icons flip, text aligns right. Lokali handles both steps — it translates the copy and applies the RTL layout swap in the same pass.

If you're translating into both LTR and RTL languages in one session, do RTL last — the layout transformation is destructive to the LTR state of that frame, so keep a master LTR frame untouched and work on copies.

QA every language in Figma before hand-off

This step is where teams skip ahead and pay for it in dev. With translations visible inside Figma, check each target language for:

Text overflow (content cut off by fixed-height containers)
Button text wrapping onto two lines
Navigation links overlapping when text expands
RTL icons not flipped (arrows still pointing LTR direction)
Font fallback rendering (glyph coverage issues appear here)

Fix these issues in the design file, then pull the translation again. It takes 5 minutes. Fixing the same bug in production takes 5 hours.

Sync strings to dev

Once designs pass QA, your translations exist inside Figma frames. If your team uses a translation management system (Lokalise, Phrase, Crowdin, etc.), push the final strings from Figma to your TMS. Developers pull the same keys your design uses, which eliminates the "the translation doesn't match the design" problem entirely.

If you don't have a TMS, exporting a JSON or CSV of translated strings from your plugin is the minimum. Don't let developers re-translate from screenshots.

Choosing the Right Translation Plugin

Plugin type	How it works	Tradeoffs
Hosted API (RTL Layout, Translator, etc.)	Sends text to the plugin vendor's AI API	Simple setup; quota limits; vendor controls model quality; often costs more per character long-term
BYOK (Lokali)	Uses your own OpenAI/Anthropic/Gemini key	No quotas; choose your model; pay AI provider directly; requires an API key setup
TMS-integrated (Lokalise, Phrase, Crowdin)	Syncs with a translation management system	Best for teams with professional translators; $120+/month; significant setup overhead
Google Translate-based (free plugins)	Google Translate API, no AI reasoning	Free; translation quality varies; no RTL layout support

For solo designers and small teams shipping to MENA, APAC, or European markets, BYOK plugins like Lokali hit the right spot: AI-quality translation, no vendor quotas, and RTL support built-in. See the full plugin comparison for detailed feature breakdown.

Text Expansion by Language: What to Design For

Language	Typical expansion vs. English	Key design concern
German	+25–35%	Button labels, nav items overflow
French	+15–25%	Long compound words break layouts
Arabic	−5–15%	Layout must mirror; font line-height ↑
Japanese	−10–20%	Character density; test at smaller sizes
Russian	+15–30%	Long noun compounds in UI labels
Hebrew	−5–10%	Layout must mirror (RTL)

Keeping the Workflow Repeatable

The workflow above should take 20–30 minutes per screen for a 3–5 language set once it's established. If it's taking longer, the bottleneck is usually one of three things:

File isn't localization-ready (fixed-width components, no Auto Layout) — fix the design system, not the translation step
QA is catching layout bugs — those are real bugs; the time is well spent
Plugin setup friction — if you're re-entering API keys or reconfiguring settings each session, standardize on a single plugin and save the config

Translation and RTL in one plugin — free, BYOK

Lokali handles both AI translation and RTL layout swap inside Figma. No spreadsheets, no quota limits, no vendor lock-in. Bring your own API key.

Install Lokali Free →