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:
- English font is [x] and arabic font is [y] → add the font names as typography variables to switch between
- Text direction, english [ltr] and arabic [rtl] → manually handle or use a plugin like RTL layout
- 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