Adobe-XD-Plugin

Mit dem Crowdin for Adobe XD Plugin kannst du Texte aus Crowdin in deinen Designs verwenden und so Zeit für Designer und Entwickler sparen. Dabei kann es sich um Original- oder übersetzte Texte handeln. Bei Bedarf kannst du neue Texte hinzufügen (z. B. Dialogtitel oder Schaltflächenbeschriftungen) und sie an Übersetzer in Crowdin senden.

Anwendungsfälle

• Erstelle schnell mehrsprachige kreative Assets.
• Übersetze Mockups 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.
• Erstelle Quellstrings in deinen Designs und lade sie in dein Crowdin-Projekt hoch. Auf diese Weise können Entwickler hochgeladene Strings verwenden, wodurch sich die Entwicklungszeit verkürzt.
• Lade Screenshots mit Tags in dein Crowdin-Projekt hoch.

Installation

1. Melde dich bei Adobe XD an.
2. Gehe zu Plugins > Plugins durchsuchen….
3. Klicke auf Durchsuchen.
4. Verwende das Feld Alle Plugins durchsuchen, um das Plugin Crowdin for Adobe XD zu finden.
5. Klicke auf Installieren.

Konfiguration

Berechtigungen

Um die Adobe-XD-Integration einzurichten, benötigst du Manager- oder Besitzerberechtigungen im Crowdin-Projekt.

Anmeldedaten einrichten

Führe die folgenden Schritte aus, um deine Crowdin-Zugangsdaten in Adobe XD anzugeben:

1. Klicke im linken Bereich auf Plugins > Crowdin for Adobe XD.
2. Klicke auf .
3. Gib dein persönliches Zugriffstoken ein.
4. Klicke auf Speichern.

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 einen Tokennamen an und klicke auf Erstellen.

Projekt auswählen

Um das Crowdin-Projekt auszuwählen, mit dem du arbeiten möchtest, klicke auf das Dropdown-Menü und wähle ein Projekt aus der Liste aus. Später kannst du dasselbe Dropdown-Menü verwenden, um bei Bedarf zu einem anderen Projekt zu wechseln.

Wähle den jeweiligen Zweig aus, in den deine Inhalte hochgeladen werden. Wenn dein Crowdin-Projekt keine Branches hat, lasse dieses Feld leer.

UI-Lokalisierung

Verwende den Bereich Strings, wenn du die Benutzeroberfläche lokalisierst und mit deinen Entwicklungs- und Marketingteams an dynamischen Seiten arbeitest. In diesem Abschnitt kannst du Quelltexte aus Crowdin mit einem Klick zu deinen Designs in Adobe XD 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 Adobe XD verwenden

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Verwende im Bereich 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 aus, zu der du Text hinzufügen möchtest, und klicke auf den gewünschten String.

Nachdem du die Quelltexte aus Crowdin in deinen Designs verwendet hast, werden sie mit den Textfeldern verknüpft. Du kannst dann Übersetzungen in der Vorschau anzeigen für diese Texte in Adobe XD und Screenshots hochladen für sie in dein Crowdin-Projekt.

Du kannst einen einzelnen Crowdin-String mit einem oder mehreren Textfeldern in Adobe XD verknüpfen. Ein Textfeld kann jedoch nur mit einem einzigen Crowdin-String verknüpft werden. Wenn du ein Textfeld mit einer bestehenden Verbindung mit einem neuen Crowdin-String verknüpfst, wird die vorherige Verbindung beendet und eine neue Verbindung hergestellt. Wenn du die Verknüpfung eines Crowdin-Strings mit allen Textfeldern aufheben möchtest, mit denen er zuvor verknüpft war, klicke mit der rechten Maustaste auf das Verknüpfungssymbol neben dem gewünschten String.

Quellstrings aus Adobe XD zu Crowdin hinzufügen

Du kannst Strings hinzufügen, die bereits in den Designs verwendet werden, oder vollständig neue Strings erstellen und hinzufügen.

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Um die in den Designs verwendeten Zeichenketten hinzuzufügen, wähle das gesamte Artboard, mehrere Artboards oder die gewünschten Zeichenketten auf den Artboards aus. Alternativ kannst du diesen Schritt überspringen, wenn du einen neuen String hinzufügen möchtest.
3. Klicke im Bereich Strings auf .
4. Fülle im angezeigten Dialog die erforderlichen Felder aus.
5. (Optional) Um den Strings Labels hinzuzufügen, wähle sie abwechselnd im Dropdown-Menü Label aus und klicke auf Speichern.

