Figma Plugin

Mit dem Crowdin for Figma-Plugin kannst du Texte aus Crowdin in deinen Designs verwenden und so sowohl für Designer als auch für Entwickler Zeit sparen. These could include original or translated texts. Bei Bedarf kannst du neue Texte hinzufügen (z. B. Dialogtitel oder Schaltflächenbeschriftungen) und sie an Übersetzer in Crowdin senden.

Use Cases

• Quickly generate multilingual creative assets.
• Übersetze Mockups, wobei die ursprüngliche Formatierung und die Stile erhalten bleiben, und teste sie in verschiedenen Sprachen, bevor die Programmierung beginnt.
• Verwende nicht mehr „Lorem Ipsum“, sondern füge stattdessen echte Texte aus Crowdin zu deinen Prototypen hinzu. Aus Crowdin hinzugefügte Strings werden mit den Textfeldern in Figma verknüpft.
• Erstelle Quellstrings in deinen Designs und lade sie in dein Crowdin-Projekt hoch. Erstellte Strings werden mit Textfeldern in Figma verknüpft. Auf diese Weise können Entwickler hochgeladene Strings verwenden und so den Zeitaufwand für die Entwicklung reduzieren.
• Translate String variables and switch your designs to any translated language.
• Zeige Übersetzungen und String-Schlüssel in deinen Designs in der Vorschau an.
• Lade Screenshots mit Tags in dein Crowdin-Projekt hoch.

Installation

1. Melde dich bei Figma an.
2. Öffne eine deiner Designdateien oder klicke auf Neue Designdatei.
3. Klicke im Dateimenü auf Plugins > Plugins verwalten…. Alternativ kannst du mit der rechten Maustaste auf die Arbeitsfläche klicken und Plugins > Plugins verwalten auswählen.
4. Verwende das Suchfeld, um das Crowdin for Figma-Plugin zu finden.
5. Klicke auf das Crowdin for Figma-Plugin und wähle Speichern.
6. Nachdem du es gespeichert hast, klicke auf das Crowdin for Figma-Plugin, um es auszuführen.

Configuration

Berechtigungen

Um die Figma-Integration einzurichten, benötigst du im Crowdin-Projekt die Berechtigung als Manager oder Eigentümer.

Setting up Credentials

Gehe wie folgt vor, um deine Crowdin-Anmeldedaten in Figma anzugeben:

1. Gehe im Dateimenü zu Plugins > Gespeicherte Plugins. Alternativ kannst du mit der rechten Maustaste auf die Arbeitsfläche klicken und Plugins > Gespeicherte Plugins auswählen.
2. Klicke auf Crowdin for Figma. The plugin opens on the Settings tab.
3. Provide your Personal Access Token.
4. Klicke auf Verbinden.

Gehe folgendermaßen vor, um ein neues Token in Crowdin zu generieren:

1. Gehe zu Kontoeinstellungen > API, zum Abschnitt Persönliche Zugriffstoken, und klicke auf Neues Token.
2. Gib Tokenname an, wähle Bereiche aus und klicke auf Erstellen.

Welche Bereiche sollte ich auswählen?

• Projects (List, Get, Create, Edit) – Gewährt Zugriff auf Projektlisten sowie die Berechtigung, Projekte anzuzeigen, zu erstellen und zu aktualisieren.
• Source files & strings – Gewährt Zugriff zum Hinzufügen, Abrufen, Löschen und Aktualisieren von Projektzweigen, Verzeichnissen, Quelldateien und Quellstrings sowie Zugriff auf Dateirevisionen.
• Translations – Gewährt Zugriff zum Hinzufügen neuer und Verwalten vorhandener Übersetzungen.
• Screenshots – Gewährt Zugriff auf die Liste der Screenshots, zum Hinzufügen, Abrufen, Ersetzen und Löschen von Screenshots sowie auf den Zugriff und die Bearbeitung von Screenshot-Tags.

Selecting a Project

Gehe wie folgt vor, um das Crowdin-Projekt auszuwählen, mit dem du arbeiten möchtest:

1. Klicke im Tab Einstellungen auf das Dropdown-Menü unter Crowdin-Projekt und wähle ein Projekt aus der Liste aus.
2. Wähle den Inhaltstyp aus, mit dem du in diesem Projekt arbeiten wirst (z. B. UI-Lokalisierung oder Lokalisierung von Marketingvisuals), und klicke auf Speichern. Die ausgewählte Option bestimmt, welcher Modus des Crowdin for Figma-Plugins für dich verfügbar ist.
3. (Optional) If you work with both types of content in this project, click Skip instead of Save to have both modes available at once.
4. (Optional) Wähle im Abschnitt Crowdin-Zweig den spezifischen Zweig aus, in den deine Inhalte hochgeladen werden. Wenn dein Projekt Versionszweige verwendet, kannst du entweder einen vorhandenen auswählen oder direkt in Figma einen neuen erstellen. Andernfalls kannst du diesen Schritt überspringen.
   • So wählst du einen vorhandenen Zweig aus: Wähle den gewünschten Zweig aus dem Dropdown-Menü aus.
   • So erstellst du einen neuen Zweig: Klicke neben dem Zweigfeld auf . Gib im Dialog Neuer Versionszweig einen Namen ein und klicke auf Erstellen. Der neue Zweig wird in deinem Crowdin-Projekt erstellt und automatisch im Plugin ausgewählt.

