With our Sketch plugin, you can easily send your design texts from Sketch to Transifex to get them translated. Pull the translated texts back to Sketch, and check for any i18n or translation issues before coding begins. Let your designers preview the localized designs and immediately make necessary adjustments to avoid costly delays in refactoring localization bugs. Boost collaboration between your designers and translators. Deliver new digital experiences faster.
Below is a quick video showing how to use the Transifex Sketch Plugin.
📝 Note: The integration is available on the Starter plan and up.
Connecting Sketch with Transifex
Make sure that you have access to at least one organization, one project, and one resource in Transifex. We also recommend you use the app to set up the plugin.
Install the Transifex plugin in Sketch using this link. Download the "transifex-sketch.sketchplugin.zip" file, unzip it, and add the "transifex-sketch 2.sketchplugin" to the Sketch plugin's folder (Plugins>Reveal Plugins Folder).
Open your Sketch file.
Go to Plugins and select "Transifex Sketch Plugin".
Add your Transifex credentials (API Token). To generate an API Token, please follow the instructions indicated 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. Suppose you don't have any fileless resources in this project. In that case, you can create one using the action "Create a new resource" (note that you should be either an administrator or a project maintainer to perform the action).
After setting the options, click "Save".
At the bottom of the settings tab, you will see two options regarding custom keys.
The first option, reading Use custom keys, will give you the possibility of editing custom keys for each string you are pushing to Transifex from Sketch. The second option, reading Set text layer name to custom key name, will keep element names found in the Sketch nodes tree (not in symbols) in sync with the custom keys you edit in the Transifex plugin.
Using the plugin
Select the Sketch layers that you want to send to your Transifex resource.
Your selection will collect your text layers as strings in the plugin's main window under both 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. Also, you can upload screenshots if you have selected "Upload Screenshots".” 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 Sketch frames 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 Sketch designs to your translators and ensure the quality of the translation. Optionally, you can disable screenshot generation for any string push by deselecting the "Upload Screenshots" checkbox in the "Push Strings to Transifex" tab.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.
To pull translations back from Transifex to Sketch, select the Sketch 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 or a specific language by selecting it in the "Language" dropdown. The pull operation will create a new page in your Sketch 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.
📝 Note: In case of translation, text cannot be displayed in Sketch designs like Chinese text; please ensure your font supports these characters.
Using custom keys
With the Use custom keys setting enabled, you can customize string key names. Keys are essential 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 Sketch layers you want to send to your Transifex resource.
Opening the Transifex Sketch 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 Sketch nodes tree.
Type the custom key names in each input or leave them as is and click Push to send strings to Transifex. The Sketch 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 Sketch saying "Email" and sharing the same node name in the Sketch nodes tree ("Email"), the Transifex Sketch plugin will detect their relation and push the specific string to Transifex.
Handling conflicts
When using custom key names, there are cases where the Transifex Sketch plugin will raise warnings for duplicate keys.
These cases are:
Sketch elements have different text but share the same Sketch node name. This can happen if you use the default Key names for the selected string, where the Sketch 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 Sketch 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 AutoFixx button. Using this functionality, the plugin will try to auto-fix 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 Sketch, click the Push & Replace button at the bottom right of the plugin popup. Doing that will push to Transifex the string you have in Sketch. 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 and replace it, the translation will not be present.
💡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.