A bilingual design system, built once

Built twice

Most products that work in two languages get built twice.

The old way was to design every screen in English, then copy it, rebuild it in Arabic, flip the layout by hand, and swap the text. Two versions of every screen, forever, and every change had to be made in both.

The old way meant building every screen twice, once in English and once in Arabic.

On a small site you can live with that. On a banking product with hundreds of screens it falls apart, because the work doubles, the two versions stop matching, and one small change means doing the same work in two places.

One system that switches itself

So my design-system team and I built it a different way. Each screen is tied to a single language setting, and flipping that one setting changes the whole screen at once.

Here is what switches on its own:

• The text, swapped to the matching language.
• The font, swapped to the one each language uses.
• The direction, because Arabic reads right to left and English reads left to right.
• The icons that need mirroring, like arrows.
• The font sizes, set per language so each one reads at the right size.

Move a screen from English to Arabic and the whole thing flips on its own.

Making this work meant getting past a wall in Figma. It does not normally let a component's on-or-off property follow a language mode, so changing the language could not flip the component with it. We found a workaround that connected the two, one Figma does not officially support. That one trick is what made the whole system switch on its own.

No second set of files. No manual rebuild. One source that holds both languages at once.

Built in layers

The system was not one big file. We split it into separate libraries, each with one job: foundations for color and type, graphics for icons and illustrations, a text library that held both languages, and components for the screens on top.

The system split into separate libraries, each with one job. Localization lives in the text library, holding both languages and switching direction, so a single source drives every screen across web, mobile, and tablet.

This kept the system clean and easy to grow. Built for Neo, it ran the bank's whole app, more than a dozen products, all from the same libraries. Web, mobile, and tablet each pulled only the parts they needed.

The split also let people work in parallel without stepping on each other:

• Graphic designers stayed in foundations and graphics.
• Copywriters had the text library to themselves, translating and publishing without waiting on a designer.
• UX designers focused on the app screens and components.
• DesignOps kept all the documentation in order.

It traveled

The real test of a system is whether it works anywhere but where it was born. This one did.

We reused the same architecture on two more clients, Dufaa and Rowm, instead of building from scratch. We kept the structure and the language-switching engine and skipped the slow part. It saved a lot of time, and it proved the approach was not a one-off built for a single bank.

I teach it in the open

I have taught this method publicly, in a workshop built around a made-up product so no real client work was exposed.

That is the bar I held this whole case study to. It explains an approach, not a client's private work, which is why it needs no password.