Figma Plugin

Mit dem Crowdin-for-Figma-Plugin kannst du Texte aus Crowdin Enterprise in deinen Designs verwenden und dadurch sowohl für Designer als auch für Entwickler Zeit sparen. Dabei kann es sich um Original- oder übersetzte Texte handeln. Bei Bedarf können Sie neue hinzufügen (z. B. Dialogtitel, Schaltflächenbeschriftungen) und sie an die Übersetzer in Crowdin Enterprise senden.

Anwendungsfälle

• Erstelle schnell mehrsprachige kreative Assets.
• Übersetze Mockups, wobei die ursprüngliche Formatierung und die Stile erhalten bleiben, und teste sie in verschiedenen Sprachen, bevor die Programmierung beginnt.
• Verwenden Sie nicht länger “Lorem Ipsum”, sondern fügen Sie stattdessen echte Texte von Crowdin Enterprise in Ihre Prototypen ein. Strings, die aus Crowdin Enterprise hinzugefügt werden, werden mit den Textfeldern in Figma verknüpft.
• Erstellen Sie Quelltexte aus Ihren Entwürfen und laden Sie sie in Ihr Crowdin Enterprise-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.
• Übersetze String-Variablen und wechsle deine Designs in jede übersetzte Sprache.
• Zeige Übersetzungen und String-Schlüssel in deinen Designs in der Vorschau an.
• Laden Sie getaggte Screenshots zu Ihrem Crowdin Enterprise-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.

Konfiguration

Berechtigungen

Für die Einrichtung der Figma-Integration benötigst du Manager- oder Inhaberberechtigungen im Crowdin-Enterprise-Projekt.

Anmeldedaten einrichten

Um deine Crowdin-Enterprise-Anmeldedaten in Figma anzugeben, gehe wie folgt vor:

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. Das Plugin wird auf der Registerkarte Einstellungen geöffnet.
3. Gib dein persönliches Zugriffstoken und den Organisationsnamen (den Domainnamen deiner Organisation, z. B. your_organization) ein.
4. Klicke auf Verbinden.

Gehen Sie folgendermaßen vor, um ein neues Token in Crowdin Enterprise zu generieren:

1. Gehe zu Kontoeinstellungen > Zugriffstoken und klicke auf Neuer Token.
2. Gib Tokenname an, wähle Bereiche aus und klicke auf Erstellen.

Welche Bereiche sollte ich auswählen?

• Projekte – Gewährt Zugriff auf Projektlisten sowie die Berechtigung, Projekte anzuzeigen, zu erstellen und zu aktualisieren.
• Quelldateien und 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.

Projekt auswählen

Um das Crowdin-Enterprise-Projekt auszuwählen, mit dem du arbeiten möchtest, gehe wie folgt vor:

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) Wenn du in diesem Projekt mit beiden Inhaltstypen arbeitest, klicke statt auf Speichern auf Überspringen, damit beide Modi gleichzeitig verfügbar sind.
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.
   • To create a new branch: Click next to the branch field. Gib im Dialog Neuer Versionszweig einen Namen ein und klicke auf Erstellen. Der neue Zweig wird in deinem Crowdin-Enterprise-Projekt erstellt und automatisch im Plugin ausgewählt.

Um zu einem anderen Projekt zu wechseln oder den Inhaltstyp zu ändern, klicke auf der Registerkarte Einstellungen auf Trennen und bestätige dies. Wähle anschließend erneut das Projekt und den Inhaltstyp aus.

UI-Lokalisierung

Lokalisierung von Marketingvisualisierungen

UI-Lokalisierung

Verwende den Tab Strings, wenn du die Benutzeroberfläche lokalisierst und mit deinen Entwicklungs- und Marketingteams an dynamischen Seiten arbeitest. Auf dieser Registerkarte kannst du mit einem Klick Quellstrings aus Crowdin Enterprise zu deinen Designs in Figma hinzufügen. Nachdem die Texte in den Designs verwendet wurden, kannst du markierte Screenshots zur Referenz für Übersetzer automatisch wieder zu Crowdin Enterprise 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. Du kannst Strings nach Quelltext, String-ID oder Kontext suchen.
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 Quellzeichenketten aus Crowdin Enterprise in deinen Designs verwendet hast, werden sie mit den Textfeldern verknüpft. Du kannst für diese Zeichenketten in Figma Übersetzungen in der Vorschau anzeigen und Screenshots in dein Crowdin-Enterprise-Projekt hochladen.

