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.
Our plugin allows 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 were 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:
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.
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 projects or create a new one. You can also set the default key naming pattern and 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 Disconnect project button at the bottom.
- Logout from Lokalise — you'll disconnect the currently chosen Lokalise account from Sketch.
- 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 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.
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.