Skip to main content
Hamda
Hamda
New Member
July 9, 2025
Question

Arabic rtl support for switching font, font style, text direction and component elements direction

  • July 9, 2025
  • 1 reply
  • 250 views

For an product I’m working on, the design team has a system used by all designers. We hand-off designs both in english and arabic. So all components and pages need to support switching the initial english (left to right alignment) design to arabic design (right to left).

Currently, I handle this in the following way:

  1. English font is [x] and arabic font is [y] → add the font names as typography variables to switch between
  2. Text direction, english [ltr] and arabic [rtl] → manually handle or use a plugin like RTL layout
  3. Components for english [ltr] and arabic [rtl] view → eg list, checkbox, header → add layout direction variants to change multiple elements direction to right for arabic

The problem with all of this is that it’s a lengthy process which is not scalable. The ideal solution would be that when a language is identified and set as a property/variable/setting, then on each element/frame figma smartly set the right rtl expectation → text direction right aligned, set font and it’s sizing updated from text styles, elements inside autolayout and components set to rtl in the right order, even icons mirrored without the need for creating component variants specifically for arabic

1 reply

Maria_Kolomenska
Maria_Kolomenska
New Member
September 13, 2026

Year late to this, so you've probably sorted something out by now - leaving it
for whoever lands here from search.

The thing standing in the way is that you can't bind auto-layout direction to
a variable. There are open requests for it, but until that lands you can flip
what's inside a container and never the container itself.

Before you get that far thougj, if your text is on auto line height, the
moment you swap to an Arabic font every row changes height. Arabic faces just
report different leading. So your layout shifts and it looks like the
direction change broke everything, when all that happened was the font. Set
line heights in pixels first. Dull, but it saves you.

Icons are the other one. You can't safely mirror them automatically — arrows
flip, play buttons don't, logos never do, and there's nothing in an icon that
tells you which kind it is. So it ends up per-icon no matter what.

I got fed up in the end and built something that does your 1–3 in one pass.
You've clearly got a setup working already though - mainly wanted to flag the
line height thing, that one caught me out for ages.

https://www.figma.com/community/plugin/1678379000112768515

Terms & ConditionsAccessibility statement