Figma Plugin

Crowdin and Figma integration works both ways, and the plugin has two modes – Page Translation and Crowdin Strings.

Use the Page Translation mode to localize static pages, like brochures and banners. In this mode, you’ll be able to send texts with the context for translators to Crowdin, and upload translated copies back to Figma.

Switch to the Crowdin Strings mode when localizing UI and working on dynamic pages along with your development and marketing teams. In this mode, you can upload to Figma the source strings from Crowdin and add them to your designs in a click. After the texts are used in the designs, you can automatically upload tagged screenshots for translators’ reference back to Crowdin.

Use Cases

With Crowdin plugin for Figma, you can:

• Quickly generate multi-language creative assets.
• Translate mockups and test them in different languages before the programming starts.
• Add to your prototypes real texts uploaded to the Crowdin project by other teams and stop using ‘Lorem Ipsum’ in the mockups.
• Upload tagged screenshots to your Crowdin project.

Installing Crowdin for Figma Plugin

1. Sign in to Figma.
2. Select Plugins > Manage plugins… in the File Browser.
3. Click Browse all plugins.
4. Use the Search field to find Crowdin for Figma plugin.
5. Click Install next to the plugin.

Connecting Figma with Crowdin Enterprise Account

To start sending translations to Crowdin and uploading them back to Figma, follow these steps:

1. In Figma File Browser, go to Plugins > Crowdin.
2. Provide your Personal Access Token.
3. Specify your organization domain name and click Next.

To generate a new token in Crowdin Enterprise, follow these steps:

• Go to Account Settings, Access Tokens tab and click New token.
• Specify Token Name, choose Scopes and click Create.

Sending Designs for Translation in Crowdin

You can send either text from a selected page or all pages from a Figma file for translation.

In Crowdin, a root folder figma-plugin will be created. It will contain separate folders for each page you translate with the HTML files for each frame inside. This folder can also contain a free-text.html file with the texts from the page that are not included in any of the frames.

To send Figma designs for translation, follow these steps:

1. Open the necessary Figma file.
2. Go to Plugins > Crowdin.
3. In the Page Translation mode, Figma to Crowdin section, select content you’d like to upload to Crowdin. Choose All pages or Current page.

When the source files are uploaded to the Crowdin project, you can invite contributors to translate and proofread the texts. Learn how you can get content translated in Crowdin.

Uploading Translations Back to Figma

You can synchronize texts between Figma and Crowdin projects any time you want to test the translated copy inside Figma.

To upload translated copies to Figma:

1. Open the necessary Figma file.
2. Go to Plugins > Crowdin.
3. In the Page Translation mode, Crowdin to Figma section, select the target language you want to upload translations for. You can also choose All languages.
4. Choose the content you want to preview in Figma. Select All pages or Current page.
   Note: Frame names in Figma can consist of only letters (a-z, A-Z), numbers (0-9), and special characters - _ .

   

After you’ve uploaded translations to Figma, the modified file will contain a separate page with translations for each target language. The newly uploaded translated versions won’t override the ones you uploaded previously. You can always delete the translated copies you no longer need.

Adding Source Strings from Crowdin

1. Open the Crowdin plugin.
2. Switch to the Crowdin Strings mode.
3. Use the Search field to find the specific copy.
4. Select the text layer you want to add text to and click on the necessary string.

Uploading Tagged Screenshots to Crowdin

1. Open the Crowdin plugin.
2. Switch to the Crowdin Strings mode.
3. Use texts from the Crowdin project in your designs. Click to upload screenshots of the frames that include the used texts.
4. To update screenshots on Crowdin, click again.

To learn more, read the article Screenshots.