Der größte Engpass bei Internationalisierungsstrategien liegt normalerweise nicht im Code, sondern in der Übergabe. Ein schönes Figma-Design wird z. B. auf Englisch erstellt, die Entwickler setzen es um, und eine Übersetzung erfolgt nachträglich. Plötzlich sprengt Text in der finnischen Version die Navigationsleiste und das Layout wird in RTL-Sprachen gespiegelt.
Das Ergebnis: zusätzliche Entwicklungsstunden, vielleicht sogar ein hastiges Redesign.
Wer Figma für UI-Design verwendet, verfügt bereits über das richtige Werkzeug, um dieses Problem zu lösen. Figma Lokalisierung verlagert den Übersetzungsprozess in die Designphase, sodass Internationalisierungsprobleme erkannt werden können, bevor auch nur eine Zeile Code geschrieben wird.
Wann die Figma-Lokalisierung sinnvoll ist
Früher wurde die Lokalisierung bei Standardprozessen als Nebensache der Entwicklung betrachtet. Angesichts der aktuell verfügbaren Tools ist das jedoch ein Fehler. Durch die jüngsten Figma-Entwicklungen rund um neue Features und das robuste Plugin-Ökosystem wurde gezeigt, dass die Textverarbeitung nach links gerückt ist und nun eine zentrale Designfunktion darstellt. Figma-Designs werden lokalisiert, um das UI-Layout anhand echter Inhaltsanforderungen zu validieren, anstatt sich auf Annahmen zu verlassen.
Ein dedizierter Lokalisierungs-Ablauf innerhalb der Figma-Datei ermöglicht:
- Automatisierte String-Exporte
- Vorschau der Designs mit übersetztem Text anstelle von Lorem-Ipsum-Platzhaltern
- Einheitlichkeit über mehrere Sprachen hinweg
Arbeitsablauf optimieren
Um diesen Prozess effizient zu verwalten, muss die Lücke zwischen Canvas und Übersetzern überbrückt werden. Ein praktischer Ansatz:
1. Vorbereitung des Figma-Designs
Die Dateistruktur hat Priorität vor der Installation eines Lokalisierungs-Plugins. Ein robustes Template wird durch die Anwendung von Auto Layout auf jeden Frame und jede Textebene erstellt. Statische Elemente können beeinträchtigt werden, wenn die Textbreite durch eine Übersetzung erweitert wird. Figma unterstützt responsive Komponenten, die sich automatisch an die spezifische Sprachlänge anpassen.
2. Auswahl der richtigen Figma-Integration
Bei großen Datenmengen versagt die manuelle Dateneingabe. Daher sollte man sich nicht damit aufhalten, Übersetzungen in Excel-Dateien hin- und herzuschicken. Besser ist es, das Design über eine API mit einem Translation Management System (TMS) zu verbinden. Plattformen wie Lokalise, Phrase oder Crowdin bieten ein dediziertes Figma-Lokalisierungs-Plugin, um Quellstrings zum TMS hochzuladen, ohne die Oberfläche zu verlassen. Eine solche Konfiguration führt Inhalte nahtlos zurück zu Figma und verarbeitet Updates automatisch.
3. Synchronisierung und Übersetzung
Übersetzer können unmittelbar nach dem Export mit der Arbeit beginnen. Das TMS zeigt den Text neben visuellem Kontext an, wie etwa Screenshots, die vom Figma-Plugin generiert wurden. Sobald die Übersetzungen fertig sind, können sie direkt importiert werden, um die lokalisierten Varianten zu befüllen.
Erfolgsmethoden für die Lokalisierung mit Figma
Um das Team wirklich zu befähigen und lokalisierte Produkte mit weniger Reibung zu erstellen, sollten folgende technische Details beachtet werden:
- Key-Namen: Frühzeitig sollte eine Namenskonvention für Übersetzungs-Keys festgelegt werden. Wenn der Designer einen Key
button_1nennt und der Entwicklerhome_cta_loginerwartet, schlägt die Synchronisierung fehl. - Schriftarten: Es muss sichergestellt werden, dass die ausgewählte Schriftart alle Zielsprachen unterstützt. Ich habe schon mal erlebt wie wunderschöne Designs zusammenbrachen, weil die Schriftart keine thailändischen oder japanischen Zeichen unterstützte. Das muss nicht sein.
- Abstimmung zwischen Designern und Entwicklern: Das Lokalisierungs-Setup sollte als „single source of truth“ behandelt werden. Das String-Repository muss mit dem Design übereinstimmen.
Figma-Lokalisierung von Anfang an einplanen
Wenn Figma Lokalisierung als zentrale operative Anforderung behandelt wird, lässt sich technische Schuld vermeiden, da die Integration der Übersetzung ins Design Layout-Probleme sofort aufdeckt. Mit dem obigen Ansatz können Designs lokalisiert und die Übergabe optimiert werden. Entwickler erhalten ein verifiziertes UI anstelle eines fehlerhaften Mockups. Das Produkt wird von Tag eins an für eine mehrsprachige Nutzerbasis entwickelt.
