Sketch is a vector graphics editor for macOS. It is primarily used for user interface and user experience design of websites and mobile apps and does not include print design features.
Overview
Our plugin enables you to exchange texts and translations between Lokalise and Sketch. You can choose a desired language and the corresponding translations will be inserted into the proper text elements automatically.
The plugin allows to:
Push texts to Lokalise.
Pull translated texts from Lokalise.
Set key names (or use any of the patterns for automatic naming).
Set character limits for created keys.
Create new keys or match texts to existing keys in Lokalise.
Seamlessly switch design language.
The plugin can send requests in two directions:
Push texts to the Lokalise — all text blocks on the page will be uploaded to Lokalise and linked to translation keys. If you have set character limits in the plugin, these limits will be saved in Lokalise as well. After texts are imported to Lokalise, you can translate them as usual.
Pull translations from the Lokalise — translations are exported from Lokalise to Sketch. These downloaded translations will be automatically fitted into the initial design text blocks.
Here's a diagram representing the usual workflow:
Getting started
Installation
To install the plugin:
Proceed to your Sketch project and open Menu > Plugins > Manage plugins.
Click Get plugins and select Lokalise plugin from the list.
Click Install.
You can also download the plugin from the official GitHub repository.
Launch the plugin
Open your Sketch project.
Proceed to Menu > Plugins > Lokalise.
Setting up the plugin
Connect your Lokalise account and grant the necessary access rights.
Select an existing Lokalise project or create a new one. You can also choose a branch (if the branching feature is enabled in the project settings), set the base language and the default key naming pattern, choose the default platform for the newly created keys.
After the setup is done, you'll see a dialog box. Here you can select elements, set key names or character limits and push texts to Lokalise:
To adjust project settings, click on the Cog icon in the top right corner of the dialog. You'll be presented with the following options:
Project — the name of your currently chosen Lokalise project. You can disconnect this project and choose a new one by clicking the Disconnect project button at the bottom.
Logout from Lokalise — you'll disconnect the currently chosen Lokalise account from Sketch.
Branch — the target branch in the chosen project. This option will be visible only if the chosen project has the branching feature enabled.
Base language — base language of your project.
Platform for newly created keys — choose one or more platforms for the keys that will be created on Lokalise after pushing texts from Sketch. Please note that this setting will not affect already existing keys.
Default key naming pattern — choose the naming scheme for the newly created keys. Please note that this setting will not affect already existing keys.
Text styling enabled — if the text contains words with additional styling, the plugin will synchronize it properly. For example, if you have a text "Welcome to the app" (note that the word "app" is bold), the corresponding translation value on Lokalise will be
Welcome to the <b>app</b>.
Pushing texts to Lokalise
To push one or more texts from Sketch to Lokalise, select them in your design. You'll be presented with a brief summary:
Note that here you can adjust the key names by entering new values inside the text boxes. Also, you can provide text length limitations by adjusting the corresponding numbers.
Finally, click the Key icon to link/unlink a specific text element to/from the already existing key on Lokalise.
Here you can adjust search criteria and choose a key to link to or unlink from. If the text element is linked to a key, its name cannot be modified anymore. Please note that you do not have to always link all the text elements manually as there's an option to apply this operation automatically.
Once you are ready, click Push selected. You'll see the following dialog:
Match texts to existing translations in Lokalise. If checked, strings in Sketch will be matched to the already existing translations in the Lokalise project.
Create missing keys in Lokalise. If checked, all missing keys will be created in the Lokalise project.
Link new duplicate texts to a single Lokalise key. If checked, duplicate texts in Sketch will be matched to a single Lokalise key. Otherwise, for each duplicate text block a new Lokalise key will be created.
Tag newly created keys (comma separated). If checked, you can add tags that will be assigned to the Lokalise keys.
Update Lokalise translations with modified texts. If checked, all already linked keys in Lokalise will be updated with the modified texts from Sketch.
Update screenshots. If checked, screenshots in Lokalise will be created or updated with the new ones.
Push hidden elements — even if the chosen text elements are hidden in Sketch, they will still be uploaded to Lokalise.
Adjust the above options and click Confirm. Once the import process is finished, you will see a brief summary:
Now you can proceed to Lokalise and perform translations as usual. If the Update screenshots option was enabled, each translation key will have a linked screenshot.
The main steps of the translation process are shown in the following diagram:
Pulling texts from Lokalise to Sketch
Once the required translations are added or modified on Lokalise, you can pull them to Sketch. Select a language and click Pull all if you want to pull all keys from the Lokalise project, or choose only the specific text elements in your Sketch design and click Pull selected.
After this operation is complete, your design will be translated automatically! To download more recent translations from Lokalise, you can choose the desired text elements and click Pull selected again.
Plural keys support
Our Sketch plugin has support for plural translation keys as well. To make your key plural, simply click on the +plural text next to its name:
Once a key was marked as plural and pushed to Lokalise, you'll see a dropdown with all the plural forms for the currently chosen language:
You can switch between these plural forms and click Update design to reflect changes. Also, if you switch to a different language, the plural forms will be updated accordingly as well.
Creating page duplicates
It is possible to create page duplicates based on your current design:
Duplicate with key names — all your text elements will be replaced with the corresponding key names. This is very useful for developers so that they can see where each translation key is being used.
Duplicate with translations — all text elements will be replaced with their translations in the chosen language.
To achieve that, click Duplicate:
Next, choose the type of duplicate you would like to create and give it a name:
Once you are ready, click Create.
After that you will see a new page similar to this one:
In the example above all text elements contain the corresponding key names.