1. Help Center
  2. End-to-end guides

Onboarding guide for designers

Learn how to bring together localization and design with Phrase.

Developing software in multiple languages requires the integration of localization into software development cycles. This, in turn, calls for automation to avoid disruption and save time, effort, and money.

Phrase is a powerful platform that offers the right type of support not only to project managers and translators but also to developers and designers.

If you are a designer, you can use Phrase’s integrations and plugins to optimize your interface designs for multiple languages, preview the results without leaving your favorite design tools, and connect your work with that of translation teams.

This guide will get you up to speed on how to bring together localization and design.

Get Familiar With the Process

As a designer, whether you prefer Figma or Sketch, it’s important that you learn how to get involved in your company’s localization process and how to work with multilingual copy.

Here, we’ve compiled the 'theory' behind integrating localization into your design workflow with tools like Figma and Sketch, so you can soak yourself in it and come back to consult it at any time.

Benefits of Integrating Design and Localization

In general terms, there are two possible approaches to localization:

The traditional process, where localization comes after the product has been fully developed and launched in the core market.

traditional-design-localization-process

The design process, where designers create UX and UI suitable for multiple languages and localization is carried out in tandem with design and development. The product rolls out in multiple markets at once, and every time Product teams introduce new iterations, localization teams work simultaneously to reflect the product changes in their translations.

design-localization-process

Integrating localization into the design project rather than leaving it as an afterthought implies several benefits, like spotting design breaks early, avoiding layout issues, and the possibility to get feedback from linguists before the product launches. Read more about it here.

While the theory sounds exciting, synchronizing the work of devs, designers, and translators is not precisely a piece of cake when you don’t have the right tools. A smooth integration can only happen with a strong, yet easy-to-use platform, like Phrase, which provides dedicated plugins such as Sketch and Figma. Keep reading to find out everything you need to know about Phrase as a designer.

Sign Up to Phrase

To start working with Phrase, first, you need to get access to your company’s Phrase account. You can do it through an email invite to sign up that someone with manager rights at the company will send you, and which you need to accept.

This invite specifies your Role (there are six predefined Roles, yours will be ‘Designer’) and the Projects to which you’ll be assigned. Here’s what an invite looks like:

Designer sign up_1

After you accept it, register to join your company’s Phrase account or log in with your existing credentials, if you already have a Phrase username and password.

Connect Your Design Tool with Phrase

Once your Phrase account is up and running, it’s time to install the Sketch or Figma plugin (depending on the tool you use) from the Integrations tab, and log in to Phrase from it.

Designer sign up_5

A Frictionless Workflow with the Sketch and Figma Plugins

Each of your designs needs to be adapted to several different markets, and the least you want is to spend your valuable time fixing design breaks after translators submit their work.

Phrase’s Sketch and Figma plugins make it easier for you to build your UI for a global audience with minimal effort and a speedy workflow. Send design content from Figma to Phrase within seconds, building a bridge and ensuring seamless collaboration between design and translation teams.

With the Sketch and Figma plugins, you can:

  • Work with real copy (no more Lorem ipsum!);
  • Easily create translation keys and jobs for your designs;
  • Leverage Phrase’s machine translation to preview what your entire Sketch or Figma designs look like in other languages;
  • Create fantastic UX designs across your entire digital ecosystem regardless of the language;
  • Push content to Phrase and pull finished translations back into your Sketch or Figma artboards in two clicks without leaving them;
  • Set character limitations for your UI to avoid it breaking from text expansion in other languages;
  • Upload screenshots to provide translators and developers with appropriate context;
  • And much more.

For a detailed guide to downloading and installing the Sketch plugin, check out his Help Center article. For a visual demonstration of how to integrate Sketch and Phrase, check out this webinar.

If you need orientation around the Figma plugin, head over to this article or watch this insightful webinar.

The Design Localization Workflow

We’ve already touched on the design localization process (as opposed to the traditional one), where the workflow is agile, and developers and translators work simultaneously before the product rolls out in several markets at once. The steps are generally as follows:

  1. Designers create the UX and UI and push keys and screenshots to Phrase.
  2. Developers write new code or update the existing one.
  3. New content pushed to Phrase from the design tool is immediately visible to the localization team – they can start working on it straight away.
  4. Phrase shows in the design tool when translations are ready. Designers can then pull them into their Sketch or Figma artboards and check and optimize the UI for all languages.
  5. Translations are now ready in Phrase for developers to use – they can now download copy in all languages.
  6. The content is released in the relevant market or markets.

For this workflow to succeed, it’s crucial to establish certain cross-functional team collaboration guidelines.

Feeling a bit overwhelmed by so much information? We’ve prepared a simple cheatsheet for designers for you to refer to at all times.

Seamless Communication

The design localization workflow is fast and iterative and comes part and parcel with team alignment. Communication must be continuous, streamlined, and efficient among team members and also across teams.

Within each team, it’s important to define clear tasks and goals for each member and to ensure everyone else is kept in the loop about their colleagues’ progress through regular reports. Moreover, everyone should be on the same page about the design localization process to avoid incorrect assumptions that localization is an afterthought that isn’t integral to the product development cycle.

Across teams, translators and localization managers need to be aware of what developers and designers are working on at all times. Regular feedback and warnings of potential problems are essential. Localization teams will be working mostly ad-hoc, picking up and translating keys quickly and sporadically; this requires cross-team engagement and collaboration.

The bottom line is that Product teams should code and design with localization in mind to avoid some features impacting the work of translators down the line.

Key Naming Conventions

Because you will be working alongside the Development team, who will be creating the translation keys for your UI texts, it’s important to agree on a key naming convention that will avoid problems along the way stemming from poor naming.

Including enough context information in key names leads to more informed decisions and, in turn, higher localization quality. It also saves everyone an enormous amount of effort and manual work looking for clarification from other teams or trying to manually find more context for a poorly named key.

Consistent and well-structured key naming also makes it easier to search for specific elements both in the code and in a translation job.

Unsure what makes a good name? Here’s a comprehensive guide to efficient key naming.

Further Reading

No discussion about bridging design and localization is exhaustive without referring to internationalization.

Internationalization, i.e., the design process that ensures that a software application can be adapted to different languages and markets without the need to introduce changes to the source code, is a fundamental step of multilingual software development.

You can complement this onboarding guide by reading about how to design apps in Sketch for iOS internationalization and how to create outstanding user experience designs for multiple languages.