Streamline your design workflow with Figma translation plugin 

Are you aiming to develop software products that cater to a worldwide audience? Utilizing a user-friendly Localizely translation plugin for Figma can significantly improve your design process. In this blog post, we'll discuss the importance of incorporating localization from the very beginning to prevent potential problems later on. We'll also introduce the Localizely plugin for Figma, a powerful tool that simplifies and enhances your design workflow. So, let's explore how you can revolutionize your design process and create products that appeal to a diverse global audience with the help of an easy-to-use Figma translation plugin!

The importance of planning for localization from the start 

Planning for localization right from the start is essential when creating software products, as it helps avoid potential issues later on. Many software development teams often prioritize meeting tight deadlines, which can lead to overlooking the importance of localization in the early stages. This oversight may cause problems such as design breakages due to different text lengths in various languages or difficulties in adapting the design to cater to multiple markets.

By considering localization from the beginning, you save time and ensure a smooth user experience for a diverse audience. Taking the unique requirements of different languages and cultures into account early on helps prevent headaches and enables a more seamless localization process.

How the Localizely plugin for Figma enhances your design workflow 

The Localizely plugin for Figma can be a game-changer for your design workflow, making the whole process more streamlined and efficient. Some of the key features of the plugin include helping you save time, minimizing design issues, providing context for translators, and allowing you to test your designs in different languages.

Just imagine handling all of this work manually: exporting texts into a file like a CSV, sending it to translators, and then integrating the translated file back into your design. Don't forget having to create and attach screenshots of your design for translators to understand the context. This approach can be time-consuming and prone to errors, especially when your design goes through several iterations during the app's development.

With the Localizely plugin for Figma, you can simplify these tasks and focus on what truly matters – creating engaging designs for your global audience. The plugin automates many aspects of the localization process, saving you time and reducing the potential for mistakes.

Integrating design, translation, and development 

Using the Localizely plugin for Figma makes integrating design, translation, and development a breeze. The process starts with designers creating UIs in Figma in the source language. They then push the texts, along with design screenshots, for translation. Translators use these screenshots as visual context to improve translation accuracy. When translations are complete, designers pull the translated texts back into the design to verify everything is correct. Once satisfied, they can inform developers that the design is ready to be used for developing the localized app. Throughout this process, there may be iterations and adjustments involving designers, translators, and developers to meet all criteria and create a polished final product.

It's important to note that this workflow is often ongoing, as designs, requirements, and target markets can change over time. The Localizely plugin for Figma helps keep everyone on the same page, streamlining the localization process and ensuring the final product is effectively tailored to its diverse audience.

In the subsequent sections, we will guide you on how to accomplish these tasks using the Localizely translation plugin for Figma.

Select design elements for translation 

When starting the localization process in Figma, the first step is to identify the design elements that need localization. The screenshot below showcases this using the Localizely plugin for Figma. In this example, the selected text is assigned an auto-generated string key value, which will serve as a unique identifier for the text during translation and development stages.

Push selected texts to Localizely 

After choosing the design elements for localization and assigning string key values, the next step is to push this data to the Localizely platform for translation. The image below demonstrates the push configuration within the Localizely plugin for Figma. In this example, we set up the desired Localizely project, specified the language of the text from the design, and checked the 'Upload screenshots' option, which sends a screenshot of the selected design element to Localizely.

After pushing the selected texts to Localizely, you'll receive a success message along with a brief summary of updated translations, newly added keys, and uploaded screenshots.

Translate texts from Figma 

The next significant step involves translating the pushed text on Localizely. As seen in the image below, Localizely displays a screenshot of the frame from Figma, which was automatically generated by the plugin. This allows translators to have a visual context while working on their translations.

Once the translator views the screenshot of the design element along with the highlighted text requiring translation, they can begin their work. The image below demonstrates how a translation for German is entered on the Localizely platform.

Pull translated texts from Localizely 

Once the translator has finished its work, the designer can download the translated text and preview its appearance in the design. The image below displays the pull configuration within the Localizely plugin for Figma. This is where we choose the Localizely project we want to pull translations from and select the option to create a new design page with translated texts for the German language.

If all goes well, you'll successfully pull translations from Localizely and see a success message, along with the German design page created by the Localizely plugin for Figma. In the image below, you can see the new German page, where the original text from the design has been replaced with its German translation.

Helpful hints for localizing your Figma design 

When localizing your Figma design, there are several important factors to consider in order to ensure a seamless and efficient process. In this section, we will discuss helpful hints on how to tackle common challenges and enhance your localization workflow. Here are some key topics we will cover:

• Translations impact on design: Be mindful of text length variations across different languages. Ensure you leave enough space in your design to accommodate these differences, resulting in a clean and visually appealing layout. For instance, German experiences a horizontal text expansion with up to 35% longer texts compared to English, while Korean language may have vertical text expansion.
• Using screenshots for context: Supplying translators with screenshots of your design serves as a visual context, enabling them to more accurately translate texts. This approach reduces the number of iterations during the translation phase and ensures a smoother overall process.
• Auto-prefill string keys with Localizely plugin: The Localizely plugin offers the option to manually enter string key values or use auto-generated ones, which speeds up the process and ensures consistency. Auto-generated string keys follow conventions like 'frameElement' or similar, making it easier to locate them later in the code and design. By utilizing this feature, you can efficiently name string keys while maintaining a streamlined workflow.
• Syncing design with Localizely project: Be aware of the known challenges in maintaining design, translations, and the app after the initial release. Keeping your design and Localizely project in sync when changes are made to the design is crucial. Regular updates help maintain consistency and prevent issues, while ensuring a smooth and efficient workflow between design, translation, and development. This constant synchronization is essential for avoiding inconsistencies and maintaining an easily manageable project.
• Managing designs with significant language differences: When design elements differ significantly across languages, establish a clear workflow to manage these variations, such as using separate pages or components for each language.
• Testing design in multiple languages: Regularly test your design in various languages to ensure it is visually appealing, user-friendly, and free of layout issues. By doing so, you can easily detect broken layouts after pulling translations, allowing you to reduce text lengths or update the layout as needed. This process contributes to a higher-quality software product that caters to diverse audiences.

By following these hints and maintaining a clear localization strategy, you can create compelling and effective designs for a diverse, global audience.

Conclusion 

Using the Localizely translation plugin for Figma can revolutionize your design process, enabling you to create software products that resonate with a global audience. Emphasizing localization from the start and implementing a streamlined workflow with the help of this user-friendly plugin will save you time, minimize design issues, and enhance collaboration between designers, translators, and developers. By following the helpful hints discussed in this blog post and adopting the Localizely plugin for Figma, you'll be well-equipped to create engaging and effective designs that cater to a diverse, worldwide market. So, why wait? Start optimizing your design workflow today with the power of Figma and Localizely!