Translation Editor
Save time on handling localization files and translation strings.
Try SimpleLocalize
Share article

Translation management with Figma plugin

Translation management with Figma plugin

Efficient localization in design projects is now more critical than ever. Ensuring that your design resonates across languages and cultural contexts is integral to delivering a complete design experience. In this blog post, we'll explore how your designs can speak every language, thanks to the powerful integration of SimpleLocalize with Figma.

🎨 Figma Plugin for translation management

Table of contents

Localization in design projects

Localization transforms your design into a polyglot that seamlessly adapts to different countries or locations. It goes beyond just a translation; it's about making your design feel at home in different cultures.

Why localization matters

Localization is the bridge that transforms a design from a universal concept into a personalized experience. It considers cultural nuances, linguistic subtleties, and user preferences, ensuring that your design speaks the language of each user, both literally and metaphorically.

When showcasing your design, the aim is to get as close to the customer as possible and demonstrate how it can be expressed in different languages. Localization of your design makes it possible, and thanks to SimpleLocalize's Figma plugin, you can connect localization and creative design into an effective duo.

Designer challenges:

Designers face numerous puzzles when dealing with the localization of their design projects, making the process complex and time-consuming. Some challenges include:

  • Linguistic nuances: Translating idioms or cultural references accurately without working closely with translators can be challenging.
  • Multilingual content design: Balancing content in multiple languages without compromising design integrity requires careful consideration and planning.
  • Text expansion and contraction: Languages vary not only in words but also in the space those words occupy, posing a layout challenge. What fits perfectly in English might turn into a design puzzle in German or Spanish.
  • Maintaining consistency across versions: Adjusting and refining designs for different languages while ensuring consistency is a delicate task.
  • Collaboration with translators: Effective collaboration with translators is key, but conveying design intent and receiving accurate translations can be a communication challenge.
  • Version control: Keeping track of different versions for each language iteration can become a logistical headache.

The goal when managing designs in different languages is to make the design look as good as possible while maintaining a high level of localization. SimpleLocalize comes to the rescue, simplifying the complex processes and challenges of project localization.

Design localization with SimpleLocalize's Figma plugin

With its user-friendly interface and simple workflows, SimpleLocalize aims to simplify the complex process of adapting designs for global audiences. The integration with Figma, a beloved design tool, creates a harmonious synergy, promising designers a smoother and more efficient workflow.

SimpleLocalize online translation editor

Thanks to the Figma integration with SimpleLocalize, you can:

  • Manage all your Figma project translations and localization.
  • Collaborate with a team on project localization.
  • Share design texts with translators via SimpleLocalize to request translations.
  • Receive always updated translations for your designs.
  • Help translators by uploading text screenshots from your design to SimpleLocalize.
  • Check how designs look in different languages.
  • Quickly add more languages using the auto-translation feature.
  • Easily create new localization projects in SimpleLocalize from new Figma designs.
  • Manage different design and translation projects within the same SimpleLocalize account.

Figma plugin configuration

Getting started is a breeze. If your designs in Figma are ready, integrate them into SimpleLocalize by creating an account and initiating your localization journey.

Create project in SimpleLocalize

Start by creating a new project and adding a name. Next, add your project's existing languages and any other languages you would like to support. At this point, you can invite your team members or translators to assist with the translation management.

Creating project and languages configuration

Learn how to invite team members and translators to your localization project in SimpleLocalize.

Setup Figma plugin

Now, let's set up the SimpleLocalize Figma plugin. Head to Resources, then switch to Plugins and search for SimpleLocalize. Click on it to run the plugin.

SimpleLocalize plugin in Figma Resources

Next, configure the plugin by adding your personal access token generated on SimpleLocalize and choosing which SimpleLocalize project you would like to connect with the opened Figma design.

Creating project and languages configuration

Localize your Figma designs

Once the initial setup is ready, we can get started with actual translations of your Figma designs.

SimpleLocalize plugin settings

Before synchronizing texts from your design with SimpleLocalize, have a look at the plugin configuration. In the Settings tab, you can find some extra options and the rule for creating translation keys.

Synchronization settings

The below synchronization settings are activated by default. You can disable them according to your preferences.

In synchronization with Fimga, SimpleLocalize:

  • Omits untranslatable elements (e.g., elements with only numbers or symbols).
  • Omits locked elements; if an element in Figma is locked, it won't be included in SimpleLocalize.
  • Omits hidden elements.
  • Includes basic text formatting. E.g., "Hello World" will appear in SimpleLocalize as "Hello <b>World<b>".
  • Uploads screenshots of frames with text elements and key screenshots.

Synchronization settings

Translation key creation

Decide how the translation keys should be created in SimpleLocalize from your text elements. By default, the key format is my-frame.button.continue. For example, the Next button in my design will be created with the translation key welcome.button.next.

You can adjust this configuration by changing the case, separator, using frame as a key namespace, or including the page name.

Key creation settings

Figma: Push translations to SimpleLocalize

And now it's time to synchronize all texts from your Figma design with SimpleLocalize. On Push translations, Figma will send all text elements from your design to your SimpleLocalize project.

Synchronizing translations to SimpleLocalize

You can send only selected elements to SimpleLocalize to test the integration and make sure all texts are created correctly as translation keys. If some were not correct, you can easily delete problematic keys using Bulk Actions.

SimpleLocalize: Add translations

At this point, the texts from Figma are already SimpleLocalize translation editor, so it's time for translation.

You can add translations manually, edit the texts directly in the translation editor, or invite translators to help you with the job. You can also use auto-translation for quick translation.

Auto-translating strings from Figma

Customize the translation editor for more comfortable and effective work.

Figma: Get translations

When your translations are ready in SimpleLocalize, you can now download them to Figma. Click on the Pull translations button to update all texts and available languages.

Pulling translations from SimpleLocalize

Figma: Switch your design language

Now, you can also check how your design looks with texts in different languages. In SimpleLocalize plugin, go to the language selector and try changing the language to another one. See how the texts on your design change.

Getting texts in different languages from SimpleLocalize

Conclusion

In conclusion, the SimpleLocalize Figma plugin is a transformative tool that simplifies the connection between design and localization. Providing a seamless interface and collaborative features ensures that your design not only speaks every language but speaks it well. Get started today and localize your design with ease!

Relevant posts

Check out our latest blog posts and stay up to date with SimpleLocalize

How to manage set of translations and keys with Bulk&nbsp;Actions

How to manage set of translations and keys with Bulk Actions

Kinga WojciechowskabyKinga Wojciechowska5 min read

Simplify translation management with SimpleLocalize's Bulk Actions — delete, update, review, or auto-translate multiple keys at once for efficient localization.

Continue reading
Getting started: Invite team members and translators

Getting started: Invite team members and translators

Kinga WojciechowskabyKinga Wojciechowska6 min read

Learn how to work together using SimpleLocalize! Invite team members, share access, and make localization easy.

Continue reading
How to share translation keys across multiple apps?

How to share translation keys across multiple apps?

Kinga WojciechowskabyKinga Wojciechowska4 min read

Easily manage translations across multiple apps with SimpleLocalize's key merging feature. Save time and maintain consistency!

Continue reading