Du kannst einen einzelnen Crowdin-Enterprise-String mit einem oder mehreren Textfeldern in Figma verknüpfen. Ein Textfeld kann jedoch nur mit einem einzigen Crowdin-Enterprise-String verknüpft werden. Wenn du ein Textfeld mit einer bestehenden Verbindung mit einem neuen Crowdin-Enterprise-String verknüpfst, wird die vorherige Verbindung beendet und eine neue Verbindung hergestellt. Um die Verknüpfung eines Crowdin-Enterprise-Strings mit allen Textfeldern aufzuheben, mit denen er zuvor verknüpft war, klicke mit der rechten Maustaste auf das Link-Symbol neben dem entsprechenden String.

Verknüpfte Strings verwalten

Du kannst den Text, den Kontext oder andere Eigenschaften eines Strings direkt im Plugin bearbeiten. To do so, click the icon next to it in the string list. 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-Enterprise-Projekt synchronisiert.

Alle verknüpften Elemente sofort finden

To see every location where a particular string is used while editing it, click the icon in the bottom left corner. 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. In the Strings tab, click .
4. Überprüfe im angezeigten Dialog die Liste der hinzuzufügenden Strings. Elemente, die bereits mit einem Crowdin-Enterprise-String verknüpft sind, werden mit gekennzeichnet. Um ein solches Element als neuen String hinzuzufügen, anstatt den verknüpften zu aktualisieren, klicke auf , um die Verknüpfung aufzuheben, oder klicke auf Alle Verknüpfungen aufheben, um die Verknüpfung für alle Elemente aufzuheben. If needed, click the filter icon to open the filter panel and exclude certain elements:
   • Aktiviere Ausgeblendete Elemente überspringen, wenn einige Frames ausgeblendete Elemente enthalten, die nicht zu Crowdin Enterprise hinzugefügt werden sollen.
   • Aktiviere Nicht übersetzbare Elemente überspringen, wenn einige Frames nicht übersetzbare Elemente enthalten, die nicht zu Crowdin Enterprise hinzugefügt werden sollen.
   • Wähle Gesperrte Elemente überspringen, um gesperrte Textelemente davon auszuschließen, zur Übersetzung gesendet zu werden. Das ist nützlich, wenn bestimmter Text auf Screenshots als Kontext sichtbar bleiben, aber nicht als Quellstring zu Crowdin Enterprise hinzugefügt werden soll.
5. (Optional) Konfiguriere die String-Einstellungen. Du kannst Einstellungen für einzelne Strings anpassen oder die Einstellungen gesammelt auf alle Strings gleichzeitig anwenden:
   • Individual String Settings: Click next to a specific string in the list to update its context or set the maximum length of the translated text for that row.
   • String Defaults: Click in the upper right corner, above the string list, to open the default settings applied to all strings in the list. Hier kannst du das Muster für die Schlüsselnamen und die Option **Max. Mit der Option Längenkorrektur (%) wird automatisch ein maximales Zeichenlimit festgelegt, indem ein angegebener Prozentsatz zur Länge des Originalstrings hinzugefügt wird (wenn du beispielsweise „20“ eingibst, darf ein 100 Zeichen langer String maximal 120 Zeichen enthalten). So kannst du verhindern, dass Text in der lokalisierten Benutzeroberfläche abgeschnitten wird, wenn Übersetzungen länger als der Quelltext sind. Die Änderungen werden wirksam, sobald du auf Anwenden klickst. Du kannst sie weiterhin für jeden String über dessen individuelle String-Einstellungen überschreiben.
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 Enterprise. Bei einer Übereinstimmung wird das Textelement mit dem vorhandenen String verknüpft, anstatt einen neuen zu erstellen.
   • Strings nach Schlüssel statt nach Text vergleichen – Standardmäßig gleicht das Plugin Strings anhand ihres Quelltexts ab. Aktiviere diese Option, um sie stattdessen anhand von String-IDs (Schlüsseln) abzugleichen – sowohl beim automatischen Verknüpfen als auch beim Zusammenführen von Duplikaten.
   • Fehlende Schlüssel erstellen – Nur neue Textelemente werden zu Crowdin Enterprise hinzugefügt.
   • Duplikate zusammenführen – Verknüpft identische Textelemente mit einem einzelnen neuen String in Crowdin Enterprise. Wenn du beispielsweise mehrere Schaltflächen mit der Bezeichnung Submit hinzufügst, fügt das Plugin deinem Crowdin-Enterprise-Projekt nur einen String 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 Enterprise 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 Enterprise geschehen soll, wenn du verknüpfte Strings aktualisierst, deren Text sich in Figma geändert hat. 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 Enterprise hinzugefügt wurden, wird dir eine Zusammenfassung der gesendeten Inhalte angezeigt. Diese Zusammenfassung enthält detaillierte Informationen zum Vorgang:

