How to translate Figma designs with Localizely

#design #localization #internationalization #development

If you're developing a software product for an international audience, it's essential to understand the nuances of localization. In this post, I want to demonstrate how you can effortlessly translate your Figma designs into various languages using the Localizely platform.

The Importance of Multilingual Design

When developing an app that needs to support multiple languages, it's crucial to understand the benefits of creating a multilingual design rather than simply adding translations after the app is built:

Early Detection of Potential Issues: Designing with multiple languages in mind from the outset significantly reduces the number of bugs, layout disruptions, unintended text wrappings, and similar problems. This is especially important for mobile app designs as smaller screens are more susceptible to such issues.
Cost Efficiency: Validating the design early can decrease costs by avoiding unnecessary iterations during the later stages of development, which are often more expensive.
Accelerated Development: With the requirements and a multilingual-friendly design in hand, the development team can expedite the development process. They know what to do from the beginning and have a design that accommodates all intended languages effectively, which is especially important for languages with longer text lengths, such as German compared to English.
Enhanced Team Satisfaction: By having a clear multilingual design strategy and guidelines on how to implement pages and features, your development team can avoid common frustrations. They won’t be left waiting for responses from designers or needing new translations that fit better.

Adopting this approach not only streamlines the development process but also ensures the product is more inclusive and user-friendly from the start.

Simplifying Multilingual Design in Figma with Localizely

You might be wondering how Localizely can be of help here. Localizely is a localization platform designed to facilitate seamless collaboration among developers, designers, translators, and other team members. To this end, they've developed a Figma plugin that streamlines the integration and collaboration process between designers and the rest of the team.

But is this the only solution for such challenges? Certainly not. There are other similar solutions available for Figma. My team and I have experimented with several of them and ultimately chose Localizely. However, just because something works well for us doesn't guarantee it will suit your needs equally. Therefore, I encourage you to explore the various Figma plugins that simplify localization integration to discover the one that best meets your requirements.

So, what are the benefits that I've found particularly useful and that have made my life as a designer easier and more enjoyable?

Easy Integration: Integrating Localizely into your Figma design simplifies the translation process significantly. With just a single click, you can select designs and push screenshots and texts for translation. Screenshots are particularly useful for translators because they offer valuable context.
Effortless Multilingual Preview: After the translators have completed the translations, you can easily pull them from the Localizely platform and view your design in multiple languages. The need for manual updates is eliminated, as everything is generated automatically for you.
Enhanced Collaboration: The hassle of exchanging texts and localization files for a multilingual design is a thing of the past. All translations are stored in one place, allowing you to instantly fetch the latest updates with just one click.

Below, you'll see the Localizely plugin for Figma in action. A simple selection process automatically detects text, preparing it for translation. Pretty easy, right?

For more information on this, please refer to the official documentation page.