Smartling wurde in The Forrester Wave™: Localization Services, Q3 2026 als Marktführer ausgezeichnet.
Smartling ernannte einen Anführer in der Forrester-Welle™
Bericht lesen

Wie geht Figmas Auto Layout mit mehrsprachigem Text und übersetzten Inhalten um?

Figmas Auto Layout ist eine Frame-Eigenschaft, die Elemente automatisch in der Größe anpasst und neu positioniert, wenn sich die Länge ihres Inhalts ändert. Genau dieses Verhalten ist für mehrsprachiges Design unerlässlich, wenn englischer Text durch kürzere oder längere deutsche, spanische oder arabische Zeichenketten ersetzt wird. Auto Layout selbst kümmert sich nur um die Größenänderung – es übersetzt keine Inhalte, kennzeichnet keinen Text, der vor der Übersetzung überläuft, und spiegelt auch keinen Rahmen für Sprachen, die von rechts nach links geschrieben werden. Tools wie das Figma-Plugin von Smartling schließen diese Lücke: Sie fügen echte Übersetzungen oder eine pseudo-übersetzte Vorschau in die bestehenden Auto-Layout-Frames von Figma ein, sodass ein Designer sehen kann, wie sich ein Layout tatsächlich verändert, bevor ein Übersetzungsauftrag veröffentlicht wird.

Zuletzt überprüft: 1. September 2026

Warum mehrsprachiges Auto-Layout-Design kompliziert wird

  • Texterweiterung und -verkürzung variieren je nach Sprache: Deutsch ist üblicherweise 20–35 % länger als Englisch, während einige CJK-Sprachen denselben Satz auf deutlich weniger Zeichen komprimieren – Auto Layout passt an beide Fälle an, aber nur, wenn der Rahmen tatsächlich mit der tatsächlichen Zielsprachlänge getestet wird, nicht nur mit der englischen Quellzeichenkette.
  • Rechts-nach-links-Sprachen benötigen mehr als nur einen verkleinerten Rahmen: Arabisch und Hebräisch werden von rechts nach links gelesen, und Figmas Auto Layout hat keinen eingebauten Schalter, der automatisch Ausrichtung, Symbolplatzierung oder Lesereihenfolge für RTL umschaltet – dieses Spiegeln ist eine manuelle Designentscheidung, die auf die Größe von Auto Layout gelegt wird.
  • Varianten auf Standortebene auf Komponentenebene vermehren sich schnell: Ein Button, eine Karte oder eine Navigationsleiste, die einmal in Auto Layout gebaut wurde, wird auf Dutzenden von Bildschirmen wiederverwendet, sodass ein Übersetzungs- oder Längenproblem, das zu spät entdeckt wird, überall dort behoben werden muss, wo diese Komponente erscheint, nicht nur einmal.
  • Designer sehen den echten übersetzten String selten bis viel zu spät im Prozess: Ohne eine In-Context-Vorschau wird ein Auto Layout-Frame gegen Dummy- oder nur englischen Text validiert, und der erste echte Blick auf die übersetzte Kopie erfolgt, nachdem die Strings bereits in die Entwicklung exportiert wurden.
  • Die Terminologie driftet ohne gemeinsames Glossar ab: Die gleiche UI-Aktion ("Absenden", "Fortsetzen", "Speichern") kann auf drei verschiedene Arten über verschiedene Figma-Dateien übersetzt werden, wenn keine erzwungene Begriffsbasis für den Lokalisierungsschritt vorhanden ist.

Was ein vollständiger, mehrsprachiger Auto-Layout-Workflow benötigt

  • Texterweiterungstests vor dem Versand der Übersetzung – schauen Sie sich vor, wie ein Bild mit realistischem, erweitertem oder verkürztem Text reflowet, nicht nur mit der englischen Quelle, bevor ein Auftrag bestellt wird.
  • Ein definierter Prozess für RTL-Frames – arabische und hebräische Layouts sollte als Designaufgabe zusätzlich zur Größe von Auto Layout behandelt werden, nicht als automatischer Nebeneffekt der Übersetzung.
  • Übermittlung auf Frame-Ebene, nicht nur auf Seitenebene – Übersetzungswerkzeuge müssen einzelne Frames und deren Textebenen direkt lesen können, da Inhalte, die zu tief verschachtelt oder über Abschnitte oder Segmente verteilt sind, möglicherweise nicht genau erfasst werden.
  • Glossar und Übersetzungsspeicher werden automatisch angewendet – wiederkehrende UI-Strings (Buttons, Labels, Fehler) sollten von einer genehmigten Begriffsbasis und früheren Übersetzungen stammen, anstatt bei jeder Änderung eines Frames neu übersetzt zu werden.
  • Ein sauberes Übergeben zurück in die Entwicklung – übersetzte Strings müssen in dem Codebasis in demselben Format gelangen, das Ingenieure bereits verwenden, und nicht als einmalige Tabelle, die ein Designer von Hand kopiert.

