Localize product interface faster

Learn how to synchronize content between Sketch, Crowdin, and your repository and give translators sufficient context for great translations.

We launched the Crowdin plugin for Sketch a while ago. It worked (and still works) great for designers who want to quickly create multilingual creative assets, like blog visuals, brochures, and banners.

Yet we received multiple requests from teams that deal with UI localization, and they were looking for ways to synchronize the translatable content not only between the design tool and their translation management system but with the code repository. So that the updates in the source files and ready translations could be further integrated into the product automatically.

Here are the updates to the Crowdin plugin for Sketch that meet the requests from teams working on multilingual UI and should help collaborate on global products more efficiently.

Crowdin plugin for Sketch — Old and New Use Cases

Localization today is never a one-time action. As long as companies keep releasing new features and improving the existing ones, new design elements will appear and new texts and will require translation. In the same way, it is no longer a one-team collaboration. Developers, copywriters, marketing managers are all involved in the process, along with the design teams, of course.

Crowdin plugin for Sketch is developed with these thoughts in mind and helps you to:

• (New) Get production-ready texts from the Crowdin project and use them in your designs.
• (New) Add new source strings and send them to Crowdin for translation.
• (New) Upload tagged screenshots to your Crowdin project for translators’ reference.
• (New) Keep source texts in sync and integrate updates to source files and ready transitions into the product code via Crowdin API, CLI, or integrations with GitHub, GitLab, Bitbucket, and Azure Repos.
• Quickly generate multi-language creative assets like social media graphics, posters, blog visuals, and more.
• Translate mockups and test them in different languages before the programming starts.

Prototype with real words

With the new release of the Crowdin plugin for Sketch, you can now upload all source texts that are translated within a Crowdin project and add them to your mockups. These ready texts could be previously added to Crowdin either by marketing teams or could be uploaded directly from the codebase. Adding a text string requires a few clicks, and you can stop using that Lorem Ipsum, finally.

Update source files on the repository right within Sketch

If some string is missing or you decide to add another element (a button, for example), you can update source files on Crowdin directly from Sketch. And these updates can be further synchronized with the codebase via Crowdin integrations with Azure Repos, Bitbucket, GitHub, and GitLab. The updates to the source files will arrive at the repository as merge requests.

Customize the translated mockups

On Crowdin, texts can be pre-translated via Machine Translation engines, or you can invite your in-house translators, freelancers, and a translation agency to work on the content. Once the translations are ready, you can preview the translated mockups right within Sketch.

Note, that when localizing product UI, you’ll be able to preview translations only for the strings from Crowdin you’ve used or new strings you’ve added.
If you translate static visuals and won’t need to integrate those texts into the code, you’ll be able to send whole pages and artboards for translation on Crowdin and upload the translated variants back to Sketch.

Make sure translators have sufficient context

The updated version of the plugin allows you to send tagged screenshots of the artboards where you used the source strings. The screenshot will be visible for translators when they work on your content on Crowdin.

When working with static pages, translators will also be able to preview the designs in the Crowdin Editor (a place where all the translations happen).

Build a continuous localization cycle and collaborate across teams

So, basically, the workflow for creating multilingual UI now looks as follows:

• Source texts are uploaded to Crowdin either by marketing or development teams.
• Designers use ready source texts in their prototypes. Add new strings if necessary.
• Translators working on Crowdin can see the screenshots that were sent from Sketch and provide better translations.
• Once translations are ready, the mockups can be tested in different languages directly in Sketch.
• The content is kept in sync between Sketch, Crowdin, and the version control system your team uses.

You can, of course, customize this workflow to your own needs. The most important part, all teams can now work within the tools they need but integrate all the localizable content together via Crowdin.

Getting started

Here’s a detailed guide on how to make Crowdin and Sketch work together. To get started, you’ll need a Crowdin account and a localization project under it. If your team already uses Crowdin, request manager access to the existing project.

You can download the latest version of the Crowdin plugin for Sketch from our GitHub repository or find it directly on the Sketch marketplace.