Skip to main content

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 eltr] and arabic rtl] → manually handle or use a plugin like RTL layout
  3. Components for english oltr] and arabic artl] 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

Be the first to reply!

Reply