This article will explore how to bridge the gap between designers and developers to streamline the localization process. This guide empowers teams working with Figma designs and developer code, providing practical strategies for effective collaboration and efficient localization.

We will combine design and code in the localization workflow and explain how you can leverage Transifex tools like Translation Memory (TM), Figma Plugin, and GitHub integration. We will help you discover how to effortlessly sync design iterations, automate translations, and maintain consistency across languages.

Prepare to unlock the full potential of your global content with our expert insights and step-by-step instructions for a successful localization journey.

Many software companies want to ensure a smooth localization workflow by creating a collaborative environment where developers, designers, and translators can work together effectively. We will help you optimize your processes and leverage our powerful tools to make your work faster and easier.

Here's how our solution streamlines the localization process:

Our solution allows you to centralize content from designers and developers within a single Transifex project. This means that design elements, like strings and phrases created by designers, can seamlessly coexist with code-related content created by developers. Consolidating all your localization resources into one project allows for efficient management and collaboration on translations, ensuring a smoother process for your entire team.

Leverage the power of TM effortlessly. It enables you to tap into any previous translation work from other projects, if available, right within the project designed for both designers and developers. This approach not only saves time and reduces costs but also maintains consistency across multiple projects and translations.

You can effortlessly import localization content from both GitHub and Figma into Transifex, kickstarting the translation process.

After translations have been delivered:

Now that you have a general workflow overview, let's dive deeper into how to implement everything.

First, let's set up our project for success by configuring your TM and enabling TM Fill-up in your project's Workflow Settings. TM can help you leverage previous translation work to save time and reduce costs.

TM is a core part of the localization process. As such, we have added multiple options and offer high customizability with both Organization-wide settings and per-project workflow options.

In this article, you will find step-by-step instructions and more details about TM fill-up, how to set it up, and how to optimize it for your needs.

Next, you can create one or multiple TM Groups to combine the TM of various projects to get more out of your previous translations. This is optional but highly recommended, especially if you already have translations in multiple projects.

You should also set which project's TM will be preferred for providing entries first when multiple matches with the same % are present.

To set custom TM Priorities, head to the TM Settings tab under your Project Settings.

Information about how to set up TM Groups and Priorities can be found in this article.

Now that your TM is set up, it will free a lot of time and repetitive work for your translators, letting them focus on new strings and leaving ample time to review everything, ensuring high quality.

Save only the reviewed translations in your TM and ensure that only these entries will appear as suggestions in the editor throughout the translation process, maintaining a clean TM by excluding translations submitted before QA completion.

Setting up our GitHub integration is a straightforward process. We have an article going over each step of the Installation and Configuration process in detail, which you can take a look at.

One thing to note: if you wish to enable bidirectional syncing of your source content between GitHub and Transifex, don't forget to enable this option during the setup:

This enables any source edits made within Transifex to be automatically synced with your GitHub repository, eliminating disruptions. Moreover, developers will automatically receive completed translations as soon as they are ready.

Now, this is where the Figma Plugin comes in. Designers can start their work in Figma, with the ability to customize the phrase names so developers can use them. We call these phrase names “keys”, and they are the main building blocks in the application code, acting as references to the phrases. A predefined key naming scheme should exist between designers and developers so everyone is aligned.

The strings the designers create can then be pushed to Transifex through our plugin, where you can select a pre-existing resource from your projects or opt for a new one. Our Figma Plugin only supports resources using the Fileless format, meaning developers' and designers' content will be hosted in different resources in the same project. If you don't have a fileless resource already, you can create a new one through the plugin and ensure you're syncing Figma to the same project you selected for GitHub.

Once the designs are ready, the strings will be available to the localization team in Transifex. Designers can also update copywriting on strings already in Transifex and send these updates to Transifex for the localization team to work on.

Developers can conveniently export the keys from Transifex for integration into their code. Furthermore, they can send additional source strings to Transifex that are not present in the Figma designs without deleting or changing strings sent from Figma.

The last piece of the puzzle is setting up our Figma Plugin. Similarly, we have an article detailing the process step by step, and you can find it here.

And we're done! Your organization is now up and running, ready to handle a collaborative workflow, allowing your teams to work seamlessly.

Now that we have set up our ideal workflow, let's see how it might look in action.

Designers and Product Managers collaborate on finalizing the experience and copywriting in a mockup. After validating the result with the rest of the team – including developers and the person managing localization – they get things ready to send to Transifex.

Having consulted with the developers, they follow a predefined key naming structure before sending content to Transifex. By repetition, naming conventions are embedded in the workflow. The Transifex plugin automatically considers as key names the name found in the Figma element list, so by typing the naming convention once after creating an object, no further work needs to be done by the designer.

After the strings are sent to Transifex, the translation team can start working on the new content, delivering translations in the desired target languages.

When content is sent to Transifex, the developers can retrieve these strings from Transifex fileless (Designers') resource using our API. This can be done through either the Get resource strings collection or the Create a source file download action endpoint. To pinpoint new strings awaiting integration into their code, they can use the API endpoint Get resource strings collection and identify them based on the modification date. This approach ensures that newly added strings in the designs and updates to previously integrated strings are merged into their code.

Developers may come across additional content that requires localization within the code. These could be error messages or unique cases not initially addressed in the design phase. The GitHub integration will automatically identify this content and fetch these strings from GitHub, enabling translators to work on them as well.

Any source edits made in Transifex on developers' resources (not Fileless resources) will be automatically pushed to GitHub for developers' further actions.

When feature development and localization are considered complete, it is made available to the final users.

Following a continuous iteration, continuous delivery flow, and the flexibility that Transifex offers, you have many options regarding localization, as content updates can be made even after making the feature available to your users. The localization team can further enhance translations, and Designers with Product Managers can improve the copywriting of the source language.