Learn how to download, install and use the Phrase Sketch Integration in order to integrate localization into your design process.
The Sketch Integration is available for Phrase Advanced and Enterprise 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 an Advanced and Enterprise plan, you can also download the plugin via the Integrations tab within the Phrase translation center.
Follow these two simple steps to activate the integration 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 your company doesn’t have an organization set up in Phrase 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. If you are making usage of our Branching feature, you can also select a branch here as well.fe
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. The button will now show the number of translations intended to be pushed to Phrase. Clicking the button again will transfer those translation to Phrase.
Select specific elements of your page
If you don't select a specific artboard or text element, the integration 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 integration 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 integration 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 pre-translation (previously Autofill) translate the content you push from Sketch to Phrase automatically into all languages available in your project, using translation memory and machine translation. Pre-translation must be enabled in your project settings to use this workflow. Also, you need to push translations into your default locale in order for pre-translation to trigger 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 integration 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 integration 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 integration 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 integration 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 Integration with other Sketch integrations
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.
Can I send Sketch content to a specific Phrase branch?
Yes, our Sketch integration supports the usage of Phrase branches. Simply select the branch additionally to selecting a Phrase project.
I've configured the integration, 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 integration installed, how do I get the latest plugin version to work?
Navigate to "Manage Integrations..." via the Sketch integrations 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 pre-translation, why does automated translation not work?
Please make sure that pre-translation is activated in the project settings of the Phrase project you connected with Sketch. Also, bear in mind that pre-translation only works for new uploaded keys. Whenever you push translations from Sketch to Phrase for which you only update translations, pre-translation will not be triggered.
Who is allowed to upload and manage screenshots?
Everyone that has the role Admin or Project 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 integration doesn't take screenshots of elements that aren't on a dedicated artboard.