• Erstellte Strings: Die Anzahl der neu zu deinem Crowdin-Enterprise-Projekt hinzugefügten Strings.
• Aktualisierte Strings: Die Anzahl der vorhandenen Strings in Crowdin Enterprise, die aktualisiert wurden.
• Verknüpfte Strings: Die Anzahl der vorhandenen Strings in Crowdin Enterprise, die mit Elementen in Figma verknüpft wurden.
• Verknüpfte Figma-Elemente: Die Gesamtzahl der Figma-Elemente, die mit Strings in Crowdin Enterprise verknüpft wurden. Diese Zahl kann höher sein als Verknüpfte Strings, wenn mehrere Elemente mit einem einzelnen String verknüpft wurden.
• Erstellte Screenshots: Die Anzahl der neu zu Crowdin Enterprise hochgeladenen Screenshots.
• 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. In the Strings tab, click .
4. Überprüfe im angezeigten Dialog die Liste der Strings.
5. Click next to the needed string and click Add plurals.
6. Fülle im angezeigten Dialog die Felder für jede Pluralform aus und klicke auf Speichern. Abhängig von der Quellsprache des verbundenen Crowdin-Enterprise-Projekts kann es eine unterschiedliche Anzahl von Pluralformen geben, die du angeben musst.
7. Sobald alle benötigten Strings ausgewählt und konfiguriert sind, klicke auf Weiter.
8. Wähle die gewünschten Optionen und die Datei in Crowdin Enterprise aus, zu 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.).

Weitere Informationen findest du unter Pluralformen.

ICU-Platzhalter für Quellstrings konfigurieren

Wenn du ICU-Zeichenketten in deinem Design verwendest, kannst du die Werte der Platzhalter festlegen. Nachdem du solche Zeichenketten zu Designs hinzugefügt hast, werden sie in einer formatierten Ansicht mit den vorkonfigurierten Werten angezeigt.

Sobald du den benötigten ICU-String aus Crowdin Enterprise 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. Klicke beim gewünschten ICU-String auf .
4. Klicke auf Platzhalter festlegen.
5. Gib die gewünschten Werte für die Platzhalter des ICU-Strings ein.
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.

Einstellungen für das Schlüsselnamensmuster

Um das Hinzufügen von Strings aus Figma zum Crowdin-Enterprise-Projekt zu vereinfachen, kannst du das gewünschte Schlüsselnamensmuster für die Quellstring-IDs festlegen. Das Crowdin-Plugin für Figma schlägt anhand des ausgewählten Musters String-IDs für neue Strings vor. Beim Hinzufügen neuer Quellstrings kannst du die vorgeschlagene ID jederzeit nach deinen Vorstellungen bearbeiten.

Die Schlüsselbenennung wird im Bereich String-Standardeinstellungen separat für die Registerkarten Strings und Variablen konfiguriert. Um das Schlüsselnamensmuster auszuwählen, gehe wie folgt vor:

1. Öffne das Crowdin-Plugin für Figma.
2. Beginne damit, den Inhalt an Crowdin zu senden:
   • Über die Registerkarte „Strings“: Wähle die benötigten Textelemente aus und klicke auf .
   • Über die Registerkarte „Variablen“: Wähle die benötigten Variablensammlungen aus und klicke auf An Crowdin senden.
3. In the appeared dialog, click in the upper right corner, above the string list.
4. Wähle im Abschnitt Muster für Schlüsselnamen die gewünschte Option aus dem Dropdown-Menü aus und klicke auf Anwenden. Das Plugin generiert die String-Schlüssel in der Liste entsprechend dem ausgewählten Muster neu.

Neben den vorhandenen Mustern kannst du auch ein eigenes Muster konfigurieren. Um ein benutzerdefiniertes Muster zu verwenden, wähle im Dropdown-Menü die Option Benutzerdefiniertes Benennungsmuster für Schlüssel und gib dein Muster im Feld Benutzerdefiniertes Benennungsmuster für Schlüssel an. Gib [% in das Feld ein, um die verfügbaren Platzhalter anzuzeigen.

Die verfügbaren Platzhalter hängen von der Registerkarte ab. Die Registerkarte Strings erstellt Schlüssel aus den Namen von Seite, Frame und Element (z. B. [%page].[%frame].[%element]), während die Registerkarte Variablen Schlüssel aus den Namen von Sammlung, Gruppe und Variable erstellt (z. B. [%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.

Getaggte Screenshots zu Crowdin hochladen

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 beim Bearbeiten einer mit Textfeldern in Designs verknüpften Crowdin-Enterprise-Zeichenkette mit der Option Screenshots aktualisieren die Screenshots aktualisieren.

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

1. Öffne das Crowdin-Plugin für Figma.
2. Wähle einen oder mehrere Frames mit den verknüpften Strings aus.
3. In the Strings tab, click Send tagged screenshots to Crowdin to upload screenshots for selected frames.

Weitere Informationen findest du unter Screenshots.

Strings in der Vorschau anzeigen

Zeige Übersetzungen aus Crowdin Enterprise für die in den Designs verwendeten Zeichenketten 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

Um Strings in der Vorschau anzuzeigen, die mit Übersetzungen gefüllt werden, gehe wie folgt vor:

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 Zeichenfolgen

Du kannst Strings im Tab Strings nach verschiedenen Kriterien filtern, z. B. nach Datei oder Verknüpfungsstatus. Click to open the filter side panel. 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.

Lokalisierung von Marketingvisualisierungen

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

Einschränkungen

Die Registerkarte „Seiten“ und einige andere Plugin-Einstellungen sind bei der Arbeit mit stringbasierten Projekten möglicherweise nicht verfügbar.

Texte zur Übersetzung an Crowdin senden

Du kannst Text zur Übersetzung entweder aus ausgewählten oder aus allen Frames einer Figma-Datei senden. Die Übersetzer arbeiten mit diesen Texten in der Listenansicht und nutzen die Designs als zusätzlichen Kontext für eine noch höhere Übersetzungsqualität.

In Crowdin Enterprise wird ein Stammordner 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).

Wenn die Quelldateien in Ihr Crowdin Enterprise-Projekt hochgeladen werden, können Sie Mitarbeiter einladen, sie zu übersetzen und Korrektur zu lesen.

Weitere Informationen findest du unter Übersetzungsstrategien.

Übersetzungen aus Crowdin nach Figma hochladen

Du kannst Texte zwischen Figma und Crowdin-Enterprise-Projekten jederzeit synchronisieren, um die übersetzte Version 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 zeigt den Übersetzungsstatus der Dateien an, die sich speziell im Stammordner figma-plugin deines Crowdin-Enterprise-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. Die neu hochgeladenen übersetzten Versionen überschreiben die zuvor hochgeladenen Versionen nicht. Du kannst übersetzte Kopien, die du nicht mehr benötigst, jederzeit löschen.

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.

Wenn die neu hochgeladenen übersetzten Versionen die zuvor hochgeladenen Versionen überschreiben sollen, öffne die Einstellungen des Plugins und aktiviere Vorhandene Übersetzungen überschreiben.

Plugin mit Figma Buzz verwenden

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 einer Variablensammlung enthält der Standardmodus den Quelltext, und jede Zielsprache erhält ihren eigenen Modus. Das Plugin sendet die Werte des Standardmodus als Quellstrings an Crowdin Enterprise 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. Farb-, Zahlen- und boolesche Variablen, Bibliotheksvariablen, erweiterte Sammlungen und Werte, die Aliase für andere Variablen sind, werden übersprungen.

An eine Variable gebundene Textebenen können weiterhin über die Registerkarte Strings als separate Strings gesendet werden, ihr Text ist in der String-Liste jedoch schreibgeschützt. Das Anzeigen von Übersetzungen auf der aktuellen Seite ändert diese nicht. Verwende daher Vorschau auf duplizierter Seite, um den übersetzten Text zu sehen.

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. Variablen, die bereits mit einem Crowdin-Enterprise-String verknüpft sind, werden mit gekennzeichnet. Du kannst ihre Verknüpfung genauso wie bei Textelementen aufheben. Du kannst den Schlüssel und den Kontext jedes Strings einzeln bearbeiten oder oberhalb der Liste auf klicken, um dasselbe String-Standardeinstellungen-Panel wie im Tab Strings zu öffnen. Dort kannst du das Benennungsschema für Schlüssel und die Max. Längenkorrektur (%) konfigurieren kannst.
5. Klicke auf Weiter und wähle die gewünschten Optionen aus (dieselben wie beim Hinzufügen von Quellstrings aus Figma zu Crowdin). Da Variablennamen als Schlüssel dienen, solltest du Strings nach Schlüssel statt nach Text vergleichen aktivieren.
6. Wähle im Dropdown-Menü Datei die Datei in Crowdin Enterprise aus, der du die Strings hinzufügen möchtest, und klicke auf An Crowdin senden. Die Schaltfläche wird verfügbar, sobald eine Datei ausgewählt wurde.

Wenn du die Option Screenshots senden auswählst, erstellt das Plugin Screenshots als Referenz für Übersetzer aus den Textebenen auf der aktuellen Seite, die die gesendeten Variablen verwenden.

Die Upload-Zusammenfassung zeigt dieselben Details wie für Quellstrings.

Übersetzungen mit Modi synchronisieren

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

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.

Für jede ausgewählte Sprache erstellt oder aktualisiert das Plugin in den ausgewählten Sammlungen einen Modus, der nach dem Crowdin-Sprachcode benannt ist (z. B. uk, zh-CN), und füllt ihn mit Übersetzungen. 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

Auch bevor die Übersetzungen abgeschlossen sind, kannst du mit der Pseudolokalisierung testen, ob deine Anwendung für die Lokalisierung bereit ist. Mit dieser Funktion kannst du simulieren, wie die Benutzeroberfläche deiner Anwendung in verschiedenen Sprachen aussehen wird, um zu prüfen, ob die Quellstrings vor Beginn der Projektlokalisierung angepasst werden sollten.

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-Enterprise-Strings mit Textelementen verknüpft sind, bevor du die Pseudolokalisierung generierst.

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 Enterprise hochlädst, bevor du die Pseudolokalisierung generierst.

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: Hinzufügen neuer Strings zu Crowdin Enterprise, Verknüpfen von Strings, Senden von Screenshots, Vorschau von Übersetzungen, Bearbeiten, Ausblenden oder Löschen von Strings sowie die Registerkarte 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. In the Strings tab, click Filter strings and select Show strings linked to selected text elements.
5. Select the needed text element on the frame and hover over the icon in the string list to view all needed information (i.e., key, context, file it’s stored in, labels) about this particular string.
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.

Fehlerbehebung

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 Enterprise 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 Enterprise 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.

Zum Beispiel:

• 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 den Schriftwechsel erst nach dem Hochladen von Screenshots aus Figma zu Crowdin Enterprise, 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.