This integration is available starting from Pro plan.
Very often the designers are the ones who pass their work to coders. As coders get the designs, they break textual information to keys and add keys to Lokalise. There is quite a scope of workload between the moment when the design work is finished, and the time when translators can start to translate their part.
Thanks to the Lokalise Sketch integration you can eliminate the gap and let your translators start working immediately as soon as the design is ready, letting them see the immediate results of their work in previews.
- Automatic key and translation extraction
- Screenshot generation
- Instant preview of localized texts in proper design
- Downloading the translated .sketch files
How it works
Using the integration
It is a good idea to start with a blank project. Create a project, navigate to the Project settings > Integrations > Sketch > Connect.
You need to select the destination language for translation import (that would be the source language of your .sketch file) and platforms to which the keys will be eventually exported.
As you upload a .sketch file, the system creates key identifiers (names) for every text element that will consist of the artboard name and the text element name with an underscore in-between. All the spaces will also be replaced with an underscore.
The example above will result in a key name Onboarding.Start_Exploring. In case there are several keys to be created with the same name, the system would add a unique identifier to all the duplicates.
You may rename the keys in Lokalise afterwards, it would not break the connection with the preview generator.
Symbols and overrides
Overriding text element in a symbol instance is supported without limitations.
Overriding text element of a symbol instance (A) in a symbol instance (B) requires symbol instance (A) not to be overridden.
Overriding text element of a symbol instance (A) in a symbol instance (B) in a symbol instance (C) is NOT supported.
Exclude from import
If you want to skip text elements from importing to Lokalise, prefix them with three underscores (___).
In order to skip text overrides in a symbol instance, prefix it with three underscores as well.
When a text element in a symbol is prefixed with three underscores, the overrides of this particular text element in the symbol instance will be skipped.
Prefix text elements in a symbol with three underscores and an exclamation exclamation mark(___!) to ignore it, but include overrides of this elements in symbol elements.
Texts with green + icon will be imported, texts with red - icon will be skipped.
Invisible text elements are excluded from import automatically.
Once the Sketch file is imported, you may navigate to the editor. We have automatically created a screenshot for all of the artboards and linked them to the respective keys.
Once the translation is done, you may check a preview of the key in any of the languages using the Sketch preview button.
You can instantly see the translated string – in the proper place and font:
Generating a proper preview requires original fonts. Contact us in the support chat if your font is missing in our Sketch renderer or the preview result is not satisfying.
Downloading Sketch files
Once the translator work is done, you can download the translated version of your Sketch file. Navigate to the Integration page, click Download and select the languages to include.
Updating Sketch files
As designer adds new screens or elements, you may want to to add those to Lokalise by re-uploading the file from time to time. Do not remove the old file, it would unlink existing keys from the .sketch file. Instead, upload file with the same name again. Note that existing keys and translations will not be changed.
Please note, that Sketch integration is not preserved with project copying or snapshot.