Um dieselben Strings in mehrere Dateien in Crowdin einzufügen, wähle nacheinander die benötigten Dateien aus dem Dropdown-Menü Datei aus.

Deaktiviere die Option Ausgeblendete Elemente übertragen, wenn einige Zeichenflächen ausgeblendete Elemente enthalten, die nicht zu Crowdin hinzugefügt werden sollen.

Beim Hinzufügen mehrerer Strings kannst du Neue doppelte Texte mit einem einzelnen Crowdin-String verknüpfen auswählen. Das ist in folgenden Fällen nützlich:

• Wenn du mehrere Textfelder mit demselben Text hinzufügst, fügt das Plugin deinem Crowdin-Projekt nur einen String hinzu und verknüpft alle doppelten Textfelder damit.
• Wenn dein Crowdin-Projekt bereits einen String mit demselben Text enthält, den du aus den Designs hinzufügst, verknüpft das Plugin die Textfelder nur mit dem vorhandenen String und erstellt keinen neuen.

Hinzugefügte Strings werden in dein Crowdin-Projekt übertragen und außerdem in der Liste im Abschnitt Strings angezeigt. Du kannst die Strings jederzeit in derselben Liste bearbeiten oder löschen. Die entsprechenden Änderungen werden auch auf die Strings in deinem Crowdin-Projekt angewendet.

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 in deinem Design verwendest, kannst du die Werte seiner Platzhalter konfigurieren.

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Verwende im Tab Zeichenketten das Feld Suchen, um die gewünschte Kopie zu finden. Du kannst Strings nach Quelltext, String-ID oder Kontext suchen.
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 Senden, um die eingegebenen Platzhalter zu speichern.
7. Klicke auf String bearbeiten, um den Quellstringtext in den Designs zu aktualisieren.

Beim Anzeigen von Übersetzungen für ICU-Strings in Adobe XD werden diese ebenfalls in einer formatierten Ansicht angezeigt, wenn die Werte zuvor vorkonfiguriert wurden.

Einstellungen für das Schlüsselnamensmuster

Um das Hinzufügen von Strings aus Adobe XD zum Crowdin-Projekt zu vereinfachen, kannst du in den Plugin-Einstellungen das gewünschte Muster für die Benennung der Schlüssel für die Quellstring-IDs festlegen. Das Crowdin-Plugin für Adobe XD 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.

Um das Schlüsselnamensmuster auszuwählen, gehe wie folgt vor:

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Öffne die Einstellungen des Plugins.
3. Wähle im Bereich Benennungsmuster für Schlüssel die gewünschte Option im Dropdown-Menü aus.

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.

Getaggte Screenshots zu Crowdin hochladen

Achte beim Hinzufügen der in den Designs verwendeten Quellzeichenketten darauf, dass Screenshots senden ausgewählt bleibt. Das Crowdin-Plugin für Adobe XD lädt daraufhin 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 Adobe XD.
2. Wähle eine oder mehrere Zeichenflächen mit den verknüpften Strings aus.
3. Klicke im Bereich Zeichenketten auf , um Screenshots für die ausgewählten Artboards hochzuladen.

Weitere Informationen findest du unter Screenshots.

Strings in der Vorschau anzeigen

Zeige Übersetzungen aus Crowdin für die in den Designs in Adobe XD verwendeten Strings in der Vorschau an. Du kannst Übersetzungen in den neuen oder ursprünglichen Zeichenflächen in der Vorschau anzeigen. Bei der Vorschau von Übersetzungen in neuen Zeichenflächen kannst du sie mit den tatsächlichen Übersetzungen oder mit String-Schlüsseln für die weitere Verwendung durch Entwickler füllen.

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

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Wähle im Bereich Strings > Strings in der Vorschau anzeigen entweder In duplizierten Zeichenflächen in der Vorschau anzeigen oder In den aktuellen Zeichenflächen in der Vorschau anzeigen.
3. Wähle Mit Sprache erstellen aus.
4. Wähle die Zielsprache aus, für die du Übersetzungen in der Vorschau anzeigen möchtest. Du kannst auch Alle Sprachen auswählen.
5. Wähle den Inhalt aus, den du in Adobe XD in der Vorschau anzeigen möchtest. Wähle Alle Zeichenflächen oder Ausgewählte Zeichenflächen aus.

Um Strings mit Schlüsselnamen in der Vorschau anzuzeigen, gehe wie folgt vor:

