I was playing around with the idea of using variable modes to easily switch between using Latin script and, say Arabic, but where I think I’m let down is having to manually change the text left-right-center alignment.
Thanks!
Page 1 / 1
Hey @Jean-Rene_Lagace, thanks for the feedback!
We’ll pass this feedback onto our variables team for future consideration.
As a senior UX UI Designer, I would appreciate this feature a lot!
You have no idea how much this could make our lives - Arabic designers - easier.
I have to manually create a variant for each component where the alignment is mirrored because clients need to see the design in both Arabic and English.
It would be so convenient if it were as easy as switching from dark mode to light mode and vice versa.
I mean wow, talk about saving time!
The only workaround I see is to use a resizer autolayout (I like to name it resizer, because for me it serves different purposes). In this specific case “Text” is set to Hug, Align Center. “Resizer” is set to Fill Container. When “Resizer” visibility is off, text appears centered, otherwise text is left aligned, since “Resizer” is pushing it towards left ( you can make it right, depending on your needs). Visibility of Resizer you can control with variables.
In general, this method works fine for me, but only for short text like labels and headlines. For paragraph text youn need more complex workaround.
I have a similar challenge. For an app I work on, I’ve created a design system used by all designers. The designs we provide for development are required to be 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).
This requires doing the following:
- Change font and font size / styling
Can be handled with variable switching - Change text direction to right aligned
Can be handled with a plugin like RTL layout - For components like list, checkbox, header, change multiple elements direction to right
Can be handled by creating variants of layoutdirection as ltr and rtl
The problem with all of this is that it’s a lengthy process and is not scalable. Hoping supports localization with alignment switching soon on variable, autolayout and component levels…
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.