Translating with the Smartling Figma Plugin

The Figma plugin allows you to send Figma content to Smartling for translation in a Job. 

Using the Figma plugin will also provide automatic Visual Context for linguists in the CAT Tool. The default is to submit visual context of the whole page, however only images up to 50M pixels, or 25 MB on the entire page are visible in the CAT Tool. If your source file contains images, it is recommended that they are of a reduced resolution size, as larger images can cause performance issues. For more information, read the Figma documentation. Alternatively, you can choose to submit images as frames, which provide full visual context with no limitations.

You can monitor the progress of the Job in Figma, or in Smartling. Once the translation of the file is complete for a language, you can create a translated version of the file in Figma, by using the plugin to apply the translations.

This article guides you through the steps of sending content for translation and retrieving translations in Figma.

Important Prerequisites 

1. The Smartling plugin only works on the Figma desktop app
2. Any design changes made to a file after it has been submitted to Smartling for translation, will not be present in the translated file
   • For example, if you submit a file for translation and then change an element, such as a font, this change will not be visible in the translated file you will receive from Smartling
3. Ensure all components with copy for translation are not read only in Figma as the plugin can not apply translations to read only components. See Figma documentation for more information on components. 

Log into Smartling via Figma

1. Launch Figma 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
   
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 create visual context by frames instead of whole page (recommended)
   • Enabling this setting automatically sends text frames as visual context
   • Text nodes outside of frames will be sent for translation, but will not have visual context in the CAT Tool
   • Enabling this setting is recommended to ensure linguists have visual context to translate large files, as this removed the 50M / 25MG image limitation
   • We recommend grouping text and images by frames in Figma before submitting file for translation
   • Frames within frames are not submitted to Smartling
   • Sections or slices are not yet supported
8. Choose to exclude irrelevant strings
   • Enabling this setting prevents any string that does not contain words from being submitted for translation
   • E.g. strings with just characters, emoji's and numbers are not sent for translation
9. Choose to remove all formatting before submission:
   • Enabling this setting removes any HTML markup from the submitted file, so linguists only see text for translation
   • This also removes the markup from the translated version
10. Choose to remove invisible text nodes:
    • Enabling this setting will ensure only visible text nodes are sent for translation
    • If the file has invisible text nodes (hidden) that you do not want translated, enabling this setting removes them from the submitted file
    • The hidden text nodes are also removed from the translated version of the file
11. Click Save
12. Once the confirmation flag appears, you can click X to close out the window
    
    

 

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 the 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 Figma 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
   • It is recommended to wait until all components have loaded successfully into the Figma file before proceeding with translation
   • If your source file contains images, it is recommended that they are of a reduced resolution size, as larger images can cause performance issues. For more information, read the Figma documentation
3. Click Plugins > Smartling > Submit Translation from the Figma menu. 
4. Select the page you want to submit for translation > Next
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.
     
     
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 placeholders
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)
       
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.
• To edit the key, click the pencil icon. Click the tick to save.

 

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.

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

The CAT Tool

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

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