CSS-Textstile in Figma: line-height, letter-spacing und Formatierung pro Abschnitt

Kurze Antwort

CSS-Textstile lassen sich auf Texteigenschaften in Figma abbilden, aber die Modelle unterscheiden sich. Die Zeilenhöhe ist in Figma Auto, Pixel oder ein Prozentwert der Schriftgröße, während CSS normal, eine einheitenlose Zahl, eine Länge oder einen Prozentwert erlaubt. Beim letter-spacing addiert CSS Platz zum Standardabstand der Schrift, und Figma wendet ihn auf eine ganze Ebene oder auf eine Auswahl an. Inline-Formatierung wie Fettschrift, Links und Farbe wird zu getrennten Abschnitten (Runs) innerhalb einer einzigen Textebene. Diese Seite zeigt, wie sich alles abbilden lässt und was du nach einem Import prüfen solltest.

Line height: Auto, px und Prozent in Figma, vier Formen in CSS

Was Figma speichert

Standardmäßig setzt Figma die Zeilenhöhe auf Auto, berechnet aus der Standardzeilenhöhe der Schrift. Du kannst auch einen festen Wert in Pixeln (px) oder einen Prozentwert der Schriftgröße setzen. Beim Wechsel zwischen fest und Prozent rechnet Figma den Wert auf den nächsten Pixel um, daher kann ein Hin und Zurück einen Wert um einen Bruchteil eines Pixels verschieben.

Plugin-Code sieht dieselben drei Optionen: Eine LineHeight ist { value, unit: "PIXELS" }, { value, unit: "PERCENT" } oder { unit: "AUTO" }, wie es die Figma-Plugin-Dokumentation definiert.

Was CSS sagen kann

Die MDN-Referenz zu line-height nennt vier Formen:

Die Tabelle vergleicht den Wert, nachdem der Browser ihn aufgelöst hat. Sie ist kein Versprechen, wie ein bestimmtes Werkzeug umrechnet.

Warum Vererbung wichtig ist

Eine einheitenlose Zahl wird bei jedem Element, das sie erbt, neu berechnet, und zwar aus der Schriftgröße dieses Elements. Eine Länge oder ein Prozentwert wird zuerst in eine absolute Länge umgerechnet, und Nachkommen erben diese feste Länge. Das Beispiel von MDN macht es greifbar: Ein h1 mit 30px und line-height: 1.1 ergibt 33px, aber derselbe h1, der 1.1em von einem 15px großen Elternelement erbt, ergibt 16.5px.

Zwei Überschriften können im Browser identisch aussehen und trotzdem zu verschiedenen Zahlen aufgelöst werden. Lies den aufgelösten Wert in den Dev-Tools, nicht die Regel, von der du glaubst, dass sie gilt.

Was du prüfen solltest

• Vergleiche die aufgelöste Zeilenhöhe einer Überschrift und eines Fließtextabsatzes mit dem Wert in Figma.
• Rechne damit, dass Auto von normal abweicht, wenn sich die Schrift ändert, denn beide hängen von der Schrift ab.
• Stimmen die Zahlen, aber die Zeilen sehen anders aus, prüfe zuerst die Schrift. Notiere dir außerdem den aufgelösten Wert und die Quelle der Vererbung, damit du später nachvollziehen kannst, warum zwei ähnliche Absätze verschieden gesetzt sind.

Letter spacing: zusätzlicher Platz, kein Ersatz

In CSS legt letter-spacing zusätzlichen Zeichenabstand fest, zusätzlich zum Standardabstand. Das Schlüsselwort normal unterscheidet sich von 0: Es erlaubt dem Browser, den Abstand anzupassen, um Text zu justieren. Prozentwerte beziehen sich auf die Breite des Leerzeichens der Schrift, und negative Werte sind erlaubt, können aber vom Browser begrenzt werden.

Zwei Folgen sind für Designdateien wichtig:

• Ligaturen werden abgeschaltet. Ist letter-spacing ungleich null, wenden Browser keine optionalen Ligaturen wie liga und clig an. Text, der bei 0 eine Ligatur zeigt, zeigt sie unter Umständen nicht mehr, sobald ein Tracking gesetzt ist.
• Sehr negative Werte lassen Buchstaben überlappen. MDN warnt, dass große negative Werte Wörter unlesbar machen können. Prüfe enge Überschriften daher mit dem Auge.

In Figma kannst du den Zeichenabstand für eine ganze Textebene oder für eine Textauswahl anpassen. Der Hilfeartikel gibt einen Umrechnungshinweis: Eine Einheit Tracking (1/1000em) entspricht ungefähr 0.001em letter-spacing in CSS. Wählst du Text mit unterschiedlichen Zeichenabständen aus, skaliert Figma den Zeichenabstand proportional.

Wähle zum Testen ein Label in Großbuchstaben und einen Fließtextabsatz. Labels haben meist positives Tracking, deshalb zeigt sich eine Abweichung dort zuerst.

Eine Textebene, mehrere Abschnitte

Ein Abschnitt (Run) ist eine Folge von Zeichen mit demselben Stil. CSS erzeugt Runs überall dort, wo ein Inline-Element den Stil ändert: ein <strong>, ein <a>, ein <span style="color: ...">. In Figma kann eine einzige Textebene viele Runs enthalten.

