The problem of always-changing content
During the process of design, there might be some changes imposed by different departments on the content. Sometimes this change will be only about one word, and sometimes it’s about changing the tone of voice or the whole document. In such situations, you may ask your developer to change something, and tomorrow, another developer will replace the old content unconsciously.
When it comes to multi-language websites, it’s even more challenging. It’s not easy to design 700 pages in English and LTR and duplicate them in Arabic or Persian or other RTL-style languages. Another way is to check and update every change for each file and each language during the design and development process. But it also results in team confusion and headache for the design department.
To be on the same page about the content, you need a cross-team dictionary, but the platform you’ll choose for everyone to contribute is a pain. Your team may use Sheets to keep everything in one place and updated. Imagine using the word “Login” throughout your design, your dictionary, and everywhere. Someone comes up and tells you to use “Sign-in” from now on.
Ok, we’ll update every page in our design over the next 10 days…
It’s time to fix this issue: Creating an i18n file inside Figma
What the hell is i18n?
i18n is what developers use to handle dynamic contents and languages. Within their code, there is a file containing every word and sentence in different languages. There is a link below that explains how it works with Vue JS: (It shows some code examples so you can get a sense of how it works):
How to build something similar in Figma
- Creating an i18n library file
Let’s begin by creating a new file in Figma named “i18n”. You should be able to publish this file in your team and use it in other design files.
2. Separating Pages
Using each page for each page in other design files has been useful for me. Try different conventions and tell me how it goes in the comments. I used the following convention:
[Project Name] [Page Name] Version
[New Website] [Home] v0.1
3. It’s time to create some content components
Create components for each content in the page, separated by language.
4. All you have to do now is to publish the changes
5. Utilizing i18n library as a source for all content
Once you publish the file as a library, you can use the components. Updating content is no longer painful. Thanks to Figma’s auto layout, you don’t have to change everything after imposing significant reforms on your content. Just a simple update from a library file and BOOM!
I am curious to hear your thoughts about this article. Did you use it in your project and found it helpful?
By Saleh Akhgar: Product Designer at Zarela
