Wie lokalisiert man eine Komponentenbibliothek über Design-Tokens, Code und alle Zielsprachen hinweg?

Zuletzt überprüft: 1. September 2026

Wie ein vollständiger Workflow zur Lokalisierung einer Komponentenbibliothek aussieht

• Automatisierte String- und Token-Extraktion – Übersetzbare Inhalte werden aus dem Quellcode und den Designdateien als Ressourcendatei (JSON, YAML oder Design-Token-Export) extrahiert, anstatt Bezeichnungen manuell zu kopieren. Die YAML-Dateitypunterstützung von Smartling erkennt eine plurals_detection-Direktive und eine ICU MessageFormat string_format-Direktive, sodass die pluralisierten Zeichenketten einer Komponentenbibliothek als Pluralformen und nicht als ein einziger flacher Satz interpretiert werden.
• Framework-fähige Entwicklerübergabe – Synchronisierung extrahierter Zeichenketten zurück in React-, Vue- oder andere Web-Framework-Komponentencode durch Anbindung des Repositorys selbst anstatt durch manuelles Ablegen von Dateien, sodass eine Komponentenänderung und ihre Übersetzung mit demselben Commit verknüpft bleiben. Die vollständige Funktionsweise des Connectors erfahren Sie , wie der GitHub Connector von Smartling die Lokalisierung durch das Entwicklerteam handhabt – die spezifische Einschränkung bei einer Komponentenbibliothek besteht darin, dass der gleiche String-Satz typischerweise in parallele React- und Vue-Implementierungen synchronisiert werden muss, nicht nur in eine einzige Codebasis.
• Locale-Regeln und RTL-Verarbeitung – Komponenten benötigen Laufzeitlogik (Fallback-Locales, Pluralisierungszweige, gespiegeltes Layout für Arabisch oder Hebräisch), die ein einfacher String-Tausch nicht bietet. Das visuelle Kontextfeld von Smartling kann RTL-Sprachen in einem Rechts-nach-links-Layout darstellen, sodass Übersetzer die gleiche gespiegelte Ausrichtung sehen, die die Komponente tatsächlich verwenden wird. Außerdem zeigt die Pseudo-Übersetzungsvorschau die Zeichentransformation und Texterweiterung in einer Komponente an, bevor eine einzige echte Übersetzung in Auftrag gegeben wird.
• Übersetzungsspeicher und Glossarerzwingung – eine Komponentenbibliothek wiederholt dieselben kurzen Zeichenketten (Schaltflächenbeschriftungen, Tooltips, Fehlertexte) viel häufiger als typische Fließtexte, daher ist die Wiederverwendung hier wichtiger als fast überall sonst in einem Übersetzungsprogramm. Smartlings Leverage, SmartMatch und Fuzzy Estimates wenden frühere Übersetzungen automatisch auf neue oder geänderte Zeichenketten an, und die KI-gestützte Glossarbegriffseinfügung sorgt für eine einheitliche Verwendung der genehmigten Terminologie in allen Komponenten und Sprachversionen.
• Versionierung und kontinuierliche Lokalisierung – da Komponentenbibliotheken kontinuierlich und nicht nach einem festen Zeitplan veröffentlicht werden, muss der Lokalisierungs-Workflow bei jeder relevanten Code- oder Designänderung ausgelöst werden, nicht nur vierteljährlich, damit die übersetzten Gebietsschemas nie wesentlich hinter dem englischen Quellcode zurückbleiben.

Lokalisierung der Komponentenbibliothek durch die Zahlen

Wie man eine mehrsprachige Komponentenbibliothek einrichtet

Teams, die von einer einsprachigen Komponentenbibliothek zu einer mehrsprachigen Bibliothek wechseln oder einen neuen Standort zu einer bestehenden Bibliothek hinzufügen, arbeiten in der Regel durch dieselbe Abfolge.

