How to set up and use the Figma integration

Learn the steps to set up and use Smartcat for fast, high-quality translation of your Figma designs

Figma is a web-based user interface design app widely used for designing mobile app interfaces, prototyping designs, creating social media posts, and everything in between. The Smartcat plugin for Figma will instantly translate your Figma designs and individual frames into any language, allowing you to modify and test layouts in one place, without the messiness of multiple copies for every language. 

Your translations will be embedded into Figma text objects and kept intact when manipulating visuals. The Smartcat plugin is the easiest way to translate your designs, automatically or professionally. Here's how it works.

1. Installing and setting up the plugin

To install the Smartcat plugin for Figma, log in to your Smartcat account and then complete the following steps:

A. Navigate to the Smartcat Translator plugin in Figma Marketplace and click Install.


Figma_plugin_15.png
 

B. Figma adds the plugin to your account and it shows as installed.
 

C. In Figma, open any document with frames and find the Resources tab in the toolbar, go to Plugins, and select Smartcat Translator.
 

D. Click through the introductory screens. Clicking Let's get started on the last screen             redirects you to Smartcat, prompting you to copy the passcode.

E. Click Copy to clipboard, go back to Figma, and paste the passcode to complete the sign-in.

2. Using the plugin

Smartcat plugin allows two modes for you to choose from.

These are:
i. Asset Translation
ii. Software Localization

Asset Translation 
In this mode, you can easily translate any text frame either automatically, or using professional linguists. 

You can choose whether to connect to the Smartcat project or just use automatic translation inside Figma. This option would be the best for non-software localization content types: marketing materials, emails, landing pages, etc. 

Software Localization
This mode allows you to plug your UI designs into Smartcat’s software localization workflows. 

You’ll connect to one of your Smartcat Software localization projects, and will be able to specify keys right in Figma, and then send them to Smartcat for translation.

Understanding asset translation mode

In this mode, you can easily translate any text frame either automatically, or using professional linguists. In this flow, you can choose whether to connect to the Smartcat project or just use automatic translation inside Figma. 

This option would be the best for non-software localization content types: marketing materials, emails, landing pages, etc.

Understanding automated Translation

Follow these steps to start using the Smartcat plugin for automated translation.

Step 1
Select a frame or a group of frames you want to translate.

Step 2
Click Select the source language to open a list of languages, choose the language currently used in your Figma frames, and click Add.
 

Figma_plugin_18.png

Step 3
The selected language will be labeled as Source. You can choose only one source language and it will be applied to all frames in the Figma document. You cannot choose different source languages for frames in one and the same Figma document.

Figma_plugin_19.png

Step 4
Click Add language to choose the target languages that your Figma frames should be translated into. You can choose as many target languages as you need.

Step 5
The addition of target language depends on frame selection and will be applied only to the frames you’ve selected. 

You can apply various target languages to various frames in one Figma document. For example, you can translate one frame from English to Spanish and French, and another from English to Chinese and Korean.

Step 6
As soon as you add a target language, the original texts in frames will be automatically translated and replaced with their equivalents in the selected language.
 

Step 7
When multiple languages are selected, you can switch between them, verify that the translated text is correctly located inside the frame and make necessary adjustments on the fly. 

Text formatting within text objects will be preserved and stay identical across all languages wherever possible.

Step 8
The number displayed next to each destination language represents the percentage of the source text in the selected frame currently translated to this particular language. 

If several frames are selected, the percentage is shown for all of them. If the number is smaller than 100%, click on the three-dot icon for the corresponding language and select Update translations.

Steps to follow to perform human review

To enable human editing, do the following.

Step 1
Under the list of selected languages, click “Enable professional translation and review of your content by publishing this Figma file as a project in Smartcat.”

Step 2
On the next screen, click a Create project button.
 

Step 3
Smartcat will create a project automatically and send selected frames there.

Step 4
You can open the project right from Figma by clicking Open project in Smartcat.

Step 5
In the project, you will see files for translation. Each frame will be uploaded as a separate file. Learn more about Smartcat projects.

Step 6
Each file can be opened in the Editor. Here in the Preview section, you can see the preview of your frame. 

It is important to provide context to the translators and editors who will be working on translations. Learn more about Editor functionality.

 

Step 7
If you want to invite suppliers to translate these files, go to the Tasks tab and click assign. Assign suppliers from your team or choose a professional from Smartcat Marketplace. Learn more about working with suppliers at Smartcat

Step 8
To synchronize the project with Smartcat, click the Synchronization button at the bottom-right corner.

Step 9
You can track the translation progress in Figma. 

