1- Project Overview
Designing for bilingual, bidirectional languages is notoriously challenging—especially when switching between English (LTR) and Arabic (RTL). Manual translation, layout flipping, and font adjustments slow teams down, introduce inconsistencies, and break design systems.
To address this, I built a Figma plugin that performs intelligent EN ↔ AR translation with full RTL support and deep design-system awareness. The plugin handles everything from text translation to component variants, text-style mapping, layout direction, and icon mirroring—all while preserving overrides and respecting Figma constraints.
What the Plugin Does?
EN ↔ AR translation.
Text style mapping (EN H1 → AR H1, EN Body → AR Body, etc.).
RTL/LTR automatic alignment.
Layout direction flipping.
Icon mirroring.
Component variant switching.
Retry logic for API throttling.
Fallback fonts if no Arabic style exists.
Impact:
This plugin dramatically reduces localization time—from hours of manual editing to seconds. It ensures consistent typography, responsive layouts, and accurate bidirectional presentation.
2- My Role & Responsibilities
As a Senior UX Designer, I led the end-to-end experience:
Defined the problem space and user goals.
Conducted competitive analysis.
Identified technical constraints of Figma's API.
Designed the UX flows and interaction model.
Created the visual identity, plugin icon, and hero image.
Architected the translation engine logic with AI assistance.
Managed iterative development using ChatGPT + Claude + Gemini.
Validated functionality using real designs.
This case study demonstrates my ability to operate as a strategic product thinker, technical UX designer, and problem-solving partner alongside engineering.
3- Problem Statement
Designing for Arabic introduces unique complexities, as illustrated:
English is LTR, Arabic is RTL.
Text alignment flips.
Auto-layout needs reversal.
Icons often need mirroring.
Component variants must adapt.
Text styles differ across languages.
Figma plugins often break instance overrides.
Most existing localization plugins either oversimplify the problem or break core elements of the design system.
I wanted to create a tool that solves the entire workflow holistically, not just translation.
4- Competitive Analysis
Before designing the solution, I evaluated the top plugins claiming Arabic or RTL support and summarized it into the following table.
Conclusion of Competitive Analysis:
Most plugins only solve translation or mirroring—not both—and nearly all of them break design systems, remove auto-layout, require detaching, or ignore style mapping.
This gap validated the need for a robust, design-system-friendly solution, guiding my product direction.
5- Research Insights
Insights gathered from testing plugins, reviewing Figma community threads, and observing designers' workflows:
Designers want automation without breaking components.
RTL conversion must consider direction, alignment, and spatial relationships.
Text translation must maintain semantic hierarchy (H1 → H1).
Designers prefer one-click localization instead of multiple steps.
These insights shaped the core philosophy: Do everything automatically, but preserve everything designers already created.
6- Design Process
User Flow:
I mapped three main flows:
1- Translate English → Arabic.
2- Translate Arabic → English.
3- Swap the entire layout between LTR ↔ RTL.
Each needed to be instant, safe, and reversible.
Key UX Decisions:
Minimal UI: simple source language selector + translate button.
Automatic style mapping for consistency.
Avoid destructive operations (no detach, no removing auto-layout).
Async-safe logic to avoid Figma API errors.
Clear feedback messages.
Visual Design:
Created:
Plugin icon (simple, two-directional arrows representing EN ↔ AR flow)
Hero image featuring core features
Clean UI matching Figma’s native plugin style
7- Building the Plugin (with AI Collaboration)
I collaborated heavily with Claude, ChatGPT & Gemini to:
Scaffold the translation engine.
Implement text-style mapping logic.
Handle RTL/LTR conversion.
Debug issues (including Figma API breaking changes).
Ensure instance overrides weren’t overwritten.
Build intelligent variant switching.
This hybrid workflow allowed me to stay focused on UX logic while rapidly iterating through technical challenges.
8- UX Testing & Iteration
I tested the plugin on:
Websites with component variants.
Individual Components.
During these tests, I encountered several real-world issues that required refinements to ensure the plugin was stable, fast, and production-ready.
Key Refinements from Testing:
1- Figma API Breaking Change: getMainComponent → getMainComponentAsync:
While testing components and instances, Figma rolled out a significant API update that deprecated:
node.mainComponent(), node.getMainComponent()
and required all developers to migrate to the asynchronous: await node.getMainComponentAsync()
This change caused the plugin to temporarily break. I updated the entire component-handling logic to use the new async API and redesigned internal flows to ensure:
1- No race conditions.
2- No lost overrides.
3- No blocking of other actions in the UI.
4- Stable performance across large documents.
This was a critical compatibility fix to keep the plugin functional under the updated Figma API.
2- MyMemory API “Free Tier” Constraint (5000 chars/day)
The plugin originally translated text in large batches using parallel requests. During testing, I discovered a hidden limitation in the MyMemory Translation API: Free, anonymous usage is limited to only 5000 characters per day.
This caused some translations to silently fail or return incomplete results.
To accommodate this limitation without requiring users to buy an API key, I redesigned the architecture of the translation flow:
Implemented delayed batch processing.
Added intelligent throttling between requests.
Reduced payload sizes per request.
Implemented automatic retries when rate limits are hit.
Added graceful fallbacks to preserve UX quality.
This restructuring ensured that even users on the free tier could successfully translate full design files by spacing out API calls efficiently—keeping the plugin usable at zero cost.
9- Final Outcome:
Core Features Delivered:
Bidirectional EN ↔ AR translation.
Style mapping (H1/Body/Caption/etc.).
Component variant localization.
RTL/LTR alignment & direction switching.
Icon flipping.
Automatic layout reversal.
Retry logic for API throttling.
Override-safe translation.
Full design-system compatibility.
Designer Impacts:
Reduced localization time from hours → seconds.
Eliminated manual alignment fixes.
Ensured brand consistency across languages.
Improved developer handoff with unified typography.
10. Learnings & Reflections
This project strengthened my experience in:
Designing for multilingual & bidirectional contexts.
Partnering with engineering through AI-assisted development.
Navigating API limitations with creative UX solutions.
Building tools that empower large design teams.
Thinking holistically about systems, not just screens.
11- Conclusion
This plugin demonstrates my ability to bring complex product ideas to life—from research and UX architecture to interaction design, technical logic, and iterative refinement.
It embodies what I value as a designer: empathy for real workflows, respect for design systems, and crafting tools that remove friction to empower creativity.
