Localization of your Figma design

What is Figma?

Released in 2016, Figma became one of the most popular tools for collaborative design development. It covers the tasks for web product prototyping and can support interface creation from start to finish. Figma's popularity (more than 1 million users) is conditioned by its ease of use, web and desktop interface, and a full-fledged list of tools for collaboration and web design creation.

How has Figma changed the design and development process?

Before Figma was released, designers had been facing a lot of troubles like sharing the layouts, working on the same task with the team, or showing updates to customers. Any of such tasks implied the files import, export and forwarding.

Real-time collaboration. The collaborative functionality allows customers to leave comments and share the design with others by invitation link (choose view or edit permission.) Inside Figma, users can start a voice chat and see the changes in real time.

Minor technical requirements. No matter what browser or OS prefers, the designer or customer. Figma supports all of them and allows fast SSO.

Ready CSS styles. The team can get the correct CSS code for any element or group. This code can be used for creating technical documentation or assigned to the corresponding element in HTML.

Plugins for an improved experience. There is a list of different plugins that are available in Figma. They support users with various tasks, for example, background cutting or creating 3D. We at Lingohub created the plugin to help you localize design faster without spending time on manual tasks.

Ability to create and fast change the design systems. Figma allows the creation of components, which means the designer can collect essential elements in one system and effectively manage them. For example, the requirement "fix all the buttons' color" can be done just by changing the main element; all others will be updated similarly.

API and Migrations. Figma provides a list of plugins and drag-and-drop options for simple migrations. At the same time, the Figma API allows comprehensive options for reading and file extractions.

As a conclusion we can say that Figma is a perfect tool for interface prototyping and creating a successful design for your product. But perfect design and content are often the first achievements. Many products in their development process start to expand to new markets, and here we come to interface localization.

Which challenges can be faced during the Figma files localization?

In the article about localization first approach in the UX design we provide a detailed overview of possible design localization issues and ways to solve them. Let us shortly designate the main challenges here:

Languages lengths differences

Did you know that German text, on average, is longer than English by 16.67%, and this is not an isolated example? Language differences can affect big troubles when you start product interface adaptation.  All your design can be destroyed only because of this. As a result you will remake a massive part of the visual work and develop new pages or elements.

Unsuitable fonts

Not all fonts support Cyrillic or Chinese hieroglyphs. As fonts are a part of the company style - it will be good from the start to find the universal or a few similar ones for future usage.

Time-spending for texts fitting

Localizing content, you should check if each text part fits its place well. For instance, you have a button "Add to cart" - it can look pretty and organic. During translation to German, you will get the text "In den Warenkorb." The button size or at least padding will be destroyed, and the entire view of the page will look amateurish and sloppy.

Perhaps you imagine with a fear that your team will spend precious time on text copy/pasting instead of project development. Do not worry - it is not necessary.

How to translate Figma files effectively?

We at Lingohub are always targeted at reducing the manual job for the customers even more. One of our solutions - the Figma plugin, is created especially for cutting time while you work with the design. In a few clicks, your team can push the source segments to Lingohub and pull the translated text back to Figma.

To push the source language, install our plugin and select the required page(s). All text will be automatically split into segments and uploaded to the chosen project. You can specify the exact segments to be uploaded to your project if you do not need all of them.

When you are pulling the translated text back to Figma - will automatically create a new page so the original design wouldn’t be changed.

Let's overview a few use cases the Lingohub Figma plugin can cover.

Save time with fast fitting of new languages

At Lingohub, we have a Prefill feature that automatically fills all your segments from translation memory or machine translation. In combination with the Figma plugin, you can push the source text to the Lingohub project, pre-translate it, and in a few clicks, move them to Figma. The content will be located in the right parts of the design, allowing you to evaluate the necessary visual improvements before the complete localization.

Save budget by checking each localization step

You can use the Lingohub Figma plugin on every content creation step to prevent possible issues. It takes a few minutes but can save a lot of time for designers and translators if they have admitted some errors. Early problem detection prevents it from growing into massive trouble.

Reduce text length issues with quality checks

All languages are multifaceted and have a variety of synonyms, constant expressions, and abbreviations. During the localization process, using a direct translation is only sometimes advisable. With Figma synchronization, you can understand the length of exact segments and set up appropriate rules via quality checks. That means translators will be warned if they need to shrink or expand the number of characters and use other semantic constructions.

Raise translation quality by providing the context

Uploading the text segments from Figma, you can automatically provide the context images for translators. Imagine - your team every day translates big masses of different data. In most cases, there is no way to understand where the exact text segment is placed and how it will look. Of course, buttons like "Add to cart," "Proceed registration," etc., are clear, but what about other text parts? With context images, translators can immediately see where the text is on the page to make your localization ideally adopted and provide the best-fit localization.

Moreover, there is no need to open new windows, etc. The translator will see the segment related images by clicking on the context images inside the editor content panel.

Click on it will open the popup with the exact text location.

Get started now

Figma is a great tool that can cover most parts of designing needs. To improve your experience with it and localize the visual efficiently, try the Lingohub Figma plugin right now. Check our help center for detailed instructions, or contact us if you have any questions.