I Was Tired of Copy-Pasting Translations in Figma - So I Built My Own Tool

I do a lot of design work for clients who have users all over the world. That means my designs can't just look good in English, they have to work in French, Hindi, Spanish, and German too.

In the past, this was a massive headache. After finishing a design, I’d spend Time copy-pasting translations from Google Sheets back into Figma. Then I’d find out the German version was way too long and broke my buttons. It was frustrating and took forever.

So I built Polyglot UI, a Figma Plugin that sits Right Inside my Workflow to solve my own problem, designed to be a complete internationalization (i18n) toolkit for designers.

How I use it every day
I don't wait until the end to think about languages anymore. Here is how it helps me:

Core Translation & Localization
1) Instant scanning of your Figma design to extract and translate text into French, German, Hindi, and Spanish via the Lingo.dev API.
2) Live Canvas Preview: A real-time toggle that lets you "hot-swap" your actual Figma layers between languages so you can see exactly how the UI looks in different locales.
3) Stress Test (Pseudo-localization): A "break-it-first" mode that simulates expansion and accents (e.g., [!!! Ààééîî !!!]) to push your layout to its limits before you even start translating. If it survives stress mode, it’ll survive real translations. Because real translations break UIs in ways English never will.
4) Manual Overrides (Human-in-the-loop): Click any translation in the list to edit it directly. These tweaks are saved as persistent overrides in the Figma file, and the Plugin is smart enough to never overwrite your custom wording.
5) Custom Badging: Manually edited fields are clearly flagged with a "Custom" badge so you can easily distinguish between AI suggestions and approved brand voice tweaks.
6) The plugin automatically adapts to Figma's Light and Dark themes for a seamless workspace experience.
7) Top-Bar Quick Clear: A fast-access button in the header to reset your current session and revert the canvas back to English without touching your settings.

📦 Developer Handoff
Export to JSON: One-click export for any language. It generates a clean, developer-ready .json file containing all your approved translations and manual overrides, ready to be dropped into a React or mobile app.

How it works under the hood

For those curious about the technical side,
The underlying logic for the translation process is split between two main files:

ui.html : This file contains the core API logic.
It handles the fetch calls to the Lingo.dev engine. It manages the targetLangs array and the asynchronous batching of translation requests.
It also contains the pseudoLocalize function used for the Stress Test.

code.ts : This file handles the Figma interaction logic.It scans the design to extract text nodes.
It manages the persistence by saving and retrieving translations using Figma's setPluginData and getPluginData.
It ensures that your manual overrides aren't lost by checking for the isManual flag before applying updates.

In short: ui.htmlis the "brain" that talks to the AI, and code.ts is the "hands" that manages the design data inside Figma.

Github Link

Keeping it simple
I didn't want a "heavy" enterprise tool. I just wanted something that sits in Figma and does the boring work for me so I can get back to designing.

If you're tired of copy-pasting translations for your clients, you should try Polyglot UI. It saved a lot of my time.

Building the tool you actually need is a great feeling. 🏗️🚀