Frontitude’s Figma plugin allows you to pull your translations into your Figma designs to ensure that your designs can hold up any language neatly. Using this powerful feature early in the process can save a lot of time and back-and-forths from designers and developers.
⚠️ This guide assumes target languages are already configured in your workspace. Refer to this guide to learn how to add target languages.
First, submit translations to Frontitude
To preview translations in Figma, you must first save them to Frontitude. You have two options to achieve this:
- Submit translations directly to Frontitude. Refer to this guide to learn more about Frontitude’s localization capabilities and how to submit translations.
- Import translations from external sources. If you use another localization tool or store translations in a separate system, you can upload them to your copy library. Refer to this guide to learn how to do that.
Pull translations into Figma
The Frontitude plugin allows you to select frames connected to Frontitude and import their translations into Figma.
The translations are imported into duplicates of each selected frame and language, without altering the original frames. This ensures that none of your designs are modified by the plugin.
⚠️ Translation preview frames are view-only. You cannot submit translation changes or link these frames to Frontitude.
To pull translations into preview frames, go to the Edit tab, click the Globe button in the top-right corner, and click Preview translations. You can choose from a few options:
- Target language. You can select a specific target language or simply choose all languages (default) to determine which translations will be imported.
- Preview layout. Whether your frames are arranged horizontally or vertically, you can select the appropriate layout so the plugin duplicates the frame in the same order.
- Status. This provides flexibility to import only finalized translations or translations that need review, depending on your process.
Handling design-breaking translations
Suppose you import translations in German and notice that one of them breaks the design. In that case, you should raise a flag and request the translators to retranslate the text:
- Go to the source language frame in Figma.
- Select the text that you want to report and open the Edit tab.
- Scroll down to the Activity log and comment on the defect you found. You can use @mention annotations to notify relevant teammates.
Preview translations updates
If you have already imported translations and want to pull updates, you can do so effortlessly.
Simply select any source-language frame and repeat the steps to preview translations (selected options are saved), and the plugin will update the relevant preview frames with the recent translations from Frontitude.
