The Sketch Plugin is available for PhraseApp Pro and Exclusive plans. If you're currently on another plan but would like to use this feature, please get in touch with us or easily start a plan trial yourself. Easily navigate to the learn more button on the Integrations overview within the PhraseApp translation center.
The PhraseApp Sketch plugin allows you to sync the content from your Sketch designs directly from within Sketch to your PhraseApp project. Translate this content in PhraseApp right away and and sync it back to Sketch once it's completed.
Collaborate efficiently at an early stage of development to avoid surprises in your design later on. Establish a continuous sync between Sketch and PhraseApp and optimize your design content for multiple languages.
Create a PhraseApp project you want to upload your content to and add at least one locale. Of course, you can also use an existing project.
Follow these simple two steps to make to activate the plugin in Sketch:
- Download the PhraseApp Sketch Plugin
- Unzip the file archive, then double click on the phraseapp-plugin.sketchplugin file
You will be prompted with a message from Sketch, stating that the plugin has been installed successfully.
Once installed, you can access it via the Plugins menu via Plugins > PhraseApp.
After the successful installation, the first thing you would need to do is to configure the plugin in order to initially connect Sketch with PhraseApp.
To do that, navigate to the Plugin configurations via Plugins > PhraseApp > Configure or by using the dedicated shortcut Configure = ^⇧P. You will see the following window. Hover over the elements in order to see tooltips.
1. Access Token
Enter an API Access Token generated in your PhraseApp account. Access Tokens can be used to access the API without providing your username and password. Learn more here.
2. Project ID
Enter the project ID of the PhraseApp project you want to connect Sketch to. Your design content will be synced to this very project. You find the Project ID in the project settings of a project or. Make sure you have at least one locale existent in this project.
Please select the language your design is in, so the plugin pushes the translations into the correct locale. Simply open up the language switch and choose the right locale.
Click Ok and you're all set!
The configuration is also the place where you can make choices over additional settings:
Select this option if you want to update all existing translations with the latest content from Sketch to PhraseApp.
Select this option to let PhraseApp Autopilot translate the content you push from Sketch to PhraseApp automatically into all languages available in your project, using translation memory and machine translation. Autopilot must be enabled in your project settings to use this workflow. Also, you need to push translations into your default locale in order for Autopilot to trigger translations into your target locales.
Auto upload screenshots
Select this option if you want PhraseApp to automatically upload screenshots of your Sketch artboards when uploading translations. They will directly be linked to the respective keys.
Push translations from Sketch to PhraseApp
You can sync the content from your Sketch file to the dedicated PhraseApp project the content by simply clicking Plugins > PhraseApp > Push Translations via the Sketch Plugin menu.
Select specific elements of your page
If you don't select a specific artboard or text element, the plugin will consider all content from the currently selected page per default. As soon as you make a selection of any content element other than the page, only your selection will be pushed to PhraseApp. The same works for pulling translations from PhraseApp to Sketch.
Customizing key names
Also, choose to customize your key names beforehand or let us autogenerate a key name for you. When pushing content from Sketch to PhraseApp, we automatically create key names for every text element you selected for the upload. These key names will be a compilation of the names of Page.Artboard.Textelement.
In case you have internal guidelines or practices regarding the naming of your keys, you can easily customize your key names within Sketch.
- Select the text element you wish to customize a key name for
- Navigate to Plugins > PhraseApp > Rename key
Alternatively, simply use the dedicated shortcut for customizing key names: Rename Key = ^⇧R.
What will happen is an automatic key and translation extraction from Sketch in order to be uploaded to your PhraseApp project.
Simply go to the uploads overview page and find all your pushed content pushed via Sketch. For instance, you can easily create translation jobs from there.
Translate with the context artboard screenshot
The screenshot function of the plugin automatically takes screenshots of your Sketch artboard, uploads them to PhraseApp and links them to the respective keys. Access the dedicated screenshot in the side bar of the PhraseApp translation editor and see exactly where the copy belongs by means of the marker we place for you. This way you provide copywriters and translators with the context they need.
Please make sure you have at least one artboard in place.
Pull translations from PhraseApp to Sketch
Once the translations for your copy are done, you can navigate to Plugins > PhraseApp > Pull Translations in order to sync the latest translations updates of all your languages from PhraseApp back to Sketch.
You can now test your designs in all languages, corresponding to the ones in the dedicated PhraseApp project, and catch l10n layout issues early on by easily switching the language of your Sketch file.
Switch the language of your design
The language switch can be used for two things:
- Automatically download translations from a specific language without using the Pull translation action (which pulls the already selected language into your currently open Sketch page)
- Switch your Sketch file to another language
Navigating to Plugins > PhraseApp > Switch Language will open a window that lets you switch the language of the entire Sketch file. Use the dedicated shortcut Switch language = ^⇧L to be even quicker.
Select from the languages available in your project and click OK. You can the respective translations from PhraseApp directly in your design.
Make use of dedicated Tags
When using the Sketch plugin to add new keys to your project on a regular basis, it can be quite difficult to track which keys belong to which feature or section of your project. You can easily and quickly separate your various syncs with distinctive tags.
The plugin automatically creates distinctive tags to your keys to always keep them well organized. The tags are built in the following structure:
Learn more about working more efficiently with tags.
Symbols and overrides
The PhraseApp Sketch plugin fully supports overriding texts in a symbol instance. You can also work with nested symbols the way you're used to.
Combining the PhraseApp Sketch Plugin with other Sketch plugins
For instance, you can also trigger all actions with 'Runner'. Or make sure your element sizes are never off by letting 'Anima ToolKit' fix this automatically after pulling translations from PhraseApp. Here's an example how Anima can quickly do the work for your after switching the language of your design.
Please us know, if you find more useful combinations.
I've configured the plugin, why is my content not being synced?
Please make sure you have locales set up in your project. Please check your current role within PhraseApp, as Translators need to be granted the permission to upload content to projects explicitly.
I already have the plugin installed, how do I get the latest plugin version to work?
Navigate to "Manage Plugins..." via the Sketch plugin menu. You can simply click update to install the latest version. Alternatively, download the the newest version manually, unzip the file archive and double click the .sketchplugin file. Choose to Replace the currently installed version, and you're all set up.
I activated Autopilot, why does automated translation not work?
Please make sure that Autopilot is activated in the project settings of the PhraseApp project you connected with Sketch. Also, bear in mind that Autopilot only works for new uploaded keys. Whenever you push translations from Sketch to PhraseApp for which you only update translations, Autopilot will not be triggered.
Who is allowed to upload and manage screenshots?
Everyone that has the role Manager assigned is allowed to upload screenshots in all projects. Additionally, everyone that is a project member and has the role Developer assigned is allowed to upload and manage screenshots in that particular project. Learn more about working with screenshots here.
I activated the auto screenshots upload, why aren't they uploaded?
Please make sure that your Sketch page contains at least one artboard. The plugin doesn't take screenshots of elements that aren't on a dedicated artboard.