{"id":47811,"date":"2026-05-29T14:17:27","date_gmt":"2026-05-29T11:17:27","guid":{"rendered":"https:\/\/typetype.org\/de\/?p=47811"},"modified":"2026-06-01T16:31:27","modified_gmt":"2026-06-01T13:31:27","slug":"figma-typography","status":"publish","type":"post","link":"https:\/\/typetype.org\/de\/blog\/figma-typography\/","title":{"rendered":"Typografie in Figma: Variablen, Tokens und Design-Systeme"},"content":{"rendered":"\n
\"Cover<\/figure>\n\n\n\n

Typografie in Figma bedeutet mehr als nur die Auswahl einer Schrift aus einem Dropdown-Men\u00fc. Im Interface-Design ist Text ein vollwertiges Element des Produkts: Er erkl\u00e4rt, leitet, warnt, hilft dabei, Daten zu vergleichen und Entscheidungen zu treffen. Daher ist es in Figma nicht nur wichtig, einzelne Elemente anzupassen, sondern ein vollst\u00e4ndiges System zu etablieren.<\/p>\n\n\n\n

Je gr\u00f6\u00dfer ein Projekt wird, desto teurer wird typografisches Chaos. Auf einer kleinen Landingpage lassen sich noch ein paar \u00dcberschriften manuell anpassen. In einer App mit Hunderten von Bildschirmen, mehreren Plattformen, verschiedenen Themen und Lokalisierungen funktioniert dieser Ansatz jedoch schnell nicht mehr. Ein Designer \u00e4ndert die Schriftgr\u00f6\u00dfe einer Beschriftung, ein anderer erstellt einen lokalen Stil, ein Dritter passt die Zeilenh\u00f6he manuell an \u2014 und nach einem Monat wei\u00df das Team nicht mehr, welche Werte tats\u00e4chlich systemrelevant sind. Ein systematischer Ansatz zur Typografie in Figma ist besonders wichtig: Er hilft nicht nur dabei, ein sch\u00f6nes Layout zu erstellen, sondern sorgt auch daf\u00fcr, dass das Design in einem realen Produkt stabil bleibt.<\/p>\n\n\n\n

In diesem Artikel erl\u00e4utern wir, wie man mit Typografie in Figma arbeitet, erkl\u00e4ren die grundlegenden Konzepte und zeigen praktische Beispiele.<\/p>\n\n\n\n

Was ist Typografie in Figma? <\/h2>\n\n\n\n

Typografie in Figma umfasst die Arbeit mit Text innerhalb eines Design-Layouts: das Erstellen von Text-Layer, die Auswahl der Schriftfamilie und des Schriftschnitts, das Anpassen der Gr\u00f6\u00dfe und mehr. Auf der grundlegenden Ebene verwaltet der Designer einzelne Layeren. Auf der systematischen Ebene werden Regeln erstellt, die in allen Layouts verwendet und an die Entwicklung \u00fcbergeben werden k\u00f6nnen.<\/p>\n\n\n\n

Im UI\/UX-Design existiert Text selten isoliert. Daher muss Typografie in Figma nicht nur die Frage \u201eWie sieht der Text aus?\u201c beantworten, sondern auch \u201eWelche Rolle spielt der Text im Interface?\u201c.<\/p>\n\n\n\n

Warum ist Typografie im UI\/UX-Design wichtig<\/h3>\n\n\n\n

Gute Typografie macht ein Interface verst\u00e4ndlicher. Der Nutzer erkennt schneller, wo sich \u00dcberschriften, Haupttexte, Handlungsaufforderungen, Hinweise oder Warnungen befinden. Ein korrekt eingerichtetes typografisches System hilft dabei, eine visuelle Hierarchie ohne unn\u00f6tige Ablenkung zu schaffen.<\/p>\n\n\n\n

Wird die Typografie zuf\u00e4llig gestaltet, kann das Interface selbst bei einer guten Rasterstruktur und hochwertigen Komponenten unordentlich wirken. Zum Beispiel k\u00f6nnen zwei \u00e4hnliche Beschriftungen mit nur 1 px Unterschied den Eindruck von Instabilit\u00e4t erwecken. Der Nutzer bemerkt oft nicht, was genau nicht stimmt, nimmt das Produkt aber als weniger zuverl\u00e4ssig wahr.<\/p>\n\n\n\n

Im UI\/UX-Design ist Typografie direkt mit der Benutzerfreundlichkeit verkn\u00fcpft. Je einfacher der Text zu lesen ist, desto geringer ist die kognitive Belastung. Je stabiler die Rollen sind, desto schneller findet sich der Nutzer zurecht. Daher ist ein typografisches System in Figma keine rein dekorative Komponente, sondern ein integraler Bestandteil der Produktlogik.<\/p>\n\n\n\n

Grundlegende M\u00f6glichkeiten zur Arbeit mit Text in Figma <\/h3>\n\n\n\n

In Figma k\u00f6nnen Text-Layer erstellt, die Schriftfamilie und der Schnitt, die Gr\u00f6\u00dfe, der Zeilenabstand, der Buchstabenabstand, der Absatzabstand, der Absatz-Einzug und andere Parameter eingestellt werden. Figma unterst\u00fctzt au\u00dferdem Textstile, die es erm\u00f6glichen, eine Gruppe typografischer Parameter zu speichern und wiederzuverwenden.<\/p>\n\n\n\n

\"Bedienfeld<\/figure>\n\n\n\n

Ein weiteres wichtiges Feature ist die Arbeit mit variablen Schriften. Im Gegensatz zu statischen Schriften, bei denen der Designer feste Schnitte wie Regular oder Bold ausw\u00e4hlt, bieten variable Schriften einen breiteren Bereich an Einstellungen f\u00fcr Achsen wie Breite, Gewicht, Neigung und andere Parameter, sofern diese im Schriftdateiformat hinterlegt sind.<\/p>\n\n\n\n

Die Rolle von Schriften in Interfaces <\/h3>\n\n\n\n

Die Schrift im Interface gibt dem Produkt seine Stimme. Eine neutrale Groteskschrift im Haupttext hilft dabei, das System ruhig, funktional und universell zu gestalten. Eine charakteristischere Schrift in Akzenten tr\u00e4gt zur Wiedererkennbarkeit der Marke bei. Eine variable Schrift kann Flexibilit\u00e4t bieten, wenn es notwendig ist, Parameter in verschiedenen Kontexten zu steuern.<\/p>\n\n\n\n

F\u00fcr Interfaces ist es wichtig, nicht einfach \u201eeine sch\u00f6ne Schrift\u201c auszuw\u00e4hlen, sondern eine Schriftfamilie, die in realen Interface-Szenarien zuverl\u00e4ssig funktioniert. Es muss \u00fcberpr\u00fcft werden, wie es bei kleinen Gr\u00f6\u00dfen, Zahlen, W\u00e4hrungssymbolen, Interpunktion, Sprachunterst\u00fctzung und in Tabellen, Buttons und langen Texten aussieht. In unserem Blog haben wir bereits ausf\u00fchrlich erkl\u00e4rt, was der Unterschied zwischen einer Schrift und einem Typeface ist<\/a> und warum es wichtig ist, die Logik der Schriftfamilie zu verstehen.<\/p>\n\n\n\n

Wenn ein Projekt auf das UI fokussiert ist, sollte man nach Schriftfamilien suchen, die gute Lesbarkeit auf Bildschirmen bieten, mit vorhersagbaren Schnitten und einem ausreichenden Bereich an Stilen. Im TypeType-Katalog<\/a> kann man nach Schriften nach Kategorien und Anforderungen suchen, wie z. B. Grotesken, Textschriften, Schriften f\u00fcr Interfaces, Webdesign, Branding und Apps.<\/p>\n\n\n\n

Wie arbeitet man mit Typografie in Figma<\/h2>\n\n\n\n

Im Folgenden gehen wir auf die wichtigsten Arbeitsschritte ein. <\/p>\n\n\n\n

Erstellen einer TextLayer <\/h3>\n\n\n\n

Eine TextLayer wird mit dem Text-Werkzeug erstellt. Der Designer kann auf die Leinwand klicken und mit der Eingabe von Text beginnen oder den Bereich ziehen, um die Blockbreite festzulegen. Die erste Methode eignet sich f\u00fcr kurze Beschriftungen und \u00dcberschriften. Die zweite Methode ist praktischer f\u00fcr Abs\u00e4tze, Karten, Beschreibungen und andere Elemente, bei denen Zeilenumbr\u00fcche wichtig sind.<\/p>\n\n\n\n

\"Erstellen<\/figure>\n\n\n\n

Nach dem Erstellen der Layer sollte sofort ihre Funktion definiert werden. Handelt es sich um eine \u00dcberschrift, einen Haupttext, eine Warnung, einen Button-Text, einen Link oder eine Fehlermeldung? Dieser Ansatz hilft, chaotische Layeren zu vermeiden. Wenn der Designer immer manuell Parameter ausw\u00e4hlt, entstehen schnell viele \u00e4hnliche, aber nicht identische L\u00f6sungen im Projekt.<\/p>\n\n\n\n

In Interfaces ist die TextLayer oft Teil einer Komponente oder eines automatischen Layouts. Zum Beispiel sollte der Text eines Buttons auf die L\u00e4nge des Labels reagieren, der Hilfstext muss sich korrekt innerhalb eines Eingabefelds verhalten, und der Titel einer Karte sollte sich beim \u00c4ndern der Breite korrekt umbrechen. Daher ist Typografie in Figma eng mit Layout verkn\u00fcpft.<\/p>\n\n\n\n

Auswahl von Schriften, Typefaces und Schriftfamilien <\/h3>\n\n\n\n

Figma erm\u00f6glicht es, sowohl lokal installierte Schriften als auch Webfonts auszuw\u00e4hlen. Im Interface w\u00e4hlt der Designer die Schriftfamilie und den entsprechenden Schnitt aus.<\/p>\n\n\n\n

\"Dropdown-Liste<\/figure>\n\n\n\n

F\u00fcr Produktdesigns ist es in der Regel besser, sich auf Schriftfamilien zu st\u00fctzen, die eine gute Lesbarkeit auf Bildschirmen bieten, mehrere Strichst\u00e4rken und ein vorhersehbares Verhalten bei kleinen und gro\u00dfen Schriftgr\u00f6\u00dfen aufweisen. Wenn das Projekt w\u00e4chst, ist es ratsam, nicht eine beliebige Schrift zu w\u00e4hlen, sondern eine Schriftfamilie mit klarer Logik bei Gewichtungen und Stilen.<\/p>\n\n\n\n

Einstellung von Schriftgr\u00f6\u00dfe, Gewicht, Zeilenh\u00f6he und Tracking<\/h3>\n\n\n\n

Die grundlegende Typografie-Einstellung in Figma basiert auf vier Parametern: Schriftgr\u00f6\u00dfe, Schriftgewicht, Zeilenh\u00f6he und Tracking. Die Gr\u00f6\u00dfe steuert die visuelle Hierarchie, das Gewicht setzt Akzente und schafft Kontraste, der Zeilenabstand sorgt f\u00fcr Lesbarkeit, und das Tracking beeinflusst die Dichte und den Charakter des Textes.<\/p>\n\n\n\n

Eine detaillierte Erkl\u00e4rung zu Tracking und Zeilenh\u00f6he finden Sie hier<\/a>.<\/p>\n\n\n\n

Im Interface-Design ist es besonders wichtig, mit Tracking vorsichtig umzugehen: Bei kleinen Gr\u00f6\u00dfen verschlechtert zu viel Raum oder zu geringe Dichte die Lesbarkeit. F\u00fcr l\u00e4ngere Texte ist es ratsam, mit neutralen Werten zu beginnen und Anpassungen nur bei tats\u00e4chlicher Notwendigkeit vorzunehmen.<\/p>\n\n\n\n

Es ist auch sinnvoll, sich an zus\u00e4tzlichen Einstellungen zu orientieren: Absatzabst\u00e4nde, Absatz-Einz\u00fcge, Open-Type Features sowie Vertical Trim. Diese Aspekte geh\u00f6ren nicht mehr zur \u201eersten Ebene\u201c der Typografie, jedoch machen genau diese Details ein Interface pr\u00e4ziser und professioneller. Zum Beispiel hilft der Abstand zwischen Abs\u00e4tzen, das Tempo langer Texte zu steuern, w\u00e4hrend Open-Type Features die Nutzung von tabellarischen Zahlen, stilistischen S\u00e4tzen, Ligaturen oder alternativen Zeichens\u00e4tzen erm\u00f6glichen, sofern die Schrift dies unterst\u00fctzt.<\/p>\n\n\n\n

\"Konfiguration<\/figure>\n\n\n\n

Stile und typografische Skalen in Figma<\/h2>\n\n\n\n

Sobald ein Projekt mehrere Bildschirme umfasst, wird das manuelle Einstellen von Textwerten nicht mehr effizient. Textstile und typografische Skalen helfen dabei, das System zu fixieren: Welche Textlevels existieren, welche Parameter gelten f\u00fcr jedes Level und wo werden sie angewendet?<\/p>\n\n\n\n

Erstellung einer typografischen Skala<\/h3>\n\n\n\n

Eine typografische Skala ist ein durchdachtes System von Gr\u00f6\u00dfen und Abst\u00e4nden f\u00fcr verschiedene Textebenen, wie zum Beispiel Display, H1, H2, H3, Body L, Body M, Caption. In Figma dienen Textstile dazu, diese Skala festzulegen und sie konsistent in allen Layouts zu verwenden. In Figma werden Textstile verwendet, um die typografische Skala innerhalb des Designs zu definieren und einheitlich anzuwenden.<\/p>\n\n\n\n

In der Praxis sollte eine gute Skala nicht zu fragmentiert sein. Wenn eine Datei 15 fast identische Textgr\u00f6\u00dfen enth\u00e4lt, deutet dies eher auf Chaos als auf Flexibilit\u00e4t hin. F\u00fcr die meisten Interface-Systeme reicht ein kompaktes Set an Rollen: 1\u20132 Display-Ebenen, 2\u20133 \u00dcberschriften, 1\u20132 Textgr\u00f6\u00dfen f\u00fcr den Haupttext und 1\u20132 zus\u00e4tzliche Stile. Je klarer die Skala ist, desto leichter l\u00e4sst sie sich vom Team verwalten. Hier geht es weniger um \u201esch\u00f6n\u201c, sondern mehr um die Steuerbarkeit des Interfaces. In Figma bilden Textstile und ein konsistenter Satz von Eigenschaften die Grundlage daf\u00fcr.<\/p>\n\n\n\n

\"Tabelle<\/figure>\n\n\n\n

Ein Beispiel f\u00fcr eine grundlegende Skala im Interface:<\/p>\n\n\n\n