Connect Figma with Smartcat

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.

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

1. Navigate to the Smartcat Translator plugin in Figma Marketplace and click Open in.

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

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

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

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

Smartcat plugin allows two modes for you to choose from.

These are:

1. Asset Translation

2. 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.

You can easily control which parts of your design gets translated and what remains untranslated directly from your Figma frames without having to leave the design platform. As such you can preserve specific elements in the source language, such as brand names, CTAs, or special terms.

Click through the interactive demo or read through the how-to steps below:

Before you can start excluding elements from translation, ensure that you have the Smartcat integration enabled within your Figma workspace. If you haven't already done so, navigate to the Figma Community and install the Smartcat plugin.

Once the Smartcat plugin is installed and enabled, open your Figma file containing the design elements you wish to exclude from translation.

Select layers that you want to exclude from translation, such as brand names, CTAs, or specialized terms, that you want to preserve in the source language.

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.

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.

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.

To enable human editing, do the following.

Step 1

Under the list of selected languages, click “Create Smartcat project”.

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. 

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.

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.

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 changes 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.

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.

Live Preview: Custom Fonts support

In the case when custom fonts are used for Figma board, to be able to use them in live preview, user is required to upload "custom font" to our server. If the font is not uploaded, we won't be able to show Live Preview precisely, and default font will be used.

There are two entry points for upload of Fonts:

• In Smartcat Editor:

In the Workspace settings:

1. Only users who have access to Workspace settings can upload the fonts. Reviewers (whehter from Smartcat Marketplace or yoru team) will only see the notification that indicates the requirement to upload the fonts.

2. Currently, we support only TTF and OTF font formats. Woff2 format will be added soon.

3. Once font is uploaded, it will be used in any project that exists in workspace, and any user will be able to see the Live Preview with correct fonts (even if the user doesn't have the font installed in his system).

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.

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.

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.

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.

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

To do that, 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.

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:

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

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.