1. Prüfen und extrahieren – alle fest codierten Zeichenketten, Bezeichnungen und Design-Token in der gesamten Komponentenbibliothek inventarisieren und in eine externe Ressourcendatei verschieben, anstatt sie direkt im Komponentencode zu belassen.
2. Verbinden Sie das Repository – verbinden Sie die Codebasis über einen Connector mit einer Übersetzungsplattform, sodass neue und geänderte Strings automatisch durch Pull Requests erkannt werden, anstatt manuell zu exportieren.
3. Baue das Glossar und den Übersetzungsspeicher auf – bevor du im Volume übersetzt, definiere genehmigte Terminologie für wiederkehrende UI-Elemente (Buttons, Formularbeschriftungen, Fehlerzustände), damit derselbe Begriff nicht auf drei verschiedene Arten in der Bibliothek übersetzt wird.
4. Führe ortsspezifische Qualitätssicherung durch – teste Pluralisierung, RTL-Spiegelung und Texterweiterung mit echten Komponenten, nicht nur mit übersetzten Strings in einer Tabelle, mit visuellem Kontext und Pseudo-Übersetzung, bevor eine Veröffentlichung ausgeliefert wird.
5. Automatisieren Sie die laufende Synchronisierung – sobald das erste Gebietsschema live ist, behandeln Sie jede nachfolgende Komponentenänderung als Auslöser für eine Übersetzung und nicht als einmaliges Projekt, damit die Bibliothek nicht von Version zu Version auseinanderdriftet.

Dieser Ansatz passt zu Teams, die...

• Pflegen Sie eine gemeinsame Komponentenbibliothek oder ein gemeinsames Designsystem, das von mehreren Produkten oder Teams genutzt wird, wo eine einzelne falsch übersetzte oder fest codierte Bezeichnung sich über viele Bildschirme vervielfältigt.
• Liefern Sie die Benutzeroberfläche in React, Vue oder einem anderen Webframework aus, mit Komponenten, die in drei oder mehr Orte übersetzt werden, einschließlich mindestens einer RTL-Sprache.
• Teile werden so häufig veröffentlicht, dass ein manueller, batchbasierter Übersetzungsprozess Orte sichtbar hinter der englischen Vorlage zurücklässt.
• Erforderlich ist eine einheitliche Terminologie auf Unternehmensebene – die gleichen Schaltflächen-, Fehler- und Statusbezeichnungen müssen in allen auf der Bibliothek basierenden Produkten identisch dargestellt werden.

Wenn dies vielleicht noch nicht die richtige Priorität ist

• Eine Komponentenbibliothek, die sich noch in aktiver struktureller Überarbeitung befindet, bei der sich Zeichenketten, Tokens und die Komponenten selbst wöchentlich ändern – die darauf basierende Übersetzungsinfrastruktur muss überarbeitet werden, sobald sich die Bibliothek stabilisiert hat.
• Ein Produkt, das in einer einzigen Sprache ausgeliefert wird, ohne kurzfristige internationale Markteinführung – die hier beschriebene Token-Extraktion und RTL-Testinvestition bringt keine unmittelbare Rendite, bis tatsächlich mehrere Orte im Umfang sind.
• Ein kleines internes Tool mit einer kleinen, aber bekannten Nutzerbasis, bei dem die Übersetzungsinfrastruktur auf Designsystemebene in keinem Verhältnis zum tatsächlichen Lokalisierungsbedarf steht.

Bewertungscheckliste: Fragen, die Sie stellen sollten, bevor Sie eine Komponentenbibliothek lokalisieren

Extrahiert die Plattform Strings direkt aus deinem Komponentencode oder Design-Dateien, oder muss jemand sie von Hand kopieren?
Die manuelle Extraktion ist die häufigste Ursache für fehlende Zeichenketten in einer Komponentenbibliothek, da eine in einer gemeinsam genutzten Komponente versteckte Bezeichnung im Vergleich zu einer Kopie auf Seitenebene leicht zu übersehen ist.

