Figma Plugin Installation and Setup

Please note that this plugin is a paid product. For pricing information, please reach out to your Smartling Customer Success Manager.

Within Figma, you can send and receive translations performed within Smartling. The integration is intended to allow organizations to start translation earlier in the Software Development process. Rather than waiting for development to complete before your application is localized, you can now perform automated translations before development begins.

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. Alternatively, you can choose to submit images as frames, which provide full visual context with no limitations.

The Smartling Figma plugin can be used in the browser or the Figma desktop app.

Prerequisites and Limitations

1. Access to Smartling as an Account Owner, Project Manager, or Requester
   • This means having an activated user account (i.e. you have signed in to Smartling successfully)
2. Some cybersecurity software programs, such as ZScaler and InfoBlox, may block your access to the plugin. Disabling these programs will allow you to log in to Smartling and choose a project via the plugin.
3. If you use an organization or enterprise Figma plan, organization admins can restrict access to 3rd party plugins, requiring approval before they can be used. When enabled, members can only use plugins and widgets that have been approved by an organization admin. Ensure the Smartling plugin is approved by an Admin on your Figma account.
4. Images must be under 50M pixels or 25 MB. 

Download Figma Desktop App

Refer to the Figma documentation for the latest guide to the Figma app. Alternatively, you can access Figma directly in your browser. 

Create a Figma Project in Smartling

• Log into Smartling with an Account Owner user role.
• Create a new Project by following these instructions.
  • Select the Project Type "Connector".
  • Select Figma as your connecting platform.
• Confirm the Project creation by clicking "Create Project".
• Before proceeding, please ensure that all default workflows, vendor assignments and Linguistic Assets are set up correctly for this new Project.

Save the Smartling Figma Plugin

These instructions pertain to the Figma 2024 UI (Figma UI3). If you are using an earlier version of Figma, you may see a slightly different interface. Please consult the Figma documentation for more info on using plugins.

In Figma, you can "Save" plugins to add them to your Figma account. To save the Smartling plugin: 

1. Open the Figma desktop app or launch Figma in your browser
2. Go to the Smartling Figma plugin page 
3. Click the bookmark icon to Save the plugin to your account

You can also Save the Smartling plugin directly from within Figma designer via the Actions menu.

1. Click the Actions menu icon.
   
2. Go to Plugins & widgets and search for "Smartling" 
3. Click on the Smartling plugin to open the plugin page
4. Click Save

Tip: Watch this Figma tutorial on how to save and remove Figma plugins.

Note: The plugin license fee is added on to your Smartling license. No payment is taken through the installation flow of the plugin. For more information on "Third-party payment", read the Figma documentation.

Connect the Figma Plugin to Smartling

1. Open a new or existing Figma file.
2. In the Figma menu (top left), click Plugins > Smartling. Here you'll notice all the translation features available.
   
   
3. Select the Smartling Account option
4. The Smartling Account section will open a browser to prompt you to authenticate with Smartling.
   • On the browser, sign in with your Smartling credentials
5. Select the Smartling project you want to submit Figma content to for translation
6. Choose to exclude irrelevant strings
   • Enabling this setting prevents any string that contains only numbers, special characters or emojis from being submitted for translation
7. 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
8. 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
9. 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 not be sent for translation
   • 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
10. Choose to use short variants keys
    • Enabling this setting means the names of the text nodes will be used as keys in Smartling 
    • If you enable this setting, please ensure your text nodes are named according to how you want the keys to appear. The plugin cannot ensure the uniqueness of keys when this setting is enabled.
    • If this option is disabled, the plugin will use the entire node path, incorporating node IDs, as the key. This method guarantees unique keys.
11. Click Save
12. Once the confirmation flag appears, you can click X to close out the window

Now you're ready to start translating with the Smartling Figma plugin.