To switch to another project or change the content type, click Disconnect in the Settings tab and confirm, then select the project and content type again.

UI Localization

Marketing Visuals Localization

UI Localization

Verwende den Tab Strings, wenn du die Benutzeroberfläche lokalisierst und mit deinen Entwicklungs- und Marketingteams an dynamischen Seiten arbeitest. In diesem Tab kannst du Quellstrings mit einem Klick aus Crowdin zu deinen Designs in Figma hinzufügen. Nachdem die Texte in den Designs verwendet wurden, kannst du getaggte Screenshots für die Referenz der Übersetzer automatisch wieder in Crowdin hochladen.

Quellstrings aus Crowdin in Figma verwenden

1. Öffne das Crowdin-Plugin für Figma.
2. Verwende im Tab Strings das Feld Suchen, um den gewünschten Text zu finden. You can search strings by source text, string identifier, or context.
3. Wähle die Textebene in Figma aus, der du Text hinzufügen möchtest, und klicke im Plugin neben dem gewünschten String auf das Link-Symbol.

Nachdem du die Quellstrings aus Crowdin in deinen Designs verwendet hast, werden sie mit den Textfeldern verknüpft. Du kannst für diese Strings in Figma Übersetzungen in der Vorschau anzeigen und Screenshots hochladen sie deinem Crowdin-Projekt zuordnen.

Du kannst einen einzelnen Crowdin-String mit einem oder mehreren Textfeldern in Figma verknüpfen. Ein Textfeld kann jedoch nur mit einem einzigen Crowdin-String verknüpft werden. If you link a text field with an existing connection to a new Crowdin string, the previous connection will be terminated, and a new connection will be established. Um einen Crowdin-String von allen Textfeldern zu trennen, mit denen er zuvor verknüpft wurde, klicke mit der rechten Maustaste auf das Link-Symbol neben dem gewünschten String.

Verknüpfte Strings verwalten

Du kannst den Text, den Kontext oder andere Eigenschaften eines Strings direkt im Plugin bearbeiten. Klicke dazu in der String-Liste neben dem entsprechenden String auf das -Symbol. Nimm die gewünschten Änderungen im Bearbeitungsformular vor und klicke auf Speichern.

In derselben Liste kannst du Strings auch über die entsprechenden Symbole ausblenden oder löschen. Alle von dir vorgenommenen Änderungen werden mit deinem Crowdin-Projekt synchronisiert.

Alle verknüpften Elemente sofort finden

Um beim Bearbeiten eines Strings zu sehen, an welchen Stellen er verwendet wird, klicke auf das -Symbol in der unteren linken Ecke. Das Plugin wählt automatisch alle Textebenen auf deiner aktuellen Figma-Seite aus und hebt sie hervor, die mit diesem String verknüpft sind.

Quellstrings aus Figma zu Crowdin hinzufügen

Du kannst Strings hinzufügen, die bereits in den Designs verwendet werden.

1. Öffne das Crowdin-Plugin für Figma.
2. Um die in den Designs verwendeten Strings hinzuzufügen, wähle den gesamten Frame, mehrere Frames oder die gewünschten Textelemente in den Frames aus.
3. Klicke im Tab Strings auf .
4. Überprüfe im angezeigten Dialog die Liste der hinzuzufügenden Strings. Bereits mit einem Crowdin-String verknüpfte Elemente sind mit gekennzeichnet. To add such an element as a new string instead of updating the linked one, click to unlink it, or click Unlink all to unlink all of them. Klicke bei Bedarf auf das Filtersymbol , um das Filterfenster zu öffnen und bestimmte Elemente auszuschließen:
   • Wähle Ausgeblendete Elemente überspringen, wenn einige Frames ausgeblendete Elemente enthalten, die nicht zu Crowdin hinzugefügt werden sollen.
   • Wähle Nicht übersetzbare Elemente überspringen, wenn einige Frames nicht übersetzbare Elemente enthalten, die nicht zu Crowdin hinzugefügt werden sollen.
   • Wähle Gesperrte Elemente überspringen, um gesperrte Textelemente davon auszuschließen, zur Übersetzung gesendet zu werden. Dies ist hilfreich, wenn bestimmte Texte für den Kontext auf Screenshots sichtbar bleiben, aber nicht als Quellstring zu Crowdin hinzugefügt werden sollen.
