How to work with Right to Left Languages in Figma.
Using Sublime and Figma as example.
The writing system of many modern human languages have common roots. The Alphabets of languages like English, French, German, and Yoruba all look alike. And they are written from Left to Right (LTR). The Latin (Roman) alphabet has had immense influence on them.
But about 2000 years ago, some languages around the Middle East including Arabic, Hebrew, Urdu among others were written from Right to Left (RTL). For English speakers, it’s like opening your book from the back. Many scientific and literature publications were written and taught using this style. Today, the diversity and culture of these languages still hold.
In the image below, comparison is made between English and Arabic Language. Notice how the Arabic text take more space and are fused together?
Many international software development teams carefully think about how to unify the experience their product users have. So irrespective of which region of the world those personas reside, they should be able to to have no difficulty navigating the product.
Thinking about localizing content has never been easy. One part is ensuring the message being shared mean exactly the same thing semantically across the regions. And with some languages having larger characters, textual components may take larger spaces. This makes the user interfaces inconsistent, and users may feel they are using different products altogether.
For context check BBC Arabic, to design such a page one would need the lorem ipsum of that language.
If you are in charge of a brand or company that needs to localize content in areas where people speak these middle eastern languages, you have your work cut out. Many design tools (including Figma and Sketch) do not have proprietary solution for writing in these diverse languages. Luckily, custom solutions by third parties are available as work around to solve this problem.
For example Figma support page suggests using BIDI plugin for Sublime Text. But Word Processors ( like Google Docs) have perfected writing in these languages, it’s so seamless.
This article shows two methods to dealing with RTL text in Figma using Arabic as example. You must note that using a word processor is faster and easier, but if you need to embed the text in a piece of code, text editors may offer simpler solution to typing the text.
Major Key Alert🔑
Before we begin : change your keyboard layout. Depending on your operating system, please follow the instruction in this help message.
Option 1
Using Word Processor ( Google Docs )
Once you change your keyboard layout, you can type your text easily just as would in English. Do note that the text are coming from right to left.
Option 2
Using Sublime Text
In summary, you write whatever text you in need in Sublime Text then use the plugin to transpose the text. Afterwards, you set the predefined font in Figma and copy your text to the editor for further refinement.
Steps to set yourself up
1 Download Sublime Text and install it.
2 Download this MIDI plugin. Link.
- To download, click on the green button on the page.
- Then click on “Download Zip”.
- Once it finishes downloading, extract the folder.
3 Launch Sublime Text
- In the top level menu, click on “Preferences”.
- Then click on “Browse Packages”.
- A folder will open. Copy the extracted folder from #2c into this folder.
- You should have something like image 1.
- Close the folder.
To ensure Sublime Text can read Arabic Text.
Launch Sublime Text
- Click on “Preferences”, just like in #3a.
- Click on “Settings” and image 2 will pop up.
- Type in content in image 3 into that right section.
- If you can’t see the image below clearly, follow this link.
- Close the pop up window.
Your Sublime Text and Figma are ready to receive A
To write text in either languages is now a matter of switching between language layouts on your keyboard.
Write Your Text
⚠️ Typing Arabic in Sublime doesn’t automatically make the text right to left like in image 4 above. By default whatever character you enter into the editor is written from left to right.
What you need to do is write the text like you were writing the English language. Once you are done with typing, not one moment before, then
- highlight on the Arabic text
- right click and our installed BIDI plugin will pop up
- click on “Transpose text right to left.”
Finally ️
Irrespective of the editor used to write the text, Figma will only recognize it if the font is specifically tailored to the language we are targeting. For Arabic it’s font “Lateef”
Once your font is set, copy your text your from Sublime and Figma will recognize it at once.
