Learn how to download, install and use the Phrase Sketch Plugin in order to integrate localization into your design process.
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 Phrase translation center.
The Phrase Sketch plugin allows you to sync the content from your Sketch designs directly from within Sketch to your Phrase project. Translate this content in Phrase 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 Phrase and optimize your design content for multiple languages.
Download Sketch Demo File
Learn how to sync your designs with Phrase by letting us show you how it all works in this this Sketch Demo File.
If you're on a Pro or Exclusive plan, you can also download the plugin via the Integrations tab within the Phrase translation center.
Follow these simple two steps to make to activate the plugin in Sketch:
- Download the Phrase 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.
Connect Sketch with Phrase
After the successful installation, simply click Phrase in the plugin menu and login with your Phrase credentials in order to connect Sketch with Phrase. If you don’t have a Phrase account yet, just click on sign up and register for a free 14 days trial in your browser.
Create a Phrase project you want to upload your content to and add at least one locale. Of course, you can also use an existing project.
Simply choose the Phrase project you want to start with and open up the Phrase Toolbar via the plugins menu, in order to have all relevant functions right at your fingertips.
Push translations from Sketch to Phrase
You can sync the content from your Sketch file to the dedicated Phrase project the content by simply clicking Push selected in the Toolbar.
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 Phrase. The same works for pulling translations from Phrase 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 Phrase, 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 the Phrase Toolbar. Simply select a text layer and edit your key name in the dedicated input field.
What will happen is an automatic key and translation extraction from Sketch in order to be uploaded to your Phrase 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 Phrase and links them to the respective keys. Access the dedicated screenshot in the side bar of the Phrase 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 Phrase to Sketch
Once the translations for your copy are done, simply click Pull Translations in order to sync the latest translations updates of all your languages from Phrase back to Sketch.
You can now test your designs in all languages, corresponding to the ones in the dedicated Phrase project, and catch l10n layout issues early on by easily switching the language of your Sketch file.
Switch the language of your design
Easily switch the language of your design to the languages available in your Phrase project via the Toolbar.
The plugin settings are accessible via the little settings icon in the Phrase Toolbar. It's 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 Phrase.
Select this option to let Phrase's Autopilot translate the content you push from Sketch to Phrase 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 Phrase to automatically upload screenshots of your Sketch artboards when uploading translations. They will directly be linked to the respective keys.
Change Phrase project
Simply click on the Change Button on the left hand side of the toolbar.
You will need to:
- Select the Phrase project you would like to push to
- Select the language you would like to design in
You'll always see the connected Phrase project right on the toolbar.
Set character limits
You can enforce a character limitation for each text element that your team mates need to follow. It's as easy as selecting an element and clicking the lock icon on the toolbar. The plugin automatically calculates the maximum character limit for this text field and will send it to Phrase the next time you push your content.
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 Phrase 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 Phrase 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 Phrase. 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 Phrase, 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 Phrase project you connected with Sketch. Also, bear in mind that Autopilot only works for new uploaded keys. Whenever you push translations from Sketch to Phrase 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.