5. (Optional) Konfiguriere die String-Einstellungen. Du kannst Einstellungen für einzelne Strings anpassen oder die Einstellungen gesammelt auf alle Strings gleichzeitig anwenden:
   • Individuelle String-Einstellungen: Klicke neben einem bestimmten String in der Liste auf , um dessen Kontext zu aktualisieren oder die maximale Länge des übersetzten Textes für diese Zeile festzulegen.
   • String-Standardeinstellungen: Klicke oben rechts über der String-Liste auf , um die Standardeinstellungen zu öffnen, die auf alle Strings in der Liste angewendet werden. Hier kannst du das Muster für die Schlüsselnamen und die Option Max. Length Correction (%) option, which automatically sets a maximum character limit by adding a specified percentage to the original string’s length (for example, entering “20” means a 100-character string will have a max length of 120). This helps you avoid text truncation in the localized UI when translations run longer than the source. The changes take effect once you click Apply, and you can still override them per string using the individual string settings.
6. Sobald alle benötigten Strings ausgewählt und konfiguriert sind, klicke auf Weiter.
7. Wähle auf der nächsten Dialogseite die gewünschten Optionen aus:
   • Vorhandene Strings automatisch verknüpfen – Vergleicht die hinzuzufügenden Strings automatisch mit vorhandenen Strings in Crowdin. If there’s a match, the text element will be linked to the existing string instead of creating a new one.
   • Compare strings by key instead of text – By default, the plugin matches strings by their source text. Enable this option to match them by string identifiers (keys) instead, both when auto-linking and when merging duplicates.
   • Fehlende Schlüssel erstellen – Nur neue Textelemente werden zu Crowdin hinzugefügt.
   • Duplikate zusammenführen – Verknüpft identische Textelemente mit einem einzigen neuen String in Crowdin. Wenn du beispielsweise mehrere Schaltflächen mit der Beschriftung Submit hinzufügst, fügt das Plugin nur einen String zu deinem Crowdin-Projekt hinzu und verknüpft alle doppelten Textfelder damit.
   • (Optional) Um den Strings Labels hinzuzufügen, wähle sie alternativ im Dropdown-Menü Labels aus.
   • Screenshots senden.
8. Wähle im Dropdown-Menü Datei die Datei in Crowdin aus, der du die Strings hinzufügen möchtest.
9. Wähle im Dropdown-Menü Aktualisierungsoption aus, was mit vorhandenen Übersetzungen und Freigaben in Crowdin geschehen soll, wenn du verknüpfte Strings aktualisierst, deren Text in Figma geändert wurde. Wähle eine der folgenden Optionen:
   • Übersetzungen und Freigaben beibehalten – Behält sowohl vorhandene Übersetzungen als auch deren Freigabestatus bei. Ideal für kleinere Tippfehlerkorrekturen, bei denen die Übersetzung weiterhin korrekt ist.
   • Übersetzungen beibehalten – Behält vorhandene Übersetzungen bei, entfernt jedoch die Freigabestatus, sodass die Übersetzungen erneut geprüft und freigegeben werden müssen.
   • Übersetzungen und Freigaben löschen – Entfernt alle vorhandenen Übersetzungen und Freigaben. Verwende diese Option, wenn sich die Bedeutung des Quelltexts erheblich ändert und der String vollständig neu übersetzt werden muss.
10. Klicke auf An Crowdin senden.

Zusammenfassung des Uploads verstehen

Nachdem die Strings zu Crowdin hinzugefügt wurden, wird eine Zusammenfassung der gesendeten Inhalte angezeigt. Diese Zusammenfassung enthält detaillierte Informationen zum Vorgang:

• Erstellte Strings: Die Anzahl der neuen Strings, die deinem Crowdin-Projekt hinzugefügt wurden.
• Aktualisierte Strings: Die Anzahl der vorhandenen Strings in Crowdin, die aktualisiert wurden.
• Verknüpfte Strings: Die Anzahl der vorhandenen Strings, die mit Elementen in Figma verknüpft wurden.
• Verknüpfte Figma-Elemente: Die Gesamtzahl der Figma-Elemente, die mit Strings in Crowdin verknüpft wurden. This number can be higher than Strings linked if multiple elements were linked to a single string.
• Erstellte Screenshots: Die Anzahl der neuen Screenshots, die zu Crowdin hochgeladen wurden.
• Aktualisierte Screenshots: Die Anzahl der vorhandenen Screenshots, die aktualisiert wurden.

Auf dem Übersichtsbildschirm kannst du auf In Crowdin öffnen klicken, um die Strings in deinem Projekt anzuzeigen, oder auf Hauptseite, um zum Hauptbildschirm des Plugins zurückzukehren.

Quellstrings mit Pluralformen hinzufügen

Du kannst Strings mit Pluralformen hinzufügen.