Each time you synchronize with the project, we update the translation progress so that you can check what stage each translation is at. To do so, you need to hover over the percentage icon right to the selected language.


You will see the breakdown into the workflow stages set up in the project.

Step 10
When the translation is complete on all stages for some languages, Smartcat will show a green tick to the right, to mark it as complete.                              

Step 11
To get the translations to Figma, select frames and click the Sync button in the bottom right corner.

Step 12
To send more frames for human editing to the project, select them in Figma and click the Sync button in the bottom right corner.

Step 13
Please note that the frame selection influences your actions. 

If you have only two frames selected while you set up some target language or synchronize with the project, this action will be applied to these two selected frames.

Can I manually edit the translations right in Figma?

Yes, but these edits won’t be passed to Smartcat. You will have them in Figma only. If you want to edit translations manually in Figma, we advise enabling the Show text object properties option in the menu.

After that, choose a frame and switch to the target language that you want to edit and adjust the translations. At the bottom, you will see that the option, “Lock this translation”, has been enabled automatically.

When it is enabled, Smartcat won’t touch this text block and won’t overwrite it with automatic translations or human-edited translations from the project when you synchronize. 

But if you want to apply automatic translation back or push translations from Smartcat there, you’ll need to untick this option and launch synchronization.

Software Localization mode

This mode allows you to plug your UI designs into Smartcat’s software localization workflows. You’ll be connecting to one of your Smartcat Software localization projects, and will be able to specify keys right in Figma, and then send them to Smartcat for translation.

Setting up the project

  1. Select a software localization project you want to connect the Figma file to. Or create a new one, if you do not have any. Learn more about Software localization projects and how to set them up.
  2. When selected, click Set up keys.

Setting up the keys

Now you can start setting up the keys for the text objects in Figma.

Step 1
Select a frame or a group of frames you want to work with.

Step 2
In the plugin, you will see the list of text objects we identified in these frames with a field where you can assign a key for each of them.
 

Step 3
To add a key, click the Add key right to the text for translation and type the value into the field.
 

Step 4
You can also generate the keys automatically by clicking the Generate keys button on the bottom left. The system will generate the keys based on the text value.

Step 5
If you don't want some text to be sent to Smartcat for translation, you can either leave the key field empty or hide it from the list by clicking the eye icon to the right.

Step 6
You can always bring it back by going to the Hidden tab and unhiding the text object you need.

Setting up labels

In addition to keys, you can also add labels to your text objects. 

To add, choose a text field in the plugin, click on it, and type the value into the Enter label field. You can specify as many labels as you need.


Labels can be used for filtering the keys in the Smartcat project and during the export — for example, you can mark keys in screens for iOS apps with an “iOS” label, and then developers will be able to use this label as a filter when exporting strings from Smartcat project to iOS repository.

Group actions

You can apply key prefixes and labels to all text fields in the selected frames at once. 

To do so, select the frame(s) you want to apply these changes to, open the General tab in the plugin, and type the prefix in the Prefix field. Add labels to the Labels field.

This prefix and labels will be applied to all keys in the selection. They’ll be colored purple so that you can easily see them.

Sending content to Smartcat

 

Follow these steps to send content for translation to Smartcat.

Step 1
When ready to send keys for translation to Smartcat, click Send to Smartcat in the bottom-right corner.  
 

Step 2
Integration might identify some conflicts with information already stored in Smartcat – for instance, if there are keys with different values in Smartcat and Figma. 

In this case, you will see the conflict resolution field where you will be able to choose which value to preserve. If you choose Smartcat, then the value that is stored in Smartcat will be saved. Otherwise, we will replace it with the new value from Figma.   
                                                    


Step 3
If sending is completed successfully, you will see a confirmation screen with information on the keys that have been sent: 

Getting translations from Smartcat

To transfer translations from Smartcat to Figma, click the Download button in the bottom-right corner.

Handling key conflicts

When setting up keys, you may face a situation when two or more keys are conflicting. 

It might happen when one and the same key is specified for two different texts. If it happens, you will see these strings highlighted in purple in the list of keys, and the active Errors tab.

To resolve the conflict, you need to either change the key for one of the text objects. 

Or choose one text value to be applied to the keys.

Did this article help you understand how to use the Smartcat integration for Figma? If not or if you have further questions, please contact us via support@smartcat.com. Our support team will be happy to help you!

Also, if you are a software developer, we have a dedicated software developer page for more information.

 

Did this article help you find the answer you were looking for? If not or if you have further questions, please contact our support team.

Was this article helpful?

Do you need a human-assisted guidance? 🙌

Request a demo