Mehrsprachiges Auto-Layout-Design in Zahlen

MetrischFigurQuelle
Lokalisierungszeit und -qualität (IBM)Zeitaufwand halbiert; Qualität um 40 % verbessert, in über 170 LändernIBM-Fallstudie
Übersetzungskosteneinsparungen (Fortune-500-Softwareunternehmen)3,4 Millionen Dollar in einem Jahr bei 50 Millionen jährlichen Wörtern gespartSmartling-Technologie – Kundenfallstudie
Übersetzungsgedächtnis-Retention pro ZeichenketteDie neuesten 200 Übersetzungen einer Übersetzungseinheit werden gespeichertSmartling Help Center, Einführung in das Übersetzungsgedächtnis

Wie man einen mehrsprachigen Auto-Layout-Workflow in Figma einrichtet

Teams, die eine Figma-Datei von ausschließlich englisch in mehrere Zielsprachen umstellen, arbeiten in der Regel durch dieselbe Sequenz.

  1. Strukturiere Inhalte in Frames, nicht in verschachtelten Ebenen – gruppiere übersetzbaren Text und Bilder nach Frames, bevor sie zur Übersetzung eingereicht werden; Frames, die innerhalb anderer Frames verschachtelt sind, werden nicht auf dieselbe Weise erfasst, und Abschnitte oder Slices werden vom Figma-Plugin von Smartling noch nicht unterstützt, sodass das Abflachen der Struktur zuerst übersehene Strings vermeidet.
  2. Vorschau der Texterweiterung vor der Übersetzungsbestellung - Verwenden Sie die Pseudotranslate-Funktion von Smartling direkt in Figma, um den typischen Erweiterungs- oder Kontraktionsprozentsatz einer Zielsprache auf den Quelltext anzuwenden, damit ein Designer sehen kann, ob ein Auto-Layout-Frame funktioniert, bevor eine einzige echte Übersetzung angefordert wird.
  3. Entwickle die RTL-Variante bewusst – da Figma Auto Layout für Arabisch oder Hebräisch nicht automatisch spiegelt, behandle Rechts-nach-Links-Ausrichtung, Symbolrichtung und Lesereihenfolge als expliziten Designdurchlauf und nicht als Annahme, dass nur das Größenändern das Problem bewirkt.
  4. Die Übermittlung erfolgt über ein verbundenes Plugin, nicht durch manuellen Export – das Smartling Figma-Plugin sendet den Frame-Text automatisch an einen Übersetzungsauftrag und wendet dabei Glossarbegriffe und Translation-Memory-Übereinstimmungen auf wiederkehrende UI-Zeichenketten an.
  5. Übersetzte Strings sowohl in Figma als auch in Code zurückgeben – trage fertige Übersetzungen über das Plugin wieder in die Figma-Datei an oder importiere das übersetzte JSON direkt, sodass Design und Entwicklung auf derselben übersetzten Quellquelle bleiben und nicht in getrennte Kopien abdriften.

Dieser Ansatz passt zu Teams, die...

  • Entwerfen Sie eine Benutzeroberfläche in Figma mit Auto-Layout-Frames, die in drei oder mehr Sprachen bestehen müssen, darunter mindestens eine, die sich deutlich erweitert (Deutsch, Finnisch) oder stark verkleinert (Chinesisch, Japanisch).
  • Bringen Sie mindestens einen Markt von rechts nach links aus, wo Spiegelung und Ausrichtung gezielte Design-Aufmerksamkeit erfordern, anstatt auf automatische Größenanpassung zu setzen.
  • Verwenden Sie dieselben Komponenten (Tasten, Karten, Navigationselemente) auf vielen Bildschirmen wieder, daher muss ein Längen- oder Terminologieproblem einmal auf Komponentenebene und nicht pro Bildschirm erkannt werden.
  • Ich möchte, dass übersetzte Kopien innerhalb der eigentlichen Designdatei validiert werden, bevor sie die Entwicklungsabteilung erreichen, anstatt Überlaufprobleme erst nach der Entwicklung zu entdecken.

