Figma Plugin

Translating with the Smartling Figma Plugin

In Smartling, translation works through jobs, with which you can group and prioritize content for translation, as well as monitor progress.

Using the Figma plugin will also provide automatic Visual Context for linguists in the CAT Tool for images up to 50M pixels.

Although the Smartling Figma plugin is visible in the Figma browser, it is currently only accessible via the Figma Desktop app.

In this article, we will explore how to;

Log into Smartling via Figma

  1. Launch Photoshop Desktop App
  2. Open a new or existing Figma file.
  3. In the Figma menu (top left), click Plugins > Smartling. Here you'll notice all the translation features available.
  4. Select the Smartling Account option
    Screenshot_2021-10-21_at_12.51.48.png
  5. The Smartling Account section will open a browser to prompt you to authenticate with Smartling.
    • On the browser, sign in with your Smartling credentials
  6. Select the Smartling project you want to submit Figma content to for translation
  7. Choose to exclude irrelevant strings
    • Enable this setting to exclude strings that are just numbers, symbols or other sequences that don't require translation.
    • Unselect this checkbox to include this content for translation.
  8. Click Save
  9. Once the confirmation flag appears, you can click X to close out the window

Screenshot_2021-03-05_at_14.40.34.png

Preparing Figma Content for Translation in Smartling

Although, there is very little to no file prep. required before submitting Figma content for translation in Smartling, it might be worthwhile checking that all strings (layers containing text), are as they should be.

All text is ingested for translation. However, if you would like to placeholderize content, (meaning make a word or string not translatable), you can simply apply curly brackets, i.e. {} or {{}}, around to word or string, then select the placeholder checkbox when you submit the content for translation (step 8).

If you use curly brackets for another purpose, and would like the content in the brackets translated, ensure to update them to another type of bracket before submitting the content for translation.

Submit Photoshop Content for Translation in Smartling

To submit your Figma content into a Smartling job:

  1. Launch Figma Desktop App
  2. Open a new or existing Figma prototype file.
    • This is the source file that the Smartling plugin will convert into a JSON file for translation
    • You must have the file open in Figma to take any action on it via the Smartling plugin
    • All Smartling Plugin options can be found under the Plugins menu at the top navigation
  3. Click Plugins > Smartling > Submit Translation from the Figma menu. 
  4. Select the page you want to submit for translation > NextScreenshot_2020-11-20_at_14.08.56.png
  5. Using the checkbox on the left, select the string(s) you want to submit for translation
    • You can unselect content that does not need a translation.
    • This is especially useful when you don't want to translate elements of the mobile OS, such as the clock or battery level.

      mceclip0.png
  6. To view the string key/variant, click the downward arrow on any of the strings.
  7. Click the pencil icon edit the key name.
  8. Choose to turn any text inside {} and {{}} into non-translatable placeholdersScreenshot_2020-11-20_at_14.32.49.png
  9. Once you've identified the frames/strings that you'd like to translate, click Next to proceed.
  10. Complete the Submit Translation dialog.
    1. Choose to add the content to an existing Job and choose the existing Job from the dropdown, or choose to create a new Job and name the new Job
    2. Give the Job a deadline.
      • This defaults to one day in advance from the current day, but you can update this to sometime in the future of the same day.
    3. You can give the linguists additional details on how you want the Job translated by providing a description
    4. Choose to pre-authorize the Job, meaning once you complete these steps, the Job will automatically authorize and proceed with the translation in the target language's default workflow.
      • If you choose not to select this checkbox, the Job will sit in Awaiting Authorization in Smartling until a user Authorizes the Job for translation. This option allows the user to decide the workflow in which the language should be translated in, as well as view a cost estimate before commencing translation.
    5. Select the target languages for the translation (required)
      mceclip2.png
  11. Click Submit to submit the content to Smartling for translation
  12. Once complete, the Translation Submitted dialog will appear with the Job summary.
    • Click the hyperlinked Job name to open the Job in Smartling on your browser.
  13. Close to continue working in Figma.

Editing Key Identifiers

A key is a unique identifier for a string. By default, Figma provides a unique identifier, which you can also view in Smartling. You can now edit the key name to give it more relevance for you. The key can contain letters and numbers, underscores, and hyphens but cannot contain spaces.  Note, key names must be unique per string. Key names cannot be repeated.

  • Click the downward arrow to reveal the assets and keys.Screenshot_2020-11-20_at_14.14.31.png
  • To edit the key, click the pencil icon. Click the tick to save.Screenshot_2020-11-20_at_14.14.48.png

 

Working with Key Identifiers

A key uniquely identifies the string, meaning the key can be used to quickly find a string in Smartling or in the JSON file.

Strings View

  • In Smartling, you can find the key name under the File/URL column in the Strings View.

Screenshot_2020-12-17_at_19.53.56.png

  • Search for strings with a specific key identifier using the Key/Variant field
  • Note that the Key/Variant search box does not support spaces. If your key name has spaces in Figma, it will not return a result when searching in Smartling. It's best to use underscores (_) to separate words in key names.

Screenshot_2020-12-17_at_19.53.18.png

The CAT Tool

Users working in the CAT Tool can view the string key under Additional Details on the top-right panel, beside Variant.

Screenshot_2020-12-17_at_19.54.34.png

Editing the key name will not remove the default Figma key identifier from the string, but rather add to it, so you can search for the string easily in Smartling or on the JSON file.

Note that the edited key name is also visible in the source and translated JSON file that you can download from the files tab within the Job Details page in Smartling, however, the original key names (not the edited key names) are found in the exported JSON via the Smartling Plugin action Export (Manual).

Re-uploading Content

When submitting individual frames of the same page that has been previously submitted to Smartling within Figma, the previous frame will be removed from its original Job. This is due to the file/page being unique, and so this is treated as a file overwrite. This results in the previous content being removed.

Retrieve Translations from Smartling

Once your translations are complete in Smartling, you can send translations directly to your Figma app by Applying Translations via the Translation Status model. Alternatively, a Smartling user can download the translated files from Smartling and manually import them into Figma. 

Import Translations From File

To import translated JSON files into Figma:

  1. Click on Plugins > Smarting > Import (Manual) from the Figma Menu.
  2. Select your translated JSON file from your directory.
  3. Click Open to import or Cancel to exit menu.

Export Content to File

You can export a JSON file of your Figma page. One Figma page can be exported at a time. If your design has multiple pages, you will need to export each page individually.

  1. To export content, click on Plugins > Smarting > Export (Manual)
  2. Select the Page you want to Export. You can select multiple Pages to download.
  3. Select the strings you want to include in the exported file. Click the downward arrow on each string to expand to view sub-strings.
  4. Click Export
  5. A zip file will download to your local drive, containing a PNG and a JSON of each of your Figma pages

Was this article helpful?