1. Öffne das Crowdin-Plugin für Adobe XD.
2. Wähle im Bereich Strings > Strings in der Vorschau die Option Vorschau in duplizierten Zeichenflächen aus.
3. Wähle Mit Schlüsselnamen erstellen aus.
4. Wähle den Inhalt aus, den du in Adobe XD in der Vorschau anzeigen möchtest. Wähle Alle Zeichenflächen oder Ausgewählte Zeichenflächen aus.

Lokalisierung von Marketingvisualisierungen

Verwende den Bereich Übersetzung, um statische Seiten wie Broschüren und Banner zu lokalisieren. In diesem Abschnitt kannst du Texte mit Kontext für Übersetzer an Crowdin senden und übersetzte Versionen zurück zu Adobe XD hochladen.

Texte zur Übersetzung an Crowdin senden

Du kannst Text zur Übersetzung entweder von ausgewählten oder von allen Zeichenflächen einer Adobe-XD-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 wird ein Stammordner Adobe XD plugin erstellt. Er enthält einen Unterordner mit dem Namen deiner XD-Datei sowie HTML-Dateien für jede darin enthaltene Zeichenfläche. Dieser Ordner kann auch eine Datei free-text.html mit Texten enthalten, die nicht in einer der Zeichenflächen enthalten sind. Bei Bedarf kannst du die Inhaltssegmentierung in den Einstellungen des Plugins deaktivieren, damit lange Texte nicht in Sätze aufgeteilt werden.

Um Adobe-XD-Designs zur Übersetzung zu senden, gehe wie folgt vor:

1. Öffne die benötigte Adobe-XD-Datei.
2. Gehe zu Plugins > Crowdin for Adobe XD.
3. Wähle im Bereich Übersetzung > Texte an Crowdin senden den Inhalt aus, den du übersetzen möchtest. Wähle Alle Zeichenflächen oder Ausgewählte Zeichenflächen aus.

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 von Crowdin zu Adobe XD hochladen

Du kannst Texte zwischen Adobe XD und Crowdin-Projekten jederzeit synchronisieren, um die übersetzte Version in Adobe XD zu testen oder mehrsprachige Assets zu erstellen.

Um übersetzte Kopien zu Adobe XD hochzuladen, gehe wie folgt vor:

1. Öffne die benötigte Adobe-XD-Datei.
2. Gehe zu Plugins > Crowdin for Adobe XD.
3. Wähle im Bereich Übersetzung > Übersetzungen von Crowdin abrufen die Zielsprache aus, für die du Übersetzungen hochladen möchtest. Du kannst auch Alle Sprachen auswählen.
4. Wähle den Inhalt aus, dessen Vorschau du in Adobe XD anzeigen möchtest. Wähle Alle Zeichenflächen oder Ausgewählte Zeichenflächen aus.

Nach dem Hochladen von Übersetzungen zu Adobe XD enthält die geänderte Datei für jede Zielsprache eine separate Zeichenfläche 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 die neu hochgeladenen übersetzten Versionen die zuvor hochgeladenen Versionen überschreiben sollen, öffne die Einstellungen des Plugins und aktiviere Vorhandene Übersetzungen überschreiben.

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.

Sobald du deine Texte zur Übersetzung gesendet hast, kannst du die Pseudolokalisierung starten.

1. Öffne die benötigte Adobe-XD-Datei.
2. Gehe zu Plugins > Crowdin for Adobe XD.
3. Wähle im Bereich Pseudolokalisierung den Inhalt aus, den du mit der Pseudolokalisierung testen möchtest. Wähle Alle Zeichenflächen oder Ausgewählte Zeichenflächen aus.
4. Im angezeigten Dialog kannst du aus vordefinierten Voreinstellungen (Französisch, Kyrillisch, Chinesisch, Arabisch) wählen und die Einstellungen nach deinen Wünschen konfigurieren:
   • Längenkorrektur – ermöglicht es dir, Strings zu verlängern oder zu verkürzen, um zu sehen, ob die Benutzeroberfläche deines Produkts andere Sprachen korrekt verarbeitet. Da Übersetzungen in einigen Sprachen länger oder kürzer als die Quelltexte in deinem Projekt sein können.
   • Präfix/Suffix – ermöglicht das Hinzufügen von Sonderzeichen am Anfang und Ende jedes Strings.
   • Zeichenumwandlung – ersetzt englische Zeichen durch leicht erkennbare Versionen mit Akzenten, zufällige arabische Symbole oder chinesische Ideogramme, damit offensichtlich wird, ob es in deiner Anwendung hartcodierte Strings gibt.
5. Klicke auf Pseudolokalisieren.

Weitere Informationen findest du unter Pseudolokalisierung.