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.
 

Sketch Plugin

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.

Preparation

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.
 

Download

Download Phrase Sketch Plugin 1.0.1
 
If you're on a Pro or Exclusive plan, you can also download the plugin via the Integrations tab within the Phrase translation center.
 

Installation

Follow these simple two steps to make to activate the plugin in Sketch:

  1. Download the Phrase Sketch Plugin
  2. 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.

 

Configuration

After the successful installation, the first thing you would need to do is to configure the plugin in order to initially connect Sketch with Phrase.

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 Phrase 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 Phrase 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 or by hovering over a over it on the project overview page. 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:

Update translations
Select this option if you want to update all existing translations with the latest content from Sketch to Phrase.

Use Autopilot
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.
 

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 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 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 Sketch. 

  1. Select the text element you wish to customize a key name for
  2. 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 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, you can navigate to Plugins > PhraseApp > 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

The language switch can be used for two things:

  1. 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)
  2. 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 Phrase 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:

Sketch.Your_File_Name.Date

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. 

 

FAQs

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.

Did this answer your question?