Figma plug-in

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:

  • Hurtigt generere flersproget, kreative aktiver.
  • Oversætte modelscenarier og teste dem på forskellige sprog, før programmering påbegyndes.
  • Føje rigtige tekster til dine prototyper, som uploades til Crowdin-projektet af andre teams og ophøre med at anvende “Lorem Ipsum” i modelscenarierne.
  • Upload tagged screenshots to your Crowdin project.

Installing Crowdin for Figma Plugin

  1. Log ind på Figma.
  2. Vælg Plugins > Håndtér plugins… i Filhåndteringen.
  3. Klik på Gennemse alle plugin’er.
  4. Benyt Søgefeltet for at finde Crowdin for Figma-plugin’et.
  5. Klik på Installér ved siden plugin’et.

Connecting Figma with Crowdin Account

  1. Gå i Figma-filhåndteringen til Plugins > Crowdin.
  2. Angiv dit Personlige Adgangstoken, og klik på Forbind.
  3. Vælg det ønskede Crowdin-projekt.

To generate a new token in Crowdin, go to your Account Settings, API tab, Personal Access Tokens section and click New Token.

You might need to change credentials along the way, as well as select another Crowdin project you send content to, upload translations, or source texts from. For this, go to the plugin Settings in the upper right corner of the Crowdin plugin window.

Sende Designs til Oversættelse i 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. Åbn den relevante Figma-fil.
  2. Gå til Plugins > Crowdin.
  3. Vælg fra tilstanden Sideoversættelse, og Figma til Crowdin-afsnittet, det indhold, der skal uploades til Crowdin. Vælg Alle sider eller Aktuel side.

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. Åbn den relevante Figma-fil.
  2. Gå til Plugins > Crowdin.
  3. I tilstanden Crowdin til Figma og I afsnittet Crowdin til Figma vælges det målsprog, for hvilket oversættelser skal uploades. Du kan også vælge Alle sprog.
  4. Vælg det indhold, du ønsker forhåmdsvist i Figma. Vælg Alle sider eller Aktuel side.

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 Project

  1. Åbn Crowdin-plugin’et.
  2. Skifte til tilstanden Crowdin-strenge.
  3. Benyt Søgefeltet til at finde den specifikke kopi.
  4. Vælg det tekstlag, du ønsker at føje tekst til, og klik på den ønskede streng.

Uploading Tagged Screenshots to Crowdin

  1. Åbn Crowdin-plugin’et.
  2. Skifte til tilstanden Crowdin-strenge.
  3. Use texts from the Crowdin project in your designs. Click to upload screenshots of the frames that include the used texts.
  4. Klik igen, for at opdatere skærmfotos på Crowdin.

Uploaded screenshots will appear under each separate string in the Editor to give translators more context. You can also check all the uploaded screenshots in Project Settings, Screenshots tab. Learn more about Screenshots

Var denne artikel nyttig?