Speed up your localization workflow and go to market faster by bringing your Product, Design, and Localization teams closer with our Figma plugin. Easily send your design texts from Figma to Transifex to get them translated. Pull the translated texts back to Figma and check for any i18n or translation issues before coding begins. Let your designers preview the localized designs and immediately make necessary adjustments so you don't have to worry about delays in refactoring localization bugs. Boost collaboration between your designers and translators. Deliver new digital experiences faster.
📝 Note: The integration is available on the Starter plan and up.
Connecting Figma with Transifex
Below is a quick video showcasing the process.
Please ensure you have access to at least one organization, project, and resource in Transifex.
Install the Transifex plugin in Figma using this link.
Open your Figma file.
Go to Plugins and select “Transifex Figma Plugin.”
Add your Transifex credentials (API Token). To generate an API Token, you can just follow the instructions included here. After generating the token, copy and paste it into the related input box and click “Connect.”
Complete the following information after connecting with Transifex:
Organization: the desired organization to work with
Project: the desired project to work with
Resource: the desired resource of the selected project. If you don’t have any fileless resources in this project, you can try to create one using the action “Create a new resource” (note that you must be either an administrator or a project maintainer to perform this action)
After setting the options, click “Save.”.
📝 Note: The Figma plugin only works with resources using the Fileless format.
At the bottom of the settings tab, you will see two options regarding custom keys. The first option, reading Use custom key names, will allow you to edit custom keys for each string you are pushing to Transifex from Figma. The second option, reading Set text layer name to custom key names, will keep element names found in the Figma nodes tree in sync with the custom keys you edit in the Transifex plugin.
Sending strings from Figma to Transifex
Check out a quick video on sending content and editing keys from Figma to Transifex.
Start selecting the Figma layers you want to send to your Transifex resource.
Your selection will collect your text layers as strings in the plugin's main window under the “Push Strings to Transifex” and “Pull Strings from Transifex” tabs.
Click the X to the right of the string to remove any unwanted strings from the selection in the “Push” or “Pull” tabs. That string will be removed from the current selection list.
Click the “Push” button to send the selected strings to Transifex and add them to the connected resource. After pushing the strings, you can see that they were successfully sent using the “View resource in Transifex” link. Additionally, you can upload screenshots if you have selected the “Upload Screenshots” checkbox. The strings will be translated according to the workflow set up in the Transifex project.
By default, the plugin will automatically generate screenshots of your Figma Design file Frames and Sections and include them with the pushed strings in Transifex. The strings for translation will be automatically mapped to the screenshots in Transifex to provide visual context of your Figma designs to your translators and ensure the quality of the translation. Optionally, you can turn off screenshot generation for any string push by deselecting the “Upload Screenshots” checkbox in the “Push Strings to Transifex” tab.
Screenshots in Figma FigJam files are not currently supported. This may also be true with other features and elements in FigJam files.
The “Replace Resource Strings” feature can remove extra or outdated strings from your Transifex resources. If this option is checked when you click the “Push” button to send strings to Transifex, all strings currently in the connected resource will be purged and replaced with the current selection only. This option should be used carefully, especially with resources shared by other users. If you are sure you want to replace all the strings in the resource with the current selection, click “OK” in the confirmation dialog. The resource strings will be replaced, and the “Replace” option will be reset to deactivated. Your previous translations remain in the translation memory (TM), so you and your team can reuse them unless they are also deleted from the TM in Transifex.
📝Notes
Some languages require specific fonts to work, so when imported designs don't immediately display their text (e.g., Chinese text), please ensure you use a font that supports your language.
The Figma plugin ignores hidden layers/strings.
When importing translations from RTL languages from Transifex, the text node is automatically aligned to the right of the page. Additionally, the strings presented in the plugin window will be aligned appropriately.
Capturing Screenshots
As described above, when pushing strings from Figma to Transifex, you have the option to include relevant screenshots associated with these strings, providing additional context to your translators. In Figma, you can have a giant frame that contains nested frames, and these nested frames may contain other nested frames. The screenshot sent to Transifex will depend on which frame you select when pushing your source for translation. Below are some scenarios to help you better understand how the system behaves:
Selecting the Giant Frame: When you select the giant frame, a single screenshot containing all nested frames will be generated and sent to Transifex.
Selecting Nested Frames: If you choose to select some of the nested frames, for each frame selected, a separate screenshot will be created. Each screenshot will also include the nested frames within the selected frame.
Selecting a Text Node: When you select a text node, the screenshot sent to Transifex will capture the topmost frame containing that text node.
Example: If the giant frame contains the nested frame A, which, in turn, contains the nested frame A.1, selecting the text node of A.1 will result in a screenshot sent to Transifex containing only the A.1 frame.Selecting Text Node and Nested Frame: If you select both a text node and a nested frame of the giant frame, multiple screenshots will be generated.
Example: Selecting the text node of A.1 and the nested frame B (nested frame of the giant frame) will lead to the creation of two screenshots. One will contain the A.1 frame, while the other will contain the frame B.
Handling Source Updates with Custom Keys and Translation Preservation
This section outlines the behavior of source updates in Transifex under various scenarios considering the use of custom keys and the choice to retain translations or not.
Scenario #1: Custom Keys - On, Keep Translations - On
A. Push Button
Sending source updates for already synced strings with Transifex
The updates will maintain the translations, review status, and history of the strings in Transifex.Sending new strings to Transifex for translation
Additional strings will be added to the existing list of strings that have been previously synchronized with Transifex.Removal of strings from your selection that are already synced with Transifex
These strings will remain within your resource's string list and can only be removed through the "Replace Resource Strings" function or by utilizing the source deletion feature within the editor after switching to the edit source mode.Updating the key of already synced strings
When keys are updated, new strings are generated in Transifex, while the original ones continue to be part of the resource. Translations for the newly created string are not automatically filled in unless TM (Translation Memory) fillup setting is enabled.
B. Replace Resource Strings & Push
Sending source updates for already synced strings with Transifex
The updates will maintain the translations, review status, and history of the strings in Transifex.Sending new strings to Transifex for translation
Additional strings will be added to the existing list of strings that have been previously synchronized with Transifex.Removal of strings from your selection that are already synced with Transifex
These strings will be deleted from the list of strings within your Transifex resource.Updating the key of already synced strings
New strings are created in Transifex when keys are updated, while the previous ones are eliminated from the resource. Translations for the newly created strings will not be automatically filled unless a TM fillup is performed.
Scenario #2: Custom Keys - Off, Keep Translations - Off
A. Push Button
Sending source updates for already synced strings with Transifex
Updates to the source for strings that were previously synchronized will result in the creation of new strings while removing the old versions from Transifex. No translations and historical data for the deleted strings will be preserved in this case.Sending new strings to Transifex for translation
Additional strings will be added to the existing list of strings that have been previously synchronized with Transifex.Removal of strings from your selection that are already synced with Transifex
These strings will remain within your resource's string list and can only be removed through the "Replace Resource Strings" function or by utilizing the source deletion feature within the editor after switching to the edit source mode.
B. Replace Resource Strings & Push
Any previously synchronized strings in Transifex will be deleted, and the selected strings in Figma will be newly created in Transifex. For the deleted strings, there will be no retention of translations and historical data.
Scenario #3: Custom Keys - On, Keep Translations - Off
A. Push Button
Sending source updates for already synced strings with Transifex
Updates to the source for strings that were previously synchronized will result in the creation of new strings while removing the old versions from Transifex. No translations and historical data for the deleted strings will be preserved in this case.Sending new strings to Transifex for translation
Additional strings will be added to the existing list of strings that have been previously synchronized with Transifex.Removal of strings from your selection that are already synced with Transifex
These strings will remain within your resource's string list and can only be removed through the "Replace Resource Strings" function or by utilizing the source deletion feature within the editor after switching to the edit source mode.Updating the key of already synced strings
When keys are updated, new strings are generated in Transifex, while the original ones continue to exist in the resource. Translations for the newly created strings will not be automatically filled unless a TM fillup is initiated.
B. Replace Resource Strings & Push
Any previously synchronized strings in Transifex will be deleted, and the selected strings in Figma will be newly created in Transifex. For the deleted strings, there will be no retention of translations and historical data.
Scenario #4: Custom Keys - Off, Keep Translations - On
A. Push Button
The behavior aligns with what's outlined in Scenario #1.A. It's important to note that keys' modifications are not possible in this scenario where the custom keys option is deactivated.
B. Replace Resource Strings & Push
The behavior aligns with what's outlined in Scenario #1.B. It's important to note that keys' modifications are not possible in this scenario where the custom keys option is deactivated.
📝Note: When updating source from Figma to Transifex and "Keep Translations" option is enabled, any pre-existing tags associated with the strings are preserved.
Pulling strings from Transifex to Figma
How to pull source strings
If your source strings have been updated in Transifex, you can pull the revised source from Transifex to Figma by following the steps below.
Select the frames from which you want to pull source content and the “Source language” from the “Languages” dropdown. Click the “Pull” button to create a new page with the selected frames.
You can override existing source content by checking the respective option. By selecting to override existing content, all updated source strings will be replaced, and you will see the label “Updated” next to each string in the dialog box, as shown below.
How to pull translation strings
To pull translations back from Transifex to Figma, select the Figma layers you want to get translations for and then click the “Pull” button in the “Pull Strings from Transifex” tab. You can pull them in all languages or a specific one(s) by selecting them in the “Language” dropdown.
The pull operation will create a new page in your Figma file for every language with the same name of the selected page and the language code as a prefix and automatically insert translations for the selected visible strings. The new page will include only the selected frames. To create frames on the current page instead of a new one, enable the "Pull in current page" checkbox.
⚠️ Warning: Languages without translations in Transifex will be ignored during the "Pull" process, and no pages will be created in Figma.
Using custom keys
The "Use custom keys" setting allows you to customize string key names. Keys are important in Transifex when you want to communicate with other teams working on your project's localization. Let's see how you can do that.
Start selecting the Figma layers you want to send to your Transifex resource.
Opening the Transifex Figma plugin, you will see the list of selected strings in the first tab, "Push strings to Transifex." Each string will also have an input where you can set the custom key. The default key is the node name in the Figma nodes tree.
Type the custom key names in each input or leave them as is and click Push to send strings to Transifex. The Figma plugin is smart enough to group strings sharing the same context and same key name so that only one string will be pushed to Transifex in that case. e.g., if you have two Text elements in Figma saying "Email" and sharing the same node name in the Figma nodes tree ("Email"), the Transifex Figma plugin will detect their relation and push only once the specific string to Transifex
Pulling translation content from non-fileless resources
This option allows you to pull translations from any resource within your Transifex project and map it directly to your Figma design.
How to pull translation content from a non-fileless resource
Select the resource: In the Settings tab, select a resource from your Transifex project that you want to pull content from, then click Save. Please note that only one resource can be selected at a time.
📝 Note:
To pull content from all resource types requires enabling the option 'Use custom key names'
The "Push" tab will be disabled during this process, as this feature only allows pulling content from Transifex, not sending source strings to it.
Map strings: Once the resource is selected, head to the "Pull" tab to map the keys from Transifex to your Figma layers.
Manual mapping: You can manually map a Figma text node by entering the corresponding key from Transifex next to it. Start typing the key name in the input field, and relevant keys found in your resource in Transifex will appear for you to select and link the desired key.
Auto-mapping: Alternatively, you can click the "Auto-map" button, and the plugin will automatically identify identical strings between Transifex and your Figma design and update the keys accordingly. Updated keys will be highlighted in green for easy identification, and any linked keys will display a linked icon next to the text.
When you request keys using the auto-mapping option, Transifex keeps a cache for 1 hour. During this period, any changes made to your content in Transifex will not be updated in Figma until the cache expires.
If you need to force invalidate the cache and retrieve updates immediately, you can use one of the following methods:Close and reopen the plugin
Push strings (for fileless resource type only)
Change the resource from the plugin settings
Pull strings: Select the languages you want to pull content from and click the "Pull in the current page" checkbox if you want to pull the strings on the current page.
Handling conflicts
When using custom key names, there are cases where the Transifex Figma plugin will raise warnings for duplicate keys.
These cases are:
Figma elements have different text but share the same Figma node name. This can happen if you use the default Key names for the selected strings, where the Figma node name is used. It's common while designing to clone nodes to create new items, and there is a chance the Node name remains the same across many nodes, especially with Text nodes.
There are strings in the linked Transifex project that have the same key name but different text. This can happen when you have already pushed some content to Transifex and are updating a Figma design or creating a new one with similar node names on elements.
There are various ways to handle these cases using the plugin:
If you prefer adding an extra string for each conflicting item, click the Auto Fix button. Using this functionality, the plugin will try to automatically correct the error by assigning a number next to each key name with conflict, e.g., having two strings with a key name of 'Email' and clicking Auto fix will result in key names 'Email' and 'Email 1' for these two strings.
If you prefer replacing what might already be in Transifex with your current version in Figma, click the Push & Replace button at the bottom right of the plugin popup. Doing that will push a new to Transifex, the string you have in Figma. This action will remove the previous string and all the translation progress done in Transifex. For example, if you have already translated the string with the key name 'Email' and you Push & Replace, the translation will not be present on the string
💡Tip
Looking for more help? Get support from our Transifex Community Forum!
Find answers or post to get help from Transifex Support and our Community.