Design localization with Localazy Figma plugin
Tags: figma, design, tutorial, localization
Published: 2021-12-01 16:59:09

**Did you know that you can translate your Figma designs and prototypes and reuse the translations seamlessly during development? Learn how to do it with Localazy and Figma.**

[Figma](https://www.figma.com/) is a well-known web prototyping and vector graphics editor tool used to create visual designs of your ideas. It's ideal for building design systems and prototyping web and mobile apps, which we will then help you localize. 😁

But what if you want to localize the design/prototype itself to see if it would work with other languages? That's when the **Localazy Figma plugin** comes into play, designed to help you translate your designs efficiently and quickly 💨.

## 🤓 How does it work?

![Connect your project with Figma & Localazy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68pzwwynwrf2b1bpavvj.png)

With [Figma & Localazy](https://www.figma.com/community/plugin/964257457772706017/Localazy-Plugin), you can quickly test the compatibility of your design when new languages are introduced, translate banners and other pieces of visual content. After that, download translated strings to use them in your project.

Just select what you want to import and get your content transferred to Localazy and back in a few clicks.

Figma Plugin is available for all users on the [Autopilot plan](https://localazy.com/docs/general/localazy-autopilot-tier). Learn more in the [documentation](https://localazy.com/docs/figma/plugin-introduction) or [contact us](https://localazy.com/contact) if you have any questions.

Now to the fun part. 🤭

## 🎨 How to use the Localazy Plugin for Figma

To demonstrate the uses of [Localazy's Figma Plugin](https://www.figma.com/community/plugin/964257457772706017/Localazy-Plugin), we'll set up a demo project. We'll go step by step to every detail showing you how to integrate a Figma project with Localazy from the get-go.

### Before we start

1.  Sign up for **[Figma](https://www.figma.com/);** you can use the browser version or [download a native version for Windows or macOS](https://www.figma.com/downloads/). 🖌️
2.  **[Create a free Localazy account](https://localazy.com/register)** if you don't already have one :) 🚩
3.  Activate the [**Autopilot plan**](https://localazy.com/docs/general/localazy-autopilot-tier) in the [**Marketplace**](https://localazy.com/my/marketplace) *(don't worry, there is a 7-day trial)* 🚀
4.  **Grab your favorite drink, and let's go!** 🍹

### Creating a new Figma project

Let's start by logging in to Figma and in the dashboard, click on the **New design file** card to create a new file.

![Figma Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbkui0b2dfcqszcgyryd.png)

To make this tutorial short, we will pick the **Prototyping in Figma** example project, but all the following steps will be compatible with your own personal project.

![Figma Example Prototype Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50vu4b8zwbpwxaa33ewz.png)

### Installing the plugin

Now that we have the design file set up, we must install the Localazy Figma plugin to localize the prototype. To do so, let's head to the top left corner click on the **Figma logo** ➡️ **Plugins** ➡️ **Browse Plugins in Community** and go there.

![Browse plugins in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcqr5lb6ah5h4lqzlxbx.png)
 
We must now search for _"Localazy"_ in the search bar, and the plugin will come up.

![Find the Localization plugin by Localazy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/320luemgn9gmfj57f7qz.png)

Clicking on the plugin will give you access to more information about it, but you can now click on the blue **Install** button on the right. You can browse all other plugins available for Figma - you can read plugins recommended by our designer Ondra in [this article](https://localazy.com/blog/6-super-useful-figma-plugins-product-designers-localazy).

> **Read about [our favorite Figma plugins for product designers](https://localazy.com/blog/6-super-useful-figma-plugins-product-designers-localazy)**

### Linking Figma with Localazy

We should now log in to Localazy and create a new project, just reserved to store and manage all the strings from our Figma project.

![Create a new project in Localazy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gba03rag5p338qquiyzo.png)

Heading back to the design file, let's follow the same path as before, going to the top left corner ➡️ Plugins ➡️ **Localization plugin by Localazy**.

![Open the Localazy plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zehgjaogj7lv0p7gjjc7.png)

Clicking on it will open the following window:

![Link the Figma project with your Localazy project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgoxj9zebmvbxnnmx3zs.png)
 
We now need to link our Figma project with Localazy's newly created project by authorizing access to Localazy and choosing the desired project to be linked from the dropdown.

![Authorization and Project Selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1yyro53y08c8mrkmzxx.png)

Go back to your Figma project, and you'll notice that you have **Localazy's Upload** tab open, in which you can customize the name and type of the upload file.

Note that if you do not have the **[Autopilot](https://localazy.com/docs/general/localazy-autopilot-tier)** or higher plan active, the plugin will notify you that you are not subscribed to the required plan, stopping you from proceeding.

We'll continue with default settings and click Upload to Localazy.

![Localazy Figma Plugin Upload Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tz9lq7i4urkk8kiexv0i.png)

If everything is uploaded successfully, you'll see the following:

![Upload Tab - Successful Upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n53xxsg2ti03rckwv79n.png)

We should now head to our project at Localazy and translate the strings to the language of our choice.

To do so, we click **Add Language** button. I'll choose Portuguese and Spanish. You can add whatever languages you prefer personally. 😉

![Localazy - Add Languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hbu68cfy867rsnn3kuu.png)

To start translating, simply click on the blue button referring to the language you want to translate.

For your own project, you can also order translations from our **[Continuous Localization Team](https://localazy.com/docs/general/continuous-localization-team)**, which will deliver translations pro-actively whenever you add new strings or change existing source strings.

> You can find more about how our translation services work [in the documentation](https://localazy.com/docs/general/continuous-localization-team).

![Localazy Translation Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qoqewxgc8v598q9dgq0.png)
 
If you choose to translate the texts yourself, you'll have [machine translations](https://localazy.com/dictionary/machine-translation) to help. When the translation is finished, simply click the **Save** button.

After everything you need is translated, go back to your Figma project and open the Localazy plugin again. Head to the **Download** tab and pick the **file** and the **language** you would like to see your project in. As soon as you click **Download to Figma**, you'll be able to see the translated strings.

The original file will look like this:

![Figma prototype in English](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulormh72wpeic3kaxzz4.png)
 
To demonstrate the translation, we've downloaded Spanish:

![Figma prototype translated by Localazy in Spanish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbspqy8g40i0vxwd3b9s.png)
 
If you'd like to see another language, just pick it and click the download button again. This time I'll choose Portuguese:

![Figma prototype translated by Localazy in Portuguese](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l6rd1hdp3hdi68qk2cq.png)
 
### Translating specific nodes

Localazy Figma plugin allows you to pick specific nodes and translate them to whatever language you want without affecting the rest of the project.

Simply pick the nodes from the left column of the project or click the node itself on the canvas, then select the language from Localazy's Figma plugin and download.

![One text node translated to German](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfbx19v6y7rni9qqp2gk.png)

In this particular case, we only changed the text node _"Register"_ to German.

> You can [learn more about how our Figma plugin works in the documentation](https://localazy.com/docs/figma/plugin-introduction).

### Additional settings

Besides the main features of the plugin, we have three additional options:

![Localazy Figma plugin - additional settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkkhsvapybonz1d8tllm.png)

*   **Figma File share link** - When enabled, each string will show a backlink to its Figma file `TextNode` representation. This way, every contributor working on a project will instantly have an actual context, even if you updated the design recently.
*   **Use node name as source key** - By default, Figma internal `TextNode` *id* will be used to identify a string, but by ticking this option, the source keys will then be the `TextNode` names.
*   **Upload and download the entire file** - This option allows you to switch the upload & download context according to your needs. Implicitly, context is set to a currently active page, and the context setting is applied only when nothing is selected. Then, only the selection will be uploaded/downloaded.

## ✔️ Closing words

Localization of your project just became more dynamic thanks to the ability to link your Figma project with Localazy. And, as you can see, it's incredibly easy to localize Figma projects with the Localazy Figma Plugin. We look forward to seeing our Figma plugin help you in your localization journey to success ✈️.

Did you like this tutorial? If you would like us to clarify something, please let us know in the comments below!