How to Design Arabic Interfaces in Figma (RTL Mirroring Done Right)
Designing for Arabic, Hebrew, Persian, or Urdu means flipping more than text direction. The entire spatial logic of your interface reverses: navigation moves to the right, icons point the other way, and scrollable content reads from right to left. Done manually, this is a full day of work per screen. Done right — with proper auto-layout setup and a one-click RTL mirror — it takes minutes.
This guide covers everything from enabling RTL in Figma to building components that flip automatically, then using Lokali to translate Arabic UI copy without leaving Figma.
1. Enable RTL Support in Figma First
Figma natively supports RTL text. Before touching any plugin, turn it on:
- Open your Figma file.
- Go to Help → Add right-to-left text.
- Select any text layer. In the Text panel, you'll see a direction toggle (LTR / RTL).
- Set Arabic text layers to RTL — this handles proper glyph shaping and right alignment.
Tip: Figma falls back to Noto fonts if your chosen font doesn't cover Arabic glyphs. Explicitly set Arabic text layers to Noto Sans Arabic, Cairo, or IBM Plex Arabic to avoid surprises in dev hand-off.
2. What "RTL Mirroring" Actually Means
RTL isn't just direction: rtl in CSS. Mirroring a Figma frame means:
| Element | LTR | RTL (mirrored) |
|---|---|---|
| Navigation / sidebar | Left side | Right side |
| Back arrow icon | Points left ← | Points right → |
| List item checkbox | Left of text | Right of text |
| Text alignment | Left-aligned | Right-aligned |
| Progress bar fill | Fills left → right | Fills right → left |
| Form labels | Left of input | Right of input |
Not everything mirrors: brand logos, numeric values, phone numbers, and non-directional icons (play, star, search) stay as-is. That judgment call is the core design skill for RTL work.
3. Build Components That Flip Automatically
Use Auto Layout for everything
Auto Layout with Space Between and horizontal padding adapts naturally when you flip direction. Fixed-position components break. Auto Layout components usually survive.
Add a Direction property to components
Add an Enum variant property: Direction: LTR | RTL. Inside the RTL variant, flip internal layout order, change text alignment, and swap directional icons (arrow-right → arrow-left).
Create mirrored icon variants
Arrows, chevrons, and back buttons need mirrored versions. Create icon variant sets with direction: LTR and direction: RTL, linked to the parent component's Direction property.
Mirror the top-level frame
Use RTL Layout (the dominant plugin with 9.5k+ installs) to mirror a completed LTR frame in one click. Run it on your top-level frame — not individual layers.
Lokali vs RTL Layout: RTL Layout uses a hosted API for translation — meaning API quotas and no control over which model translates your copy. Lokali uses your own OpenAI, Anthropic, or Gemini key. You choose the model quality, you pay the AI provider directly, and there are no Lokali API limits. See the full plugin comparison.
4. Translating Arabic Copy Inside Figma
Layout mirroring and text translation are separate problems. Once your frame is mirrored, you need actual Arabic copy. With Lokali:
- Install Lokali from Figma Community — free.
- Open the plugin and enter your API key (OpenAI, Anthropic, or Gemini). Stored locally — never sent to Lokali servers.
- Select the frames to translate. Choose Arabic as the target language.
- Hit translate. Text layers are replaced in-place, preserving fonts and layer names.
- The RTL layout swap fires automatically — your frame now has real Arabic copy, right-aligned, with correct glyph shaping.
The result is a production-ready Arabic mockup with zero copy-paste.
5. Typography Rules for Arabic UI
| Issue | Best Practice |
|---|---|
| Line height | Set to ≥ 1.5× font size. Arabic needs more breathing room than Latin. |
| Font size | Arabic reads slightly smaller visually at the same px size. Add 1–2px to match perceived size. |
| Ligatures | Use fonts with native Arabic ligature support: Cairo, Noto Sans Arabic, Tajawal. Don't manually kern. |
| Bold weights | Test Bold/Black — Arabic strokes can become illegible. Use SemiBold as your practical maximum. |
| Bidirectional content | English brand names in Arabic copy are handled automatically by Figma's bidi algorithm. No separate layers needed. |
6. Common RTL Mistakes
Mirroring logos and brand names
Logos, product names in Latin script, and trademarks are never mirrored. If your RTL plugin is flipping a logo, run it on content frames only — or lock the logo layer before mirroring.
Forgetting icon semantics
An arrow pointing right means "forward" in LTR and "backward" in RTL. Flip it. But a play button (▶) stays — it's a universal symbol, not directional UI chrome.
Testing with Lorem Ipsum instead of real Arabic copy
Arabic words are often shorter than English for technical terms, but paragraph copy can expand. Always test with real translated text. Lokali's in-Figma translation makes this trivial — you see actual Arabic copy in your layout before any hand-off.
Maintaining separate LTR and RTL files
Two Figma files drift apart within weeks. Use component variants with a Direction property and a single file. When LTR updates, RTL follows with minimal rework.
7. Hand-Off Checklist
- ☐ All text layers set to RTL in the Figma Text panel
- ☐ Arabic-compatible fonts applied (Cairo, Noto Sans Arabic, IBM Plex Arabic)
- ☐ Navigation and sidebar on the right
- ☐ Directional icons mirrored (arrows, chevrons, back button)
- ☐ Non-directional icons untouched (play, star, heart, search)
- ☐ Logos and brand names not mirrored
- ☐ Form labels right-aligned
- ☐ Line height ≥ 1.5× on Arabic text layers
- ☐ Real Arabic copy in place (not Lorem Ipsum)
- ☐ Prototype tested in RTL mode
One-click RTL + AI translation — free, BYOK
Lokali combines layout mirroring and Arabic translation in a single Figma plugin. Free forever, no API quota surprises — bring your own OpenAI, Anthropic, or Gemini key.
Install Lokali Free →