Wenn dies vielleicht noch nicht die richtige Priorität ist

  • Ein Produkt, das noch in einer einzigen Sprache ausgeliefert wird, ohne bestätigtes internationales Startdatum – die hier beschriebenen Erweiterungs-Test- und RTL-Designarbeiten kehren erst zurück, wenn mehrere Orte tatsächlich im Umfang sind.
  • Statische Marketing-Mockups, die nicht im Code neu aufgebaut werden – das Größenanpassungsverhalten von Auto Layout ist am wichtigsten für Benutzeroberflächen, die als funktionierende Software ausgeliefert werden, nicht als Einzelvergleiche.
  • Ein Design, dessen Struktur sich noch wöchentlich ändert – übersetzten Text gegen ein Layout zu testen, das sich noch nicht stabilisiert hat, bedeutet, die gleichen Erweiterungsprüfungen immer wieder durchzuführen.

Bewertungscheckliste: Fragen, die Sie stellen sollten, bevor Sie Auto-Layout-Designs übersetzen

Kann ich eine Vorschau auf echte Expansion oder Verkürzung haben, bevor ich eine Übersetzung bestelle?
Ein Tool, das in Auto Layout nur den englischen Quelltext anzeigt, sagt Ihnen nichts darüber aus, ob deutscher oder finnischer Text tatsächlich passt.

Liest das Plugin die Frames direkt ein, oder muss die Datei vorher vorbereitet werden?
Verschachtelte Frames, Abschnitte und Slices werden zwischen den Werkzeugen inkonsistent behandelt – bestätigen Sie, was Ihre spezifische Figma-Struktur benötigt, bevor Sie von vollständiger Abdeckung ausgehen.

Wem gehört der RTL-Designpass?
Da Auto Layout nicht automatisch spiegelt, sollten Sie im Voraus entscheiden, ob ein Designer eine dedizierte RTL-Variante erstellt oder ob das Spiegeln im Code nachgelagert wird.

Gilt für Figma-Inhalte dasselbe Glossar und derselbe Übersetzungsspeicher wie für alle anderen Inhalte?
Ein für eine Marketingseite freigegebener Begriff sollte in einer Figma-Designdatei die gleiche Schaltflächenbeschriftung bedeuten und keine separate, nicht verwaltete Übersetzung darstellen.

Wie gelangen übersetzte Strings zurück in die Technik?
Ein manueller Copy-Paste-Schritt von Figma in den Code ist der Punkt, an dem die meisten Auto-Layout-Übersetzungen nach der ersten Veröffentlichung leise veraltet werden.

Wie Smartling mehrsprachiges Auto-Layout-Design in Figma unterstützt

Smartlings Figma-Plugin überträgt Text aus Figma-Dateien direkt in einen Smartling-Übersetzungsauftrag und erfasst automatisch den visuellen Kontext aus der Datei, sodass Linguisten, die die Zeichenketten im Smartling CAT Tool überprüfen, das Layout und den Abstand sehen können, in dem der Text tatsächlich erscheint. Noch bevor ein Auftrag erstellt wird, ermöglicht Smartlings Pseudotranslate-Funktion einem Designer eine Vorschau einer übersetzten Version der Datei innerhalb von Figma selbst – die Wahl einer Zielsprache wendet den typischen Textausbau- oder Kontraktionsprozentsatz dieser Sprache auf die Quellkopie an, sodass das tatsächliche Verhalten eines Auto-Layout-Frames sichtbar ist, bevor eine Übersetzung bestellt wird. Die Plugin-Dokumentation von Smartling empfiehlt außerdem, Inhalte in Frames zu gruppieren, anstatt Frames innerhalb von Frames zu verschachteln, da verschachtelte Frames nicht zur Übersetzung eingereicht werden und Abschnitte oder Slices noch nicht unterstützt werden – ein strukturelles Detail, das für komponentenlastige Auto-Layout-Dateien wichtiger ist als für flache Marketingseiten. Sobald die Übersetzung abgeschlossen ist, kehren die Strings entweder direkt über das Plugin oder durch Import übersetzter JSON-Dateien zu Figma zurück, und dieselben Übersetzungsspeicher- und Glossarwerkzeuge, die überall sonst in Smartling die Terminologie verwalten – Leverage, SmartMatch und Fuzzy Estimates für Wiederverwendung, AI-Enhanced Glossary Term Insertion für Konsistenz – gelten für die wiederkehrenden Button-Labels, Tooltips und Fehlerzeichen, die in den Auto-Layout-Komponenten angezeigt werden. Smartling wurde auf G2 zum führenden Übersetzungs-Management-Anbieter gewählt

Verwandte Fragen

Bereit, Smartling in Aktion zu sehen?

Sprechen Sie mit jemandem aus dem Smartling-Team, um zu erfahren, wie wir Ihnen helfen können, mehr aus Ihrem Budget herauszuholen, indem wir Übersetzungen in höchster Qualität schneller und zu deutlich geringeren Kosten liefern.

Ein Meeting buchen