Last updated: December 07, 2023Author: Jakub Pomykała

In this article, you will learn how to localize your Figma designs using SimpleLocalize plugin and translation editor. Use Figma integration to manage your design translations and collaborate with your team on project localization.

Table of contents

Before you start

Before getting started, ensure you have the following:

Figma: Plugin installation

In the first step, configure the SimpleLocalize plugin in Figma. Start by logging in to your Figma account and opening a project you would like to translate.

Go to Resources > Plugins and search for SimpleLocalize.

Figma plugins

Open the plugin and connect it to your SimpleLocalize account. For that, you will need your personal token generated in account settings. Next, choose which project corresponds to the open Figma design.

SimpleLocalize plugin configuration

Figma: Plugin settings

Once the plugin is installed, configure the connection between Figma design and the SimpleLocalize project by adjusting plugin settings. You can find all the configuration options in the Settings tab.

Synchronization settings

In the Synchronization settings tab of the plugin, you can find the following options:

  • Overwrite existing translations on push
  • Omit untranslatable elements (e.g., elements with only numbers or symbols)
  • Omit locked elements; if an element in Figma is locked, it won't be included in push
  • Omit hidden elements
  • Include basic text formatting
  • Upload frame screenshots as translation key screenshots.

Figma plugin settings

Key creation

Scroll down to determine how translation keys should be created from Figma text elements. By default, the key format is my-frame.button.continue which uses the frame as a prefix and then adds the group name (if used) and element name.

Translation key creation

Design localization workflow

Push, translate, and get translations are the three steps in the localization workflow with Figma and SimpleLocalize. See below for how to use them and translate your Figma designs.

Figma: Push translations

Push translations sends all texts from Figma to SimpleLocalize, creating translation keys and adding translations to your default language.

In the Actions tab, hit the Push translations button to send texts to your SimpleLocalize project.

Synchronizing translations to SimpleLocalize

Push only selected elements to SimpleLocalize to test the integration.

SimpleLocalize: Translate

Translate texts from Figma to another language or exit existing texts directly in the Translation Editor.

Auto-translating strings from Figma

Figma: Get translations

To download translations from SimpleLocalize to Figma, go to Actions in the plugin and hit the Pull translations button.

Pulling translations from SimpleLocalize

Figma: Switch design language

After pulling translations, you can now switch your design language in Figma. Change language in the top-right corner of the plugin to show translations of your design in the selected language.

Getting texts in different languages from SimpleLocalize