Die Plugin-API von Figma stellt jeden Run als StyledTextSegment bereit, mit eigenem fontName, fontSize, fontWeight, textDecoration, textCase, lineHeight, letterSpacing, fills und hyperlink, dazu paragraphSpacing. Deshalb kann ein Absatz ein fettes Wort, eine verlinkte Wendung und eine farbige Zahl enthalten, ohne zu vier Ebenen zu werden.

Gemischte Werte

Sind sich die Zeichen einer Ebene bei einer Eigenschaft uneinig, hat Figma keinen einzelnen Wert zum Anzeigen. Die Plugin-Dokumentation sagt, dass du immer damit rechnen solltest, dass eine Texteigenschaft gemischte Werte haben kann, und die API liefert den Sonderwert figma.mixed. In der Oberfläche zeigt das Feld Mixed. Wähle einen kleineren Bereich aus, um den Wert jedes Runs zu sehen.

Manche Eigenschaften gelten ebenfalls für Auswahlen. Textdekoration (unterstrichen, durchgestrichen) und Groß- und Kleinschreibung (Großbuchstaben, Kleinbuchstaben, Capitalize, Kapitälchen) lassen sich auf ausgewählten Text anwenden, und die Änderung der Schreibung ist nicht destruktiv. Der Absatzabstand ist ein Pixelwert.

Schriften entscheiden, was deine Textstile bewirken

Die Zeilenhöhe Auto und die Breite der Glyphen kommen aus der Schrift. Ist die Schrift in der Datei nicht die Schrift der Seite, können alle obigen Zahlen stimmen, und der Text bricht trotzdem anders um. Die Plugin-Dokumentation von Figma weist darauf hin, dass fehlende Schriften in echten Dateien sehr häufig sind und dass eine nicht geladene Schrift nicht dasselbe ist wie eine fehlende Schrift.

Ersetzt ein Import eine Schrift, behandle Zeilenhöhe und letter-spacing als ungeprüft, bis die Schrift behoben ist. In UnHTML erscheint jede Ersetzung im Importbericht. Die Mechanik erklärt wie die Schriftersetzung in Figma funktioniert, Zahlen dazu findest du unter Schriftersetzung bei Web-zu-Figma-Importen.

Was du nach einem Import prüfen solltest

Beginne beim größten Text und arbeite dich nach unten:

1. Überschriften. Vergleiche aufgelöste Zeilenhöhe und aufgelösten letter-spacing mit Figma. Enge Überschriften verraten beides.
2. Fließtext. Ein einheitenloses line-height wie 1.6 sollte als 160% oder als entsprechender px-Wert erscheinen.
3. Labels in Großbuchstaben. Prüfe Tracking und Groß- und Kleinschreibung.
4. Inline-Runs. Klicke in einen Absatz mit Link oder fettem Wort und bestätige, dass der Bereich und nicht die ganze Ebene den Stil trägt.
5. Schriften. Löse zuerst ersetzte Schriften auf und prüfe dann die Schritte 1 bis 3 erneut.
6. Umbrüche. Bricht Text anders um, liegt es meist an der Breite oder am Auto Layout, wie in flexbox wird zu auto layout beschrieben.

Stand 2026 sind dies die dokumentierten Figma-Verhaltensweisen. UnHTML erzeugt bearbeitbare Ebenen, keinen pixelgenauen Klon, nimm diese Liste also als echten Prüfdurchgang.

Fazit

Zeilenhöhe, letter-spacing und Runs haben in CSS und Figma jeweils ein anderes Modell. Vergleiche den aufgelösten CSS-Wert mit dem Figma-Wert, rechne damit, dass sich Auto und normal mit der Schrift verschieben, und prüfe Bereiche statt ganzer Ebenen. Beginne bei den Schriften, denn die meisten Textabweichungen entstehen dort. Gehe dabei Schritt für Schritt vor: erst die Schrift, dann die Zeilenhöhe, dann den Zeichenabstand und zuletzt die einzelnen Runs. So erkennst du bei jeder Abweichung sofort, an welcher Stelle sie entstanden ist, und musst nicht an mehreren Eigenschaften gleichzeitig drehen.

Häufig gestellte Fragen

Warum sieht die importierte Zeilenhöhe anders aus als auf der Seite?

Die CSS-Eigenschaft line-height kann normal, eine einheitenlose Zahl, eine Länge oder ein Prozentwert sein, und Figma speichert Auto, Pixel oder einen Prozentwert der Schriftgröße. Das Ergebnis hängt von der Schrift und davon ab, wie der Wert auf der Seite vererbt wurde. Vergleiche den aufgelösten Wert in den Dev-Tools mit dem Wert in Figma.

Wird letter-spacing eins zu eins umgerechnet?

Nicht nach Augenmaß. Das letter-spacing in CSS ist zusätzlicher Platz zum Standardabstand der Schrift, oft in em oder px angegeben. Der Tracking-Hinweis von Figma setzt 1/1000em Tracking mit 0.001em in CSS gleich. Prüfe den Wert an einer Beispielüberschrift.

Kann eine Textebene verschiedene Stile enthalten?

Ja. Eine Figma-Textebene kann mehrere Runs enthalten, jeder mit eigener Schrift, Größe, Zeilenhöhe, eigenem Zeichenabstand, eigener Dekoration und Farbe. Wähle einen Bereich aus, um einen einzelnen Run zu sehen oder zu ändern.

Was bedeutet Mixed in einem Textfeld?

Es bedeutet, dass die ausgewählten Zeichen für diese Eigenschaft keinen gemeinsamen Wert haben. Wähle einen kleineren Bereich aus, um jeden Wert zu sehen.