Lilt + Figma plugin enables companies to select one or many Figma frames to send to Lilt for seamless localization. At a high-level, Lilt's Figma plugin handles:

  • Submission via Figma: Select one or many Figma frames to send to Lilt for localization.
  • Translation Method: At submission, the user can select between one of two workflows:
    1. Instant Translation: The user can request Figma frames to be immediately localized into any language using Machine Translation (MT).
    2. Verified Translation: Send Figma frames to Lilt's in-house translators for localization.
  • Deliver to Figma: Lilt to deliver localized frames to Figma, creating one page per target language.

Check out the video below to see the Lilt + Figma connector in action.

Configuration

  1. Install the Lilt plugin from the Figma Community:
    • In Figma, navigate to Plugins > Browse plugins in Community.
    • Search for Lilt and select Install.
  2. Configure the Lilt Figma plugin:
    • In Figma, launch the Lilt plugin and navigate to Settings.
    • Enter the following information:
      • Lilt API Key: add your Lilt API key
      • Lilt API URL: https://lilt.com/2
    • Click Save settings to conclude the configuration process.

Workflow

Once the plugin is configured, content can be sent between Lilt and Figma as outlined in the sections below.

Project creation

1. Navigate to the Figma page containing the content you want to localize.

2. Create a duplicate of the page for each desired target language. It is recommended to rename the duplicate pages to indicate the target language. This will help avoid confusion when localizing content at scale. Follow the steps below for each duplicated page.

3. Navigate to the duplicate page and launch the Lilt Figma plugin from the menu bar by selecting Plugins > Lilt Figma Plugin.

4. Select one or many Figma frames or layers that you want to localize. By default, if no frames or layers are selected, the Lilt plugin will localize the entire page.

5. In the Lilt Figma plugin, select the desired Translation method:

  • Instant translation: To immediately localize the selected content using Lilt's Machine Translation (MT), ensure that Instant translation is selected in the Translate tab.
  • Verified translation: To send the selected content to Lilt's in-house translators for localization, ensure that Verified translation is selected in the Translate tab.

6. In the Lilt Figma plugin, specify the Source language and Target language. Optionally, specify the Memory name of the Lilt Memory you want to utilize for localization. If no Lilt Memory is specified, Lilt will fall back to the default memory for the specified language pair.

7. In the Lilt Figma plugin, click Translate selected to send the selected content to Lilt for localization.

Project completion

The status of the translation job can be tracked in the Status section of the Lilt plugin, with new translation jobs will show as the first results.

Once the content for a job has been translated (either through instant MT translation or by Lilt's in-house translators), the job's status will change from In Progress to Complete. To import the translated content:

  1. Navigate to the Figma page that was used to create the translation job.
  2. On the Status tab, click import to update the Figma page with the localized content.

Lilt Figma plugin limitations

  • Layers containing multiple typefaces cannot be localized.
  • The Status tab only displays the status of the latest 30 projects created through Figma.
  • When translated text is delivered from Lilt to Figma, Figma uses the source font to display the translated text. The source font may not support all characters in the target language, in which case, the delivered content will not accurately reflect the translated content. To fix this, simply change the page font to a font that fully supports the target language. This can be done either before or after the localized content is imported into Figma.