Localization at the Design Stage

How to Localize Content Starting at the Design Stage

This tutorial will show Applanga users how to localize content at the design stage of an app development life cycle stage. Users can follow the steps to upload content from Figma or Sketch files through to finally migrating translated strings into an app.

For more information on integrating Applanga into UX tools such as Figma, Sketch, or Adobe XD, please see the Applanga Integration Documentation.

Before starting, users should make note of the following considerations for localization at the design stage:

  • It is recommended that users create a copy of a page before downloading translations to prevent compromising the design file.
  • All fonts used in the design file must be installed locally. Translations won’t be populated for text with missing fonts.
  • If there are changes in formatting within a text string, those changes are included as placeholders in the uploaded string. This formatting is found in curly brackets {} within the string. The plugins do have an option to ignore formatting for these cases. This option makes it easier to migrate translations to app strings. See the Integration Documentation to learn more.
  • Applanga Dashboard updates can take up to 10 minutes for the design software plugins to download translations (including recently added languages.)
  • This article is geared towards Figma users, however similar steps can be taken to localize Adobe XD or Sketch designed apps. Refer to the Applanga Integration Documentationfor more information.
  • See the Design Tool Plugin Best Practices blog post to learn more plugin tips and tricks

Table of Contents

  1. Applanga Project Creation and Figma Integration
  2. Upload Content from Figma via Plugin to the Project on Applanga
  3. Add Languages to the Project and Initiate Translation Workflows
  4. Download Translations into design file
  5. Create Translated Screenshots and Upload them to Applanga via the Plugin
  6. Review Translations in Applanga In-Context Editor
  7. Migrate Translations to your App

Step 1 - Applanga Project Creation and Figma Integration

  1. Open Figma and navigate to the file which requires integration with Applanga
  2. Use the steps outlined in Figma Integration Documentation - Installation to add the Applanga Plugin to Figma
  3. Navigate to Applanga, log in, and create a project for Figma integration by clicking +Add Project
  4. Complete the project creation by adding a Project Name, Base Language, and selecting a Team
  5. Click Create New Project and proceed to the Integration step
  6. Click View integrations and select Figma plugin from the integration panel
  7. Copy the API token for your newly created project and click Go to Project to complete project creation
  8. Open Figma and navigate back to the Figma design file requiring Applanga integration
  9. Follow the steps outlined in the Figma Integration Documentation - Connection Settings to establish the connection between the Figma design file and the Applanga project.

Back to Top


Step 2 - Upload Content from Figma via Plugin to the Project on Applanga

After integrating an Applanga Project with a Figma files, users must upload all content, strings, and screenshots from Figma to the Applanga Project.

  1. Navigate to your Figma file and select the menu in the top right corner, then select Plugins > Applanga

  1. From the Applanga Plugin menu, select Upload

  1. Use the default, pre-selected upload options or follow the Figma Integration Documentation - Uploading Content for Translation steps to complete Figma content upload to the Applanga Project

  1. Click Finish once the upload is complete

When new text that is not yet on Applanga is part of the upload, there is the option to manually edit the resulting new string Id names. The string ID naming dialog will not display if only screenshots are being uploaded or there are no new texts to upload to the Applanga dashboard. Refer to the Renaming String Ids section for more information.

Back to Top


Step 3 - Add Languages to the Project and Initiate Translation Workflows

Once the UX design file content is uploaded to the Applanga Dashboard, users can then add languages to the Applanga Project and start the project translation workflows. Applanga provides two main translation workflow options for users: translations orders fulfilled by Applanga’s parent company TransPerfect or users can rely on their internal translation resources.

  1. Login into Applanga and navigate to the Figma-integrated project
  2. Use the Language Panels to find the required languages for translation (A or B) then click Add (Use the Search bar (C) to find specific languages or dialects)
  3. To start the translation process within the Applanga Dashboard, users can either utilize the Applanga integration with TransPerfect Translation Services OR users can translate the content within their own internal teams
  • TransPerfect Translations - If using TransPerfect translation services, follow the steps outlined in TransPerfect Translation Service Documentation to start the ordering process.
  • Self Translating - If the Applanga user's internal teams will complete translations, follow the steps outlined in the Translate Yourself Documentation. Users can skip to step number three for Figma-integrated projects.

For additional translation workflow information, Applanga user’s can refer to the Translation Workflows Documentation.

Back to Top


Step 4 - Download Translations into design file

Once translations are available in the Applanga Dashboard, they can then be downloaded back into the UX design file for review of the translated design file and, if necessary, make adjustments to the layout and UX - proofing the design for localization. This is a helpful step to catch any issues which may otherwise only be spotted later in the process (e.g when the actual app is built and tested in a translated version.)

  1. Open the originally uploaded design file again
  2. Select the menu in the top right corner then select Plugins > Applanga
  3. Click Download on Applanga plugin menu
  4. Follow the steps outlined in the Figma Integration Documentation - Translate Your Figma File.
  • Please note, the translation download will overwrite the source text in the design file. It is strongly recommended for users to create a copy of the source file for the translation process. Users can also revert back to the file starting point by selecting the source language and downloading it again.
  1. The design will appear translated now (To reset the design to the original form, download the base language again)
  2. Review the translated Figma file and enact any required changes

Back to Top


Step 5 - Create Translated Screenshots and Upload them to Applanga via the Plugin

After downloading translated content into the design file, translated screenshots can then be uploaded to the Applanga Dashboard for linguistic review in the Applanga dashboard.

There are two methods: language by language or batch screenshot upload.

Method 1:

  1. Open the Applanga-integrated Figma project in Figma
  2. Select the menu in the top right corner then select Plugins > Applanga
  3. Select Upload from the Applanga Plugin Menu, then follow the steps outlined in the Figma Integration Documentation - Uploading Translated Screenshots

Method 2:

  1. Open the Applanga-integrated Figma project in Figma
  2. Select the menu in the top right corner then select Plugins > Applanga
  3. Select Upload from the Applanga Plugin Menu, then follow the steps outlined in the Figma Integration Documentation - Uploading Translated Screenshots for Multiple Languages

Method 2 Notes:

  • For batched screenshot upload, the plugin will take screenshots for all languages available in the applanga project one at a time (download language 1, screenshot and upload, download language 2 and so forth.)
  • After all languages complete upload, the base language values will be automatically re-applied.

Back to Top


Step 6 - Review Translations in Applanga In Context Editor

Once translations with screenshots are uploaded to the Applanga Dashboard, users can also use the Applanga in-context editor for linguistic review.

  1. Login into Applanga and navigate to the integrated project
  2. Select the Language with the uploaded, translated screenshots
  3. Click Screens and select the screen associated with the app page to review (The screen names/tags are imported with the screenshots and are associated with the individual pages in the Figma project)
  4. Click on individual strings to edit translations then save as a draft or save as the target value

For more information about In-Context review, please refer to the Reviewing Translations on Applanga Documentation.

Back to Top


Step 7 - Migrate translations to your App

Once translations are approved, development teams can easily export string files from the Figma-integrated project for use in an app build since the string Ids were previously named accordingly during the upload process. Developers can also set up one of the other integration types to seamlessly pull translations into their build.

Refer to the Manual Export article or the Integration Documentation for the option that works best for you and your team.

If you do not choose to rename the string IDs upon the initial upload from Figma to Applanga or you used previous versions of the Figma plugin to upload your design file content, users should follow the steps outlined in the Localization at the Design Stage blog post.

Back to Top