Skip to main content

Smartling Figma Design Plugin: Best Practices & Tips

This guide outlines best practices for using the Smartling Figma plugin to request translations. These recommendations are suggestions that may not fully align with your team's current use of Figma or Smartling's Figma plugin. Use these best practices as guidance and adapt them as needed for your organization.

Recommended plugin settings

There is no single set of recommended settings. The settings listed below and shown in the screenshot represent the most common configuration. Which settings you enable is highly dependent on the structure of your designs and your desired outcomes. We recommend reviewing the full list of settings to determine which are appropriate for your translation work.

  • Exclude irrelevant strings: ON

  • Remove all formatting before submission: OFF
    Note: enabling this may impact the format and delivery of translated designs.

  • Remove all invisible text nodes: ON

  • Create visual context images from top-level frames, sections, and slices instead of the whole page: ON. See Visual Context for more information.

  • Use short variant keys: OFF

Best practices

Keep the Figma prototype used for translation organized

Figma is a collaborative tool, and prototypes are often continuously updated by multiple team members. However, these working files are not always ideal for translation, as they may be very large and contain many pages, frames, or layers that are not meant to be translated. Whenever possible, create a clean, consolidated version of the file that only includes the content you want translated.

Keep each job small whenever possible

If possible, submit a translation request per page, especially when a page contains a large amount of content to translate. While the plugin allows you to request translation for multiple pages at once, it can negatively impact plugin performance and make managing translations more difficult.

Group frames within sections to avoid exceeding visual context size limits

If you enable Create visual context images from top-level frames, sections, and slices instead of the whole page, a section or slice's context image reflects everything nested inside it. On a page where a lot of content is grouped into one section, that image can exceed Smartling's context image limits (20MB total size and 50 megapixels total area), even when the individual frames inside the section wouldn't on their own.

If you run into this, also enable Export context images frame only. Instead of generating one image for the oversized section, Smartling looks inside it and submits the individual frames as context images instead, so linguists still get visual context for that content rather than none at all.

Images larger than 16,000 pixels are automatically scaled down before these limits are checked. If a page, section, or frame is still excluded afterward, you'll need to resize it manually and upload it through the Smartling dashboard.

See Visual Context in the plugin setup article for full details on how context images are generated and their limits.

Prepare Figma content for translation

Review the section Prepare Figma content for translation. A few topics from that section are worth highlighting here:

Hard return vs. soft return

While it's not visible within Figma, using a "hard return" vs. a "soft return" has a significant impact on how a string gets segmented and later translated.

If a hard return (pressing the "Enter" key) is used within a text layer, Smartling splits the text into separate strings at each break. Here's an example of how using a hard return created segmented strings that are not suitable for translation ("Learn the basics of Figma" should be one string):

hard-return.png


​
If you want to insert a line break but keep the string as one string, use a soft return (Shift + Enter) instead of a hard return. Here's an example of how a soft return was used correctly:

soft-return.png

Create placeholders for strings with embedded icons or images

When strings include icons or images, it's best to use placeholder text. This creates cleaner source strings and improves translation quality.

For example, the selected string "Select the Frame Tool…" includes an icon as part of the text:

try-it-out.png


In the Smartling CAT Tool, this string appears with extra whitespace where the icon is located. While human linguists may understand the intent, AI or MT services will not.

cat-tool-view.png


To avoid this, edit the Figma text layer to include a placeholder. In this example, the string would look like: "Select the Frame Tool {icon} and click and drag along the dotted line to create a new frame." This approach not only creates a cleaner source string but also makes it easier to place the icon in the correct position in the translated version.

How to bulk-exclude strings from translation

You can bulk-exclude strings by selecting multiple text layers (Shift + left-click) and then using the "Ignore strings" menu.

select-multiple-layers.png

If you have multiple text layers with the same name and it's difficult to confirm whether you excluded the correct one, click on the actual node in the "Already ignored nodes" selection. This will highlight the exact text layer in your Figma file, ensuring you are working with the right one.

already-ignored-nodes.png

Known limitations and common issues

String order does not match the Figma page layout

Because the plugin is built on top of Figma, it relies on how Figma organizes and stores text data. In Figma, the order of text layers does not always match how text appears in the frame, and the plugin reads and exports text data in that same order. As a result, strings may appear shuffled in the Smartling CAT Tool view. This is a known limitation caused by how Figma itself orders text layers, not by the plugin.

Strings are not getting picked up for translation

First, check whether the text layers are locked. If they are, verify whether the Exclude locked layers from translation setting is enabled in the Smartling Account section, as this will prevent their content from being sent for translation.

locked-hidden layer.png

Another common scenario is when the text layer is not "live," meaning there is no actual text data to extract. This can happen in two cases: when the text is part of an embedded image (see Example A), or when the text layer itself has been flattened (see Example B).

Example A: The text is part of an embedded image. In this case, all visible text (e.g., "Bring Forward," "Bring to Front," etc.) is baked into the image.

Example A.png

Example B: The text layer has been flattened. As with other design tools, you can convert a live text layer into a shape by using "Flatten" from the menu. Note how the "T" icon next to the live text layer changes when you flatten it.

Before

before.png

After

after.png
Did this answer your question?