Figma file translation guide for UX designers

In an increasingly interconnected world, the need for location-based user experiences is multiplying. For UX designers who want to expand their scope internationally, translation of Figma designs is a key step.

Figma is a collaborative design and prototyping tool that designers and teams use to create, share, and iterate design projects in real time. Figma is a platform that works on the basis of the cloud, enabling users to access and work on their designs from anywhere and fostering smooth collaboration among team members. With Figma, designers can create UI/UX designs, wireframes, interactive prototyping, and design systems. Its intuitive interface and powerful features have been widely used by the design community, making Figma one of the leading options for current workflows in design. Figma has about 4 million users worldwide, and its user base is steadily increasing.

This blog post provides a comprehensive procedure for UX designers to effectively translate their Figma designs into other languages while maintaining the essence of the original design.

What are the Figma elements that you could translate?

When a Figma project goes global, there is usually a focus on translating and adapting the following elements:

1. Textual content: Includes all text-based elements in the design, such as user interface labels, buttons, headers, and any other text-based content. Text translation ensures that users with different language backgrounds can easily understand and interact with the user interface.
2. Images and graphics: Some images and graphics may need localization depending on the cultural context. Some visual elements may have different connotations or meanings in other countries, and it is therefore essential to revise or adapt them.
3. Symbols and icons: Ensure that the symbols and icons used in the design are culturally appropriate and understandable to the target audience. If necessary, consider creating variants or alternatives to meet specific markets.
4. Date, time and number formats: These elements can vary from market to market, so it is critical to adjust date, time and number formats according to the preferences of the target market.
5. Colors: Some colors may be associated with different cultures. Although it may not be a direct translation, careful color selection can help create a design that has a greater impact on recipients.
6. Layout and structure of the user interface: Text expansion and design changes may be necessary to conform to the translated text without compromising the overall user experience. Ensure that the layout is consistent and visually appealing in all translated versions.
7. User flows and interactions: Consider the cultural norms and preferences of recipients when designing user flows and interactions. Some actions or gestures may be more familiar and intuitive to some users than others.
8. Call-to-Actions: CTAs are critical in guiding users, and their effectiveness may vary from culture to culture. Locate CTAs to encourage users to take desired actions in order to have a greater impact on them.
9. Error messages and notifications: Ensure that messages and error notifications are clear, concise, and culturally appropriate, and that they are helpful for users to understand any problems they encounter during their interactions with the product.
10. Legal and compliance information: If your product requires legal disclaimers, terms of service, or privacy policies, make sure these documents are translated accurately and in accordance with the laws and regulations relevant to your target market.

Preparing Figma design for translation

To ensure a smooth translation process, it is essential to set up the Figma design correctly. Organize your design files with appropriate naming conventions and clear layer structures. This will be useful for translators to identify and translate textual elements effectively. Avoid the use of text embedded in images, as it makes the translation process more difficult.

Translate the content of the text

In this article on the localization process, we will focus on the translation of textual content, which includes all textual elements within the design:

• user labels
• buttons
• headers
• and other text-based content

As we have seen in other articles in this blog, to facilitate the work of translators, the ideal approach is to export the textual content to a file. This file can later be sent to translators. Finally, you should reimport the translated file into the Figma project: every textual content should be in the right place to avoid long and tedious copy-paste.

Fortunately, many Figma plugins facilitate this export-import process, eliminating the need for manual operations. You can find an overview of available plugins by visiting the Figma Community. In this hub you will find various plugins and resources created by designers and programmers. Just select the Plugins section and look for "translation."

In this article we will focus on the free Conversis Translation XML Text Export & Import plugin, which allows you to export the textual content of a Figma project in XLIFF or XML formats and re-import the translated file into a copy of the original project, overwriting the text with the translation.

We will use a free model from Figma as an example:

Using the Conversis Translation XML Text Export & Import plugin

Installing the Conversis Translation XML Text Export & Import plugin is simple:

1. To begin, open Figma and navigate to the Figma Community by clicking on the "Community" button in the upper left corner of the Figma interface. At this point, a new window will open with all available plugins and design resources.
2. Once you have joined the Figma Community, use the search bar to search for the Conversis Translation XML Text Export & Import plugin. Type the name of the plugin in the search bar and click the Enter key. The search results will show relevant plugins; the Conversis Translation XML Text Export & Import plugin should be listed.
3. After finding the Conversis Translation XML Text Export & Import plugin, click on its icon or name to view its details. This page provides information about the plugin, including its description, author, and user reviews.
4. To install the plugin, click on the "Try it out" button to display a dialog box. Confirm the installation by clicking "Open in Figma design." Figma will automatically download and add the plugin to your workspace.

Once the installation is complete, open the Figma project you wish to translate. Make sure the project contains all the textual elements you want to export for translation.

You can access the Conversis Translation XML Text Export & Import plugin directly on Figma. To do so:

1. Open a Figma project file or create a new one.
2. In the top menu bar, navigate to the drop-down menu "Plugins"
3. Find the Conversis Translation XML Text Export & Import plugin.
4. Click it to access its features and functionality.

When you use the Conversis Translation XML Text Export & Import plugin for the first time, you may need to grant the necessary permissions to ensure its smooth operation. Some plugins may require access to your Figma files and data to perform certain actions, such as exporting and importing textual elements. Figma will ask you to grant the plugin permissions so that you can proceed by allowing the access necessary to ensure that the plugin works seamlessly within your project workflow.

With the plugin interface open, you will see options for exporting the text to be translated. Select the appropriate export format, which can be XLIFF or XML, depending on your preferences or the requirements of the translation service used.

Note: the XML format is recommended since the XLIFF format may not be compatible with all CAT tools.

The plugin will automatically extract all the textual elements from your Figma project, preparing them in the chosen format, which at this point will be ready for translation.

Once the text is exported, share the XML file with your professional translators or translation company. Translators can use these files to work directly on the translated text while maintaining the structure of the original project. The XML file can be opened in any CAT tool. If you need help configuring your CAT tool, contact us.

Collaborate with professional translators

Accuracy and quality of translation are critical to an effective localized UX project. Work with professional translators or translation services who are proficient in the target language and experienced in UX terminology and design-related details. Clear communication between the UX designer and translators ensures consistent translation.

Importing translations with Conversis Translation XML Text Export & Import plugin

After receiving the translated XLIFF or XML files from your translators:

1. Back to your Figma project.
2. Creates a copy of the original project to ensure that the translated text is integrated without changing the original.
3. With the copy of the project open, access the Conversis Translation XML Text Export & Import plugin again.
4. This time, select the option to import the translated text.
5. The plugin will reimport the translated content into the Figma project, automatically replacing the original text with translations.

Here is what the sample file looks like after the translation step (we translated the text by type as a test):

Review, refine and test

Carefully review imported translations to make sure they fit the layout of the project. Text expansion is a frequent challenge in translation, where the translated text can be longer than the original. Designers must take this possibility into account by creating flexible UI components and ensuring sufficient white space to contain longer translations without compromising the integrity of the design. Modify text boxes, font sizes, or user interface components to accommodate any kind of text expansion caused by the translated content.

After integrating the translation, conduct detailed testing to ensure that the user experience is smooth and intuitive. Urge users and stakeholders to give feedback to identify any problems or improvements that need to be made to the localized project.

Translating Figma designs for an international audience is a complex process that requires careful consideration of cultural nuances and design elements. By following the steps outlined in this guide, UX designers can create the perfect user experience that impacts users with different language backgrounds. It is critical to collaborate effectively with professional translators, be attentive to design adaptations, and iterate based on user feedback to achieve a successful localized project.