All Collections
Localization Guides & Tips
Localization tips & workflows
Mastering Figma Design and Code Localization: A Guide for Designers and Developers
Mastering Figma Design and Code Localization: A Guide for Designers and Developers

Combine popular Transifex features and integrations to create a powerful and streamlined localization workflow.

Antonis Mylonas avatar
Written by Antonis Mylonas
Updated over a week ago

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.

πŸ“ Note: The Figma Plugin is a paid add-on. Please get in touch with our customer success for more information.

The Premise

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.

Our Solution

Here's how our solution streamlines the localization process:

Unified Content Hosting

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.

TM Advantage

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.

Effortless Source Content Import

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

  • Seamlessly integrate your Transifex project with GitHub for real-time updates in both directions. Say goodbye to manual interventions and custom scripts. Our user-friendly solution allows you to customize advanced settings to match your specific configuration requirements easily.

  • Enable Figma design localization within Transifex through the Transifex Figma plugin. This empowers your designers to effortlessly transfer their content to Transifex, share the localization assets they create with developers, and seamlessly collaborate within the localization team, working hand-in-hand with developers.

Effortless Translation Content Export

After translations have been delivered:

  • Designers can access the localized designs in Figma, review the translations, and request any necessary adjustments from the translation team.

  • Developers will automatically receive completed translations in GitHub through a pull request (PR) or direct commit, making it simple to go live with approved localization work done in Transifex.


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

TM Configuration

1. Enabling TM Fill-Up

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.

2. Setting Up TM Groups and Priorities

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.

3. Allowing translations to enter TM once they are reviewed

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.

πŸ“ Note: After enabling TM Priorities, this project will no longer read from any TM group set on the organization level but will continue contributing/writing to these TM groups.

Setting up your integrations

1. GitHub Integration

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.

πŸ“ Note: Currently, Fileless resources can't be synced to GitHub through our integration since GitHub is file-based. We provide the option to export Fileless resources as a JSON file, which developers can use to get the keys from Figma.

2. Figma Plugin

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.

πŸ“ Notes

πŸ’‘Tip: This article mentions GitHub, but you could also use GitLab or Bitbucket if that is the tool of choice for your team.

Transifex native

How Does It All Come Together

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

New feature design starts in Figma

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.

Developers start the implementation

Embedding Figma strings within the code

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.

Localizing strings not included in the designs

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.

Parallel Workflows - An Overview


  1. Develop designs and create/update strings within Figma.

  2. Content is sent to Transifex for translation.

  3. Translators can start working on new source text once notified of available translation jobs.

  4. After translations are finished, the QA process starts.

  5. Designers access translations in Figma for QA on localized designs.

  6. Once QA is completed, translations are marked as reviewed in Transifex.


  1. Work on introducing new feature strings into their code.

  2. Receive notifications about fresh source content added by Designers in Transifex.

  3. Retrieve the Designers' strings and integrate them into the code.

  4. Keep the source content up to date with automatic updates from GitHub to Transifex.

  5. Benefit from TM, auto-filling strings shared between designers' and developers' resources. Strings in the developers' resources are auto-filled by translations approved in the designers' resources.

  6. Once the QA process for the designers' content is finished, translators can start working on the engineers' content that has yet to be auto-filled by TM. Specifically the remaining strings not covered in the Figma designs.

Release and iterate

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.


How can Designers share strings as variables on Transifex?

Your localization managers can build a workflow where you can ensure the quality of your translations. In Transifex, you can find several ways to do this.

How can I communicate to the developers that translations are ready to be downloaded?

The status of a string can be (untranslated, translated, reviewed & proofread).

The reviewed & proofread status is a QA for your translations.

Whenever the status of a resource has been reached as 100% translated, reviewed, or proofread, the Developers can find their translations available on the Repository. All they need to do is to select the appropriate status during the Setup.


Looking for more help? Get support from our Transifex Community Forum!

Find answers or post to get help from Transifex Support and our Community.

Did this answer your question?