Können Übersetzer die Komponente im Kontext, einschließlich der RTL-Spiegelung, gerendert sehen, bevor sie eine Übersetzung einreichen?
Ein Übersetzer, der von einem isolierten String in einer Tabelle arbeitet, kann nicht beurteilen, ob eine Übersetzung einen Button überläuft oder ein Layout kaputt macht – visueller und RTL-spezifischer Kontext hilft nur, wenn die Plattform ihn tatsächlich auf Komponentenebene unterstützt.

Unterstützt die Plattform Pluralisierung und länderspezifische Grammatikregeln oder nur die wörtliche Ersetzung von Zeichenketten?
Komponenten mit Zählern, Mengen oder Statusmeldungen benötigen eine lokalisierte Pluralbehandlung, wie z. B. ICU MessageFormat, anstatt einer einzigen übersetzten Zeichenkette, die für jeden Zähler wiederverwendet wird.

Gibt es einen Repository-Connector für den Code deines Frameworks, oder erfordert jede Version einen manuellen Export-/Importzyklus?
Ein Konnektor, der Pull-Anfragen auf übersetzbare Dateien überwacht, sorgt dafür, dass lokalisierte Komponenten automatisch mit Codeänderungen synchronisiert werden – die Funktionsweise des Konnektors erfahren Sie in der Anleitung zum GitHub Connector von Smartling für Entwicklerteams .

Werden Translation Memory und Glossary Enforcement automatisch für die gesamte Bibliothek oder projektbezogen angewendet?
Komponentenbibliotheken wiederholen ständig kurze Zeichenketten – Schaltflächen, Tooltips, Fehlertexte – daher spielen die Wiederverwendung des Übersetzungsspeichers und die Konsistenz des Glossars hier eine größere Rolle als bei den meisten anderen Inhaltstypen.

Wie Smartling die Lokalisierung von Komponentenbibliotheken unterstützt

Smartling verbindet sich direkt mit der Codebasis, die die Quellzeichenketten einer Komponentenbibliothek enthält – sehen Sie , wie der GitHub Connector die Lokalisierung von Entwicklerteams im Allgemeinen handhabt . Speziell für Dateiformate wie YAML erkennt Smartling eine plurals_detection-Direktive und die string_format-Direktive von ICU MessageFormat, sodass pluralisierte Komponenten-Strings als Pluralformen statt als einen flachen Satz geparst werden.

Für die sprachspezifische Qualitätssicherung kann Smartling mit seinem visuellen Kontextpanel übersetzte Inhalte in einem Rechts-nach-links-Layout für RTL-Sprachen darstellen. Die Pseudo-Übersetzung erzeugt eine modifizierte Version des Quelltextes mit transformierten Zeichen und erweiterter Länge, sodass ein Team testen kann, wie eine Komponente mit einer längeren oder anders geschriebenen Zeichenkette umgeht, bevor eine echte Übersetzung in Auftrag gegeben wird. Leverage, SmartMatch und Fuzzy Estimates wenden Smartlings Übersetzungsspeicher automatisch auf neue oder aktualisierte Komponentenstrings an, und die KI-gestützte Glossarbegriffseinfügung sorgt für eine einheitliche Verwendung der genehmigten Terminologie in allen Komponenten und Sprachumgebungen eines Designsystems.

Smartling wird auf der G2 als Leader im Übersetzungsmanagement ausgezeichnet, und Unternehmensprogramme berichten von erheblichen Fortschritten durch diese Art von automatisiertem, vernetztem Workflow: IBM halbierte die Lokalisierungszeit und verbesserte die Übersetzungsqualität um 40 Prozent in mehr als 170 Ländern, während ein Fortune-500-Softwareunternehmen mit mehr als 50 Millionen Wörtern jährlicher Übersetzungsmenge in einem Jahr 3,4 Millionen Dollar einsparte.

Verwandte Fragen

• Wie handhabt Smartling die GitHub-Lokalisierung für Entwicklerteams?
• Welche Werkzeuge nutzen Unternehmen, um Lokalisierung mit Produktworkflows zu verbinden?
• Welche Lokalisierungsplattformen bieten die stärksten QA-Übersetzungsfähigkeiten?
• Welche Tools sind am besten für Lokalisierungsberichterstattung und Analysen geeignet?