Localize Designs in Figma: A Complete Guide to Using the Crowdin Plugin for Design-Stage Localization

As we’ve already discussed in our previous post, localizing at the design stage is crucial for companies working for a global audience. In many industries like SaaS, e-commerce, and mobile app development, products frequently need updates. Design-stage localization helps prevent design issues caused by varying text lengths and different language structures. With Crowdin for Figma, automated synchronization between the designers, developers and translators means faster time to market, as well as fewer bugs. Teams can ensure that translations are accurate and fit within the localized design.

Want to try it out for yourself? Let’s take a look at how everything works. We’re not yet diving into the technical details – you’ll find them here. For now, let’s give you a high-level overview.

How Does Crowdin for Figma Work?

At its core, Crowdin Figma translation plugin allows design teams to integrate localization into their workflows without any unnecessary clicks. The plugin connects your design files in Figma to your Crowdin project, enabling easy synchronization of text elements, translations, and context. Here’s a simplified breakdown of how it works:

Text export to Crowdin:

The plugin enables designers to select specific frames, components, or groups in their Figma files and push text elements directly to Crowdin. Alongside the text, screenshots are automatically sent (if you enable the Send Screenshots option), providing additional context for linguists. The plugin also uses a key naming pattern to generate keys for strings, ensuring consistent and efficient localization workflows.

Text integration from Crowdin:

While not the primary use case, the plugin also allows for the integration of Crowdin strings into Figma designs. Designers can pull real text, including translations, into their files instead of working with placeholders. This feature ensures that any updates made in Crowdin are automatically reflected in Figma, making it easier to preview localized designs.

Localization with context:

Translators receive more than just text strings — they see the full context of how the text will appear in the design (e.g., button labels, and headers). This reduces errors and ensures that translations fit naturally into the design. It’s vital as different languages take up different spaces. 

Improved development process:

The tool facilitates smooth communication between designers, developers, and translators. Developers (with the write access to the document) can also use the plugin to send text directly to Crowdin without needing to revert to designers,

Real-time updates:

Figma content translation with Crowdin automatically syncs any changes in text or translations back to the design files with a few clicks only. This ensures that all team members, from designers to developers, work with the latest localized content without manual updates.

Testing translations in previews:

Designers can preview how translated versions will look in their mockups. This helps catch any potential layout or formatting issues before the development phase, ensuring a smooth user experience across languages.

How to Get Started with Crowdin for Figma

Starting with Crowdin for Figma is easy and doesn’t require a complex setup. Here’s a general overview of how to get up and running:

Install the plugin:

• Here’s a direct link you can use. Alternatively, you can search for Crowdin manually.

• If you use the web version of Figma, go to “Explore Community” and type Crowdin for Figma into the search bar. 

• In Figma’s Desktop version, navigate to the plugin management section (Plugins > Manage Plugins) and search for “Crowdin for Figma” there.

• Install the plugin and run it from the Figma interface.

Connect to your Crowdin project:

• After installation, you’ll need to configure your credentials to connect Figma with your Crowdin account. Use your Crowdin Personal Access Token to authenticate and link the two platforms. To get it, you have to go to Account Settings > API, Personal Access Tokens section, and click New Token. (You’ll need to select scopes like projects, sources, translations and screenshots).

• Select the Crowdin project you want to work with from the available list. Based on your project needs, you can choose specific content types: either UI Localization or Marketing Visuals Localization.

• Choose UI Localization when you need to localize dynamic elements within a product’s user interface, such as buttons, error messages, and form labels. UI localization ensures that text strings remain contextually accurate across different languages.

• Choose Marketing Visuals Localization If your project focuses on translating static images and marketing materials like brochures, banners, or social media visuals.

After you save your choice, your next steps can differ a little. Here is a guide for UI localization. Click here to learn how to set up Marketing Visuals Localization. 

Add text strings from Figma to Crowdin:

Preview translations:

With the Crowdin plugin, you can preview translations in Figma to see how localized content will appear in various languages. This step ensures that the design elements remain functional and aesthetically pleasing, regardless of the language.

• In the Strings > Preview Strings section, select Preview in duplicated page or Preview on the current page.

• Select Create with language.

• Select the target language you want to preview translations for (optionally, you can select the preferred plural forms). You can also choose All languages.

• Choose the content you want to preview in Figma. Select All Frames or Selected Frames.

Upload screenshots for context:

To improve their localization with Figma, designers can upload tagged screenshots to Crowdin, providing translators with visual references. This added context helps reduce misunderstandings during translation and ensures better localization outcomes.

To do that, in the Strings tab, click the icon to upload screenshots for selected frames.

Or simply choose to Send Screenshots while pushing strings from Figma to Crowdin.

Synchronize text across teams:

Whether it’s the design or development team adding new strings, Crowdin for Figma keeps everything in sync. Developers can link new text directly to Crowdin without having to involve designers at every step.

You can filter strings using different criteria. 

• Select the needed text fields.

• In the Strings tab, click Filter strings.

• Select Show strings linked to selected text elements.

Check out our documentation for the full step-by-step guide and instructions for working with Marketing Visuals Localization.

Whatever your needs, if you’re looking for tools to ensure smooth Figma multi-language support, look no further. Install Crowdin plugin for Figma to see how it can transform your workflow.