Crowdin for Adobe XD: Translate Static Visuals and Localize Product UI

4 mins read
Crowdin for Adobe XD: Translate Static Visuals and Localize Product UI

From the initial step of copy creation to the final tests of the translated mockups before release. We understand how important it is for design teams to be involved in the localization cycle on each step. We’re excited to launch Crowdin plugin for Adobe XD that connects the two systems and will help designers play an active part throughout the localization process.

With the new Crowdin plugin for Adobe XD, designers can upload production-ready texts from Crowdin and use them in their XD designs. Designers add new source strings when working in Adobe XD and send them to Crowdin for translation, along with the context for translators. The plugin also helps to create multilingual marketing visuals like brochures and banners faster.

Synchronize Content Throughout the Development Cycle

Building products for international markets requires collaboration between multiple teams, including design, development, marketing, translation, and more. Crowdin aims to give everyone a comfortable place to work on their part, within the tools they need.

With the new Crowdin plugin for Adobe XD, companies can iterate faster by connecting their version control systems (such as GitHub, GitLab, Bitbucket, or Azure Repos), UI/UX design tools (Adobe XD), and translation management platform (Crowdin). There are numerous scenarios the plugin can be integrated into the localization workflows.

Add a Copy on a Mockup and Update Source File on Crowdin in a Click

Let’s say your team is developing a new product feature. If the process of copy creation is done on the Adobe XD side, designers can add new texts to their prototypes and then, using the plugin, send the new strings with the keys to Crowdin for translation.

If you also have integration between Crowdin and a version control system set up, the updates to the source files will arrive at the repository as merge requests, along with the updates to translation files, after final translations appear on Crowdin.

Use Real Texts in Your Designs Instead of Lorem Ipsum

If you’re on the team that is building new features with UI copy creation, use the plugin to add production-ready texts to your designs in Adobe XD.

When source texts are uploaded to the Crowdin project by marketing or development teams, designers can get the list of all the source strings and add them to their designs in a click.

Generate Multi-Language Creative Assets

The Crowdin plugin for XD also lets you quickly translate static marketing visuals like social media graphics, posters, blog visuals, brochures, banners, and more.

Create graphics on Adobe XD, send artboards to Crowdin for translation, and upload translated variants back. This way, you can preview the translated variants and fix inconsistencies for each language separately.

For the fastest results, you can pre-translate content via Machine Translation engines on Crowdin, proofread the translations, and upload the translated copies to Adobe XD.

Always Available Context for Translators

On Crowdin, the source texts can be translated by in-house or freelance translators. You can hire a professional translation agency to translate and proofread the content or involve your community in the localization initiative.

Whichever translation method you’re using, visual context will help to get translations of better quality. By connecting Crowdin and Adobe XD, you can stay assured that translators will always have sufficient context. Working with static pages, translators will be able to preview the designs in Crowdin Editor. When localizing the UI, designers can automatically upload tagged screenshots to the Crowdin project. They will be visible for translators in the Crowdin Editor for reference.

Details to Get Started

To connect the two systems, you’ll need a Crowdin account and manager access to the Crowdin project your team already has. You can also create a new project and invite everyone involved. In this case, after a free trial period, you’ll need to choose a subscription plan that suits your team’s localization ambitions.

Once this is done, proceed with installing and configuring the plugin. Here’s a detailed guide on how to do it in a few simple steps.

Iryna Namaka