1. Öffne das Crowdin-Plugin für Figma.
2. Um die in den Designs verwendeten Strings hinzuzufügen, wähle den gesamten Frame, mehrere Frames oder die gewünschten Textelemente in den Frames aus.
3. Klicke im Tab Strings auf .
4. Überprüfe im angezeigten Dialog die Liste der Strings.
5. Klicke neben dem gewünschten String auf und dann auf Pluralformen hinzufügen.
6. Fülle im angezeigten Dialog die Felder für jede Pluralform aus und klicke auf Speichern. Je nach Ausgangssprache des verbundenen Crowdin-Projekts kann die Anzahl der anzugebenden Pluralformen unterschiedlich sein.
7. Sobald alle benötigten Strings ausgewählt und konfiguriert sind, klicke auf Weiter.
8. Wähle die gewünschten Optionen und die Crowdin-Datei aus, der du die Strings hinzufügen möchtest, und klicke dann auf An Crowdin senden.

Hinweis

Beim Hinzufügen von Strings mit Pluralformen dienen die Felder in der Spalte String zum Hinzufügen der Pluralform other. Du kannst Strings mit Pluralformen nur zu Dateien hinzufügen, die Pluralformen unterstützen (z. B. Android XML, Stringsdict, XLIFF usw.).

Mehr über Pluralformen erfahren.

Configuring ICU Source String Placeholders

When using ICU strings in your design, you can set the placeholders’ values, and after adding such strings to designs, they will be displayed in a formatted view with the preconfigured values.

Sobald du den benötigten ICU-String aus Crowdin in deinem Design verwendest, kannst du seine Platzhalterwerte konfigurieren.

1. Öffne das Crowdin-Plugin für Figma.
2. Verwende im Tab Strings das Feld Suchen, um den gewünschten Text anhand des Quelltexts, der String-ID oder des Kontexts zu finden.
3. Click on the needed ICU string.
4. Click Set placeholders.
5. Type the needed values for ICU string placeholders.
6. Klicke auf Speichern, um die eingegebenen Platzhalter zu speichern.
7. Klicke auf Speichern, um den Quellstringtext in den Designs zu aktualisieren.

Wenn du Übersetzungen für ICU-Strings in Figma in der Vorschau anzeigst, werden sie ebenfalls in einer formatierten Ansicht dargestellt, wenn die Werte zuvor vorkonfiguriert wurden.

Key Naming Pattern Settings

Um das Hinzufügen von Strings aus Figma zum Crowdin-Projekt zu vereinfachen, kannst du das gewünschte Schlüsselnamensmuster für die Quellstring-IDs einrichten. Das Crowdin-Plugin für Figma schlägt anhand des ausgewählten Musters String-IDs für neue Strings vor. While adding new source strings, you can always edit the suggested identifier to the preferred look.

Key naming is configured in the String Defaults panel, separately for the Strings and Variables tabs. To select the key naming pattern, follow these steps:

1. Öffne das Crowdin-Plugin für Figma.
2. Start sending the content to Crowdin:
   • From the Strings tab: Select the needed text elements and click .
   • From the Variables tab: Select the needed variable collections and click Send to Crowdin.
3. Klicke im angezeigten Dialog oben rechts über der String-Liste auf .
4. Wähle im Abschnitt Muster für Schlüsselnamen die gewünschte Option aus dem Dropdown-Menü aus und klicke auf Anwenden. The plugin regenerates the string keys in the list according to the selected pattern.

Besides the existing patterns, you can configure your own pattern. To use a custom pattern, select the Custom key naming pattern option from the drop-down list and specify your pattern in the Custom Key Naming Pattern field. Gib [% in das Feld ein, um die verfügbaren Platzhalter anzuzeigen.

The available placeholders depend on the tab. The Strings tab builds keys from the page, frame, and element names (for example, [%page].[%frame].[%element]), and the Variables tab from the collection, group, and variable names (for example, [%collection].[%group].[%variable]).

Zusätzlich kannst du Schlüsselnamen im camelCase-Stil verwenden auswählen, um Schlüssel im camelCase-Format (z. B. siteFooter) statt im Standardformat snake_case (z. B. site_footer) zu generieren.

Uploading Tagged Screenshots to Crowdin

Stelle beim Hinzufügen von in den Designs verwendeten Quellstrings sicher, dass Screenshots senden ausgewählt bleibt. Dadurch lädt das Crowdin-Plugin für Figma Screenshots zusammen mit den Quellstrings hoch.

Außerdem kannst du Screenshots über die Option Screenshots aktualisieren aktualisieren, während du einen Crowdin-String bearbeitest, der mit den Textfeldern in den Designs verknüpft ist.

Zusätzlich kannst du Screenshots für mit Textfeldern in Designs verknüpfte Strings gesammelt zu Crowdin hochladen.

1. Öffne das Crowdin-Plugin für Figma.
2. Wähle einen oder mehrere Frames mit den verknüpften Strings aus.
3. Klicke im Tab Strings auf Markierte Screenshots an Crowdin senden, um Screenshots für die ausgewählten Frames hochzuladen.

Read more about Screenshots.

Previewing Strings

Zeige Übersetzungen aus Crowdin für die in den Designs verwendeten Strings direkt in Figma in der Vorschau an. Standardmäßig werden Vorschauen auf einer neuen, duplizierten Seite erstellt, damit deine ursprünglichen Designs erhalten bleiben.

Übersetzungen in der Vorschau anzeigen

To preview strings populated with translations, follow these steps:

1. Öffne das Crowdin-Plugin für Figma.
2. Gehe zum Tab Strings und erweitere den Abschnitt Strings aus Crowdin in der Vorschau anzeigen.
3. Stelle sicher, dass das Kontrollkästchen Vorschau auf duplizierter Seite ausgewählt ist.
4. Wähle Mit Sprache erstellen.
5. Wähle die Zielsprache aus, für die du Übersetzungen in der Vorschau anzeigen möchtest (optional kannst du die gewünschten Pluralformen auswählen). Du kannst auch Alle Sprachen auswählen.
6. Wähle die Inhalte aus, die du in Figma in der Vorschau anzeigen möchtest: Alle Frames oder Ausgewählte Frames.

Tipp

Um Übersetzungen direkt auf deiner aktuellen Seite in der Vorschau anzuzeigen, deaktiviere das Kontrollkästchen Vorschau auf duplizierter Seite. Beachte, dass dadurch andere Optionen deaktiviert werden, z. B. das Erstellen von Vorschauen mit Schlüsselnamen.

Vorschau mit Schlüsselnamen

Um Entwicklern das Identifizieren von Strings zu erleichtern, kannst du deine Designs mit String-Schlüsseln statt mit übersetztem Text füllen.

1. Öffne das Crowdin-Plugin für Figma.
2. Gehe zum Tab Strings und erweitere den Abschnitt Strings aus Crowdin in der Vorschau anzeigen.
3. Stelle sicher, dass das Kontrollkästchen Vorschau auf duplizierter Seite ausgewählt ist.
4. Wähle Mit Schlüsselnamen erstellen.
5. Wähle die Inhalte aus, die du in Figma in der Vorschau anzeigen möchtest: Alle Frames oder Ausgewählte Frames.

Filtering Strings

Du kannst Strings im Tab Strings nach verschiedenen Kriterien filtern, z. B. nach Datei oder Verknüpfungsstatus. Klicke auf , um das Filter-Seitenfenster zu öffnen. Hier kannst du Dateien auswählen, deren Strings angezeigt werden sollen, oder nur Strings anzeigen, die mit deiner aktuellen Textauswahl verknüpft sind (z. B. ausgewählte Textelemente, ein ganzer Frame oder mehrere Frames). Klicke auf Zurücksetzen, um alle Filteroptionen zu löschen.

Marketing Visuals Localization

Verwende den Tab Seiten, um statische Seiten wie Broschüren und Banner zu lokalisieren. In diesem Tab kannst du Texte mit Kontext für Übersetzer an Crowdin senden und übersetzte Kopien zurück nach Figma hochladen.

Limitations

Der Tab Seiten und einige andere Plugin-Einstellungen sind möglicherweise nicht verfügbar, wenn du mit stringbasierten Projekten arbeitest.

Sending Texts for Translation to Crowdin

Du kannst Text zur Übersetzung entweder aus ausgewählten oder aus allen Frames einer Figma-Datei senden. Translators will work with those texts in the list view and use designs as an additional context for even higher translation quality.

In Crowdin wird ein Stammordner namens figma-plugin erstellt. Er enthält einen nach deiner Figma-Datei benannten Unterordner mit HTML-Dateien für jeden darin enthaltenen Frame.

Gehe wie folgt vor, um Figma-Designs zur Übersetzung zu senden:

1. Öffne die benötigte Figma-Datei.
2. Gehe zu Plugins > Crowdin for Figma.
3. Wähle im Abschnitt Seiten > Figma an Crowdin die Inhalte aus, die du übersetzen möchtest: Alle Frames oder Ausgewählte Frames.
4. Wähle auf dem nächsten Bildschirm die Zielsprachen aus, für die die hochgeladenen Frames in Crowdin zur Übersetzung verfügbar sein sollen. Standardmäßig ist Alle Sprachen ausgewählt.
5. (Optional) Wähle Inhaltssegmentierung, um lange Texte vor dem Senden an Crowdin in kleinere Segmente, z. B. Sätze, aufzuteilen.
6. Klicke auf Alle Frames senden (oder Ausgewählte Frames senden).

Nachdem die Quelldateien in dein Crowdin-Projekt hochgeladen wurden, kannst du Mitwirkende einladen, sie zu übersetzen und Korrektur zu lesen.

Mehr über Übersetzungsstrategien erfahren.

Übersetzungen aus Crowdin nach Figma hochladen

Du kannst Texte zwischen Figma und Crowdin-Projekten jederzeit synchronisieren, um die übersetzten Texte in Figma zu testen oder mehrsprachige Assets zu erstellen.

Gehe wie folgt vor, um übersetzte Kopien nach Figma hochzuladen:

1. Öffne die benötigte Figma-Datei.
2. Gehe zu Plugins > Crowdin for Figma.
3. Wähle im Abschnitt Seiten > Crowdin an Figma die Inhalte aus, auf die du Übersetzungen anwenden möchtest: Alle Frames oder Ausgewählte Frames.
4. Wähle auf dem nächsten Bildschirm eine oder mehrere Sprachen aus, aus denen du Übersetzungen importieren möchtest. Du kannst den Übersetzungsfortschritt für jede Sprache direkt in dieser Liste verfolgen. Dieser Fortschritt entspricht dem Übersetzungsstatus der Dateien, die sich speziell im Stammordner figma-plugin deines Crowdin-Projekts befinden.
5. (Optional) Wähle Übersetzungen auf der aktuellen Seite zusammenführen, um die importierten übersetzten Frames auf deiner aktuellen Figma-Seite zu platzieren, anstatt eine separate Seite dafür zu erstellen.
6. Klicke auf Alle Frames importieren (oder Ausgewählte Frames importieren).

Nach dem Hochladen der Übersetzungen nach Figma enthält die geänderte Datei für jede Zielsprache einen separaten Frame mit den Übersetzungen. The newly uploaded translated versions won’t override the ones you uploaded previously. You can always delete the translated copies you no longer need.

Wenn du Übersetzungen auf der aktuellen Seite zusammenführen auswählst, werden die übersetzten Frames direkt zu der Seite hinzugefügt, an der du gerade arbeitest.

If you’d like the newly uploaded translated versions to override the previously uploaded ones, open the plugin Settings and select Override existing translations.

Using the Plugin with Figma Buzz

Das Crowdin for Figma-Plugin ist vollständig mit Figma’s Buzz-Editor kompatibel, einem neuen Bereich zum Erstellen von Marketing- und Werbeinhalten. Diese Integration eignet sich ideal für Teams, die Social-Media-Assets, digitale Anzeigen und andere Werbevisuals lokalisieren.

Wenn du das Plugin in Buzz verwendest, findest du eine optimierte Version des Tabs Seiten direkt in der linken Seitenleiste. Der Workflow ist für den Buzz-Editor optimiert:

• Fokussierte Funktionalität: Es ist nur der Tab Seiten verfügbar, sodass du direkten Zugriff auf die benötigten Funktionen für die visuelle Lokalisierung hast.
• Assetbasierte Auswahl: Anstatt Frames auszuwählen, arbeitest du mit Assets. Die Schaltflächen sind mit Ausgewählte Assets beschriftet, passend zur Buzz-Terminologie.

Gehe wie folgt vor, um deine Designs in Figma Buzz zu lokalisieren:

1. Öffne das Crowdin-Plugin über die linke Seitenleiste.
2. Wähle im Buzz-Editor ein oder mehrere Assets aus, die du übersetzen möchtest.
3. Klicke im Abschnitt Figma an Crowdin auf Ausgewählte Assets. Wähle auf dem nächsten Bildschirm die Zielsprachen aus und klicke auf Ausgewählte Assets senden.
4. Sobald die Übersetzungen fertig sind, gehe zum Abschnitt Crowdin an Figma und klicke auf Ausgewählte Assets. Wähle auf dem nächsten Bildschirm die Zielsprachen aus, die du importieren möchtest, und klicke auf Ausgewählte Assets importieren, um die Übersetzungen anzuwenden.

Figma-Variablen übersetzen Neu

Wenn deine Designs Figma-Variablen für UI-Texte verwenden, kannst du String-Variablen im Tab Variablen übersetzen. In a variable collection, the default mode holds the source text, and each target language gets its own mode. Das Plugin sendet die Werte des Standardmodus als Quellstrings an Crowdin und schreibt die Übersetzungen zurück in die Sprachmodi. Designs, die diese Variablen verwenden, können anschließend nativ in Figma auf jede übersetzte Sprache umgestellt werden.

Das Plugin funktioniert mit lokalen Sammlungen von String-Variablen. It skips Color, Number, and Boolean variables, library variables, extended collections, and values that are aliases to other variables.

Text layers bound to a variable can still be sent as separate strings from the Strings tab, but their text is read-only in the string list. Previewing translations on the current page won’t change them, so use Preview in duplicated page to see the translated text.

Variablen an Crowdin senden

1. Öffne das Crowdin-Plugin für Figma.
2. Wechsle zum Tab Variablen.
3. Wähle die Variablensammlungen aus, die du übersetzen möchtest, und klicke auf An Crowdin senden.
4. Überprüfe die Liste der hinzuzufügenden Strings. String-Schlüssel werden aus den Namen der Sammlung, der Gruppe und der Variablen generiert. Bereits mit einem Crowdin-String verknüpfte Variablen sind mit gekennzeichnet, und du kannst ihre Verknüpfung genauso wie bei Textelementen aufheben. You can edit each string’s key and context individually or click above the list to open the same String Defaults panel as in the Strings tab, where you can configure the key naming pattern and the Max. Length Correction (%) option.
5. Click Next and select the preferred options (the same ones as when adding source strings from Figma to Crowdin). Since variable names serve as keys, consider enabling Compare strings by key instead of text.
6. Wähle im Dropdown-Menü Datei die Datei in Crowdin aus, der du die Strings hinzufügen möchtest, und klicke auf An Crowdin senden. The button becomes available once a file is selected.

If you select the Send screenshots option, the plugin generates screenshots for translators’ reference from the text layers on the current page that use the sent variables.

The upload summary shows the same details as for source strings.

Übersetzungen mit Modi synchronisieren

Übersetzungen synchronisieren wird verfügbar, sobald die ausgewählten Sammlungen Variablen enthalten, die mit Crowdin-Strings verknüpft sind. Sende die Variablen daher zuerst an Crowdin.

1. Wähle im Tab Variablen die benötigten Sammlungen aus und klicke auf Übersetzungen synchronisieren.
2. Wähle die Zielsprachen aus, die du synchronisieren möchtest. Standardmäßig ist Alle Sprachen ausgewählt.
3. Klicke auf Übersetzungen synchronisieren.

For each selected language, the plugin creates or updates a mode named after the Crowdin language code (e.g., uk, zh-CN) in the selected collections and fills it with translations. Der Standardmodus der Sammlung wird niemals überschrieben und enthält immer deinen Quelltext.

Hinweis

Die Anzahl der Modi pro Sammlung hängt von deinem Figma-Tarif ab. Sprachen, die das Tariflimit überschreiten, werden übersprungen und nach der Synchronisierung gemeldet.

Scheinübersetzung

Even before translations are completed, you can test whether your application is ready to be localized using pseudo-localization. This feature allows you to simulate how the application’s UI will look with different languages to check whether the source strings should be modified before the project localization starts.

Je nachdem, welche Inhalte du testen möchtest, kannst du im Crowdin for Figma-Plugin den Tab Strings oder Seiten verwenden.

Tab „Strings“

1. Öffne die benötigte Figma-Datei.
2. Gehe zu Plugins > Crowdin for Figma.
3. Stelle im Abschnitt Strings > Strings aus Crowdin in der Vorschau anzeigen sicher, dass Vorschau auf duplizierter Seite ausgewählt ist.
4. Wähle Pseudolokalisierung.
5. Wähle die Inhalte aus, die du mit der Pseudolokalisierung testen möchtest: Alle Frames oder Ausgewählte Frames.
6. Im Dialog Pseudolokalisierung kannst du aus vordefinierten Voreinstellungen auswählen und die Einstellungen nach deinen Vorstellungen konfigurieren.
7. Klicke auf Senden.

Hinweis

Stelle sicher, dass deine Crowdin-Strings vor dem Erstellen der Pseudolokalisierung mit Textelementen verknüpft sind.

Tab „Seiten“

1. Öffne die benötigte Figma-Datei.
2. Gehe zu Plugins > Crowdin for Figma.
3. Wähle im Abschnitt Seiten > Pseudolokalisierung die Inhalte aus, die du mit der Pseudolokalisierung testen möchtest: Alle Frames oder Ausgewählte Frames.
4. Im Dialog Pseudolokalisierung kannst du aus vordefinierten Voreinstellungen auswählen und die Einstellungen nach deinen Vorstellungen konfigurieren.
5. Klicke auf Senden.

Hinweis

Stelle sicher, dass du deine Frames aus Figma zu Crowdin hochlädst, bevor du die Pseudolokalisierung erstellst.

Mehr über Pseudolokalisierung und deren Einstellungen erfahren.

Crowdin for Figma-Plugin im Dev-Modus

Der Dev-Modus von Figma ermöglicht es Designern und Entwicklern, zusammenzuarbeiten, die Genauigkeit bei der Implementierung sicherzustellen und einen reibungslosen Übergang vom Design zum Code zu gewährleisten.

Mehr über Figma Dev Mode erfahren.

Die Integration des Crowdin for Figma-Plugins mit dem Dev-Modus erweitert die Funktionen beider Plattformen und verbessert den Lokalisierungsprozess innerhalb der Designumgebung. Da der Dev-Modus in Figma schreibgeschützt ist, gelten für die Funktionen des Crowdin for Figma-Plugins bestimmte Einschränkungen:

Was du tun kannst:

• Greife auf den Tab Strings zu, um Strings anzuzeigen und zu verwalten.
• Sieh dir Stringdetails wie Datei, Schlüssel, Kontext und Labels an.
• Kopiere String-Schlüssel schnell für einen effizienten Workflow.

Im Dev-Modus nicht verfügbare Funktionen: neue Strings zu Crowdin hinzufügen, Strings verknüpfen, Screenshots senden, Übersetzungen in der Vorschau anzeigen, Strings bearbeiten, ausblenden oder löschen sowie der Tab Variablen.

Crowdin for Figma-Plugin im Dev-Modus verwenden

Trotz dieser Einschränkungen bleibt das Crowdin for Figma-Plugin im Dev-Modus wertvoll und bietet Entwicklern einen optimierten Ansatz für die Verwaltung von Textelementen. Hier ist ein typischer Anwendungsfall:

1. Öffne den Dev-Modus.
2. Wechsle in der rechten Seitenleiste zum Tab Plugins.
3. Klicke auf Crowdin for Figma.
4. Klicke im Tab Strings auf Strings filtern und wähle Mit ausgewählten Textelementen verknüpfte Strings anzeigen.
5. Wähle das gewünschte Textelement im Frame aus und fahre in der String-Liste mit der Maus über das -Symbol, um alle erforderlichen Informationen (z. B. Schlüssel, Kontext, Datei, in der der String gespeichert ist, Labels) zu diesem String anzuzeigen.
6. (Optional) Klicke auf String-Schlüssel in die Zwischenablage kopieren, um ihn später im Code zu verwenden.

Kompatibilität mit Figma für VS Code

Darüber hinaus lässt sich das Crowdin for Figma-Plugin nahtlos in Figma für VS Code integrieren und erweitert damit die Funktionen für Entwickler, die diese Umgebung verwenden.

Mehr über Figma für VS Code erfahren.

Troubleshooting

Probleme bei der Screenshot-Erstellung in großen Figma-Dateien

Beim Hochladen von Strings mit Screenshots aus großen Figma-Dateien kann es zu einer langsamen Leistung kommen oder Figma kann einfrieren. Dieses Problem tritt auf, wenn sich Textelemente innerhalb eines großen obersten Frames befinden.

Wenn du einen String von Figma zu Crowdin hinzufügst, führt das Plugin Folgendes aus:

1. Identifiziert den obersten Frame, der das Textelement enthält.
2. Konvertiert diesen Frame mithilfe der Figma API in ein Bild.
3. Lädt das Bild als Screenshot zu Crowdin hoch.

Das Plugin sucht immer nach dem höchsten Frame in der Hierarchie und beendet die Suche, sobald es auf ein Nicht-Frame-Element stößt (z. B. einen Abschnitt oder eine Gruppe). Wenn der oberste Frame zu groß ist, kann die Erstellung eines Screenshots zu Leistungsproblemen führen.

For example:

• section > group > frame > text → Das Plugin erstellt den Screenshot aus frame.
• frame 1 > frame 2 > frame 3 > text → Das Plugin erstellt den Screenshot aus frame 1.

Um Verlangsamungen zu vermeiden, strukturiere deine Figma-Datei so um, dass oberste Frames nur den relevanten UI-Kontext enthalten. Platziere nicht alle UI-Elemente in einem einzigen großen Frame, sondern teile sie in kleinere, logisch gegliederte Abschnitte auf.

Schriftersetzung beim Verknüpfen von Strings

Bei der Arbeit in Figma können lokal fehlende Schriftarten nach dem Verknüpfen von Strings über das Crowdin for Figma-Plugin unerwartete Änderungen verursachen.

Diese Situation tritt typischerweise auf, wenn:

• Das ursprüngliche Design eine Schriftart verwendet, die in deiner lokalen Figma-Umgebung nicht installiert ist.
• Figma kennzeichnet fehlende Schriftarten mit einem speziellen A?-Symbol in der oberen linken Ecke der Arbeitsfläche und neben dem Namen der Schriftart im Abschnitt Typografie der rechten Seitenleiste.
• Wenn du ein Textelement mit einer fehlenden Schriftart auswählst, zeigt Figma einen Dialog Fehlende Schriftart an, in dem du sie ersetzen kannst.

Wenn du einen Crowdin-String mit einem solchen Textelement verknüpfst, ersetzt Figma die fehlende Schriftart automatisch durch eine standardmäßig verfügbare Schriftart (z. B. Roboto). Dieses Verhalten ist zu erwarten. Das Plugin versucht, die ursprüngliche Schriftart beizubehalten. Wenn sie jedoch auf deinem lokalen System nicht verfügbar ist, ersetzt Figma sie, damit der Text sichtbar und bearbeitbar bleibt.

Dieses Problem ist möglicherweise nicht sofort erkennbar. Einige Benutzer bemerken die Änderung der Schriftart erst, nachdem sie Screenshots aus Figma zu Crowdin hochgeladen haben, was zu Verwirrung führen kann.

Um dies zu vermeiden:

• Prüfe vor dem Verknüpfen von Strings auf Hinweise zu fehlenden Schriftarten (A?).
• Stelle sicher, dass die im ursprünglichen Design verwendeten Schriftarten installiert und in Figma verfügbar sind.
• Stimme dich bei Bedarf mit dem Designer ab, um die korrekte Einrichtung der Schriftarten zu bestätigen.