Figma

Figma is a web-based graphics editing and 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 pages and individual frames into any language, allowing you to modify and test layouts in one place, without the messiness of endless copies for every language.

Your translations will be embedded into Figma text objects and kept intact when manipulating visuals. Text formatting within text objects will be preserved and stay identical across all languages wherever possible. 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:

  1. Navigate to https://www.figma.com/community/plugin/1055486946344563829/Smartcat-Translator and click Install.

    Figma_plugin_15.png
  2. Figma adds the plugin to your account and the plugin shows as installed.
  3. In Figma, right-click the canvas or board, hover over Plugins and select Smartcat Translator.

    Figma_plugin_16.png
  4. Click through the introductory screens. Clicking Let's get started in the last screen redirects you to Smartcat, prompting you to copy the passcode.
    Figma_plugin_17.png
  5. Click Copy to clipboard, go back to Figma and paste the passcode to complete the sign-in.
    Figma_plugin_05.png

2. Automated translation mode

To start using the Smartcat plugin for automated translation proceed as follows:

  1. 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
  2. The selected language will be labeled as Source. Click Add language and choose destination languages that your Figma frames should be translated to.
    Figma_plugin_19.png
  3. As soon as you select a destination language, the original texts in frames will be automatically translated and replaced with their equivalents in the selected language.
    Figma_plugin_20.png
  4. 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.
  5. To keep track of the styles applied to various text objects in your frames, in the Smartcat plugin window click the three-lines icon in the top-right corner and enable Show text object properties
    Figma_plugin_21.png
    If this option is enabled, the currently selected text objects and its styles will appear at the bottom of the Smartcat plugin window.
    Figma_plugin_22.png
  6. 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 no frame is selected, the number represents the percentage for the entire file.
    If the number is smaller than 100%, click on the three-dot icon for the corresponding language and select Update translations
    Figma_plugin_23.png
    If the translation update involves the use of Smartwords, the number of Smartwords that will be written off your balance is indicated next to the option name.
  7. If the automated translation needs to be improved, select the corresponding text object and edit it in the Smartcat plugin window. The option This translation is edited manually will become selected, instructing Smartcat to preserve your edits to make sure that they are not overwritten by the automatic translation. 
    Figma_plugin_24.png
Was this article helpful?

Do you need a human-assisted guidance? 🙌

Request a demo