Design Tokens in Figma: Farben und Abstände mit Variables einmal festlegen

Das Team hat sich endlich auf einen dunklen Modus geeinigt. Dann öffnet jemand die Figma-Datei und findet 140 verschiedene Hex-Werte, verteilt auf rund sechzig Screens. Manche Buttons nutzen ein Blau aus einer alten Farbpalette, manche Karten einen Grauton, den niemand bewusst ausgewählt hat. Für den Dark Mode müsste jetzt jede Fläche von Hand umgefärbt werden, und beim nächsten Rebranding ginge das Spiel von vorn los.

Genau für dieses Problem gibt es Design Tokens. Und in Figma gibt es dafür ein passendes Werkzeug: Variables. Damit legst du Farben, Abstände und Radien einmal fest und nutzt sie überall, in Komponenten, auf Screens und im Code. Wechselst du einen Wert, ziehen alle Stellen nach. Brauchst du einen dunklen Modus, schaltest du um, statt neu zu zeichnen.

Dieser Artikel ist die praktische Fortsetzung zu Design Systems für kleine Teams. Dort ging es darum, warum Tokens am Anfang eines Systems stehen. Hier geht es darum, wie du sie in Figma konkret aufsetzt, ohne dich in Hunderten Variablen zu verlieren. Als Beispiel dient ein kleines Team, das eine Web-App zur Vereinsverwaltung baut: zwei Designende, drei Leute in der Entwicklung, ein Produkt, das bald einen dunklen Modus bekommen soll.

Kurz erklärt: Design Tokens und Figma Variables

Design Tokens sind benannte Werte für die kleinsten Gestaltungsentscheidungen. Statt #1D4ED8 steht im Design und im Code color-primary, statt 16 Pixel space-4. Der Name beschreibt, wofür ein Wert gedacht ist. Der Wert selbst steht nur an einer einzigen Stelle.

Figma bildet solche Tokens mit Variables ab. Eine Variable speichert genau einen Wert, der sich auf Eigenschaften im Design anwenden lässt. Laut Figma-Hilfe gibt es dafür sechs Typen: Color, Number, String und Boolean, dazu Timing und Easing für Animationen. Für ein Token-System brauchst du vor allem die ersten beiden. Color-Variablen speichern Farben, Number-Variablen Zahlen wie Abstände, Radien oder Schriftgrößen.

Drei Begriffe solltest du kennen, bevor es losgeht:

• Collection (Sammlung): ein Container für zusammengehörige Variablen. Pro Sammlung sind bis zu 5.000 Variablen möglich, was für jedes kleine Team mehr als genug ist.
• Mode (Modus): eine Spalte mit alternativen Werten für alle Variablen einer Sammlung. Typische Beispiele sind Hell und Dunkel, verschiedene Sprachen oder Gerätegrößen.
• Alias (Verweis): Eine Variable kann statt eines festen Werts auf eine andere Variable desselben Typs zeigen. So verweist color/text/default etwa auf gray/900. Ändert sich der Basiswert, ändert sich der Verweis automatisch mit.

Mit diesen drei Bausteinen lässt sich die bewährte Zwei-Ebenen-Struktur aus Basis-Tokens und semantischen Tokens direkt in Figma umsetzen. Was ein Design System insgesamt ausmacht, findest du im Glossar.

Was dein Figma-Tarif dazu sagt

Bevor du eine Struktur planst, lohnt ein Blick auf den eigenen Tarif. Variables selbst stehen laut Figma auf allen Plänen zur Verfügung. Die Unterschiede liegen in den Details, und die können deine Planung beeinflussen.

Im kostenlosen Starter-Plan kannst du Variablen anlegen und nutzen, aber keine zusätzlichen Modes. Mehrere Modus-Spalten setzen laut Figma-Hilfe einen Education- oder einen kostenpflichtigen Plan voraus. Außerdem gibt es im Starter-Plan keine Team-Bibliotheken, du kannst Variablen also nicht dateiübergreifend veröffentlichen. Dev Mode, die Ansicht für Entwicklerinnen und Entwickler, ist dort ebenfalls nicht verfügbar. Für ein Team, das ernsthaft mit Tokens arbeiten will, ist der Starter-Plan deshalb eher ein Testgelände.

Im Professional-Plan sind seit der Konferenz Schema 2025 bis zu zehn Modes pro Sammlung möglich, im Organization-Plan bis zu zwanzig. Für Hell und Dunkel, vielleicht noch einen Modus mit hohem Kontrast, reicht das locker. Bibliotheken lassen sich auf allen bezahlten Plänen veröffentlichen, wofür du einen Full Seat mit Bearbeitungsrechten in der Quelldatei brauchst. Dev Mode setzt einen Full Seat oder einen Dev Seat voraus.

Einige Funktionen sind dem Enterprise-Plan vorbehalten. Dazu gehört die REST-API für Variablen, mit der sich Tokens automatisch auslesen und schreiben lassen. Laut Entwicklerdokumentation braucht man dafür einen Full Seat in einer Enterprise-Organisation. Auch sogenannte Extended Collections, mit denen sich ein Kernsystem für mehrere Marken erweitern lässt, gibt es nur dort. Für ein kleines Team mit einem Produkt und einer Marke ist das selten ein Hindernis. Es bedeutet aber, dass der Abgleich mit dem Code auf kleineren Plänen über Export, Plugins oder Handarbeit läuft. Dazu später mehr.

Ob ihr mit Figma richtig aufgehoben seid oder ein anderes Werkzeug besser passt, beleuchtet der Vergleich Sketch vs Figma in 2026. Einen Überblick über Figma selbst gibt der Eintrag Figma in den Ressourcen.

Die Struktur: drei Sammlungen statt einer langen Liste

Der häufigste Fehler beim Einstieg ist eine einzige Sammlung mit allen Farben, die irgendwo im Projekt vorkommen. Das ist schnell gemacht, löst aber das eigentliche Problem nicht: Niemand weiß, welches Blau für Links gedacht ist und welches für Diagramme. Das Beispielteam entscheidet sich deshalb für drei Sammlungen.

Sammlung 1: Basis-Farben (Primitives)

Die erste Sammlung enthält die komplette Palette, nach Farbton und Helligkeit benannt: blue/100 bis blue/900, gray/50 bis gray/950, dazu Rot, Grün und Gelb für Statusmeldungen. Diese Sammlung hat nur einen Modus, denn ein Blau 600 bleibt ein Blau 600, egal ob es hell oder dunkel ist.

Der entscheidende Punkt: Basis-Farben sollen im Alltag niemandem im Farbwähler begegnen. Wer einen Button gestaltet, soll nicht zwischen 60 Farbtönen wählen müssen, sondern zwischen einer Handvoll sinnvoller Rollen. Deshalb versteckt das Team die Basis-Farben später über das Scoping (siehe unten) und blendet sie beim Veröffentlichen der Bibliothek aus. Figma bietet dafür im Bearbeitungsdialog einer Variable die Option „Hide from publishing“.

Sammlung 2: Semantische Farben mit Modes

Die zweite Sammlung beschreibt, wofür eine Farbe eingesetzt wird. Hier liegen Variablen wie color/text/default, color/text/muted, color/surface/default, color/surface/raised, color/border/strong, color/action/primary und color/feedback/danger. Jede davon ist ein Alias auf eine Basis-Farbe.

Diese Sammlung bekommt zwei Modes: Hell und Dunkel. In der Spalte Hell zeigt color/text/default auf gray/900 und color/surface/default auf Weiß. In der Spalte Dunkel ist es umgekehrt: Der Text zeigt auf gray/50, die Fläche auf gray/950. Komponenten nutzen ausschließlich diese semantischen Variablen. Damit kennt ein Button gar keine konkrete Farbe mehr, sondern nur noch seine Rolle.

So sieht der Unterschied im Alltag aus:

Vorher: Der primäre Button hat die Füllung #1D4ED8, der Text ist Weiß. Für den Dark Mode muss jemand jeden Button suchen und neu einfärben.

Nachher: Der Button nutzt color/action/primary und color/text/on-action. Für den Dark Mode wird nur festgelegt, auf welche Basis-Farben diese beiden Variablen im Modus Dunkel zeigen.

Sammlung 3: Abstände, Radien und Größen

Die dritte Sammlung enthält Number-Variablen. Das Beispielteam nutzt eine Abstandsskala auf Basis von 4 Pixeln: space/1 (4), space/2 (8), space/3 (12), space/4 (16), space/6 (24) und space/8 (32). Dazu kommen drei Radien, radius/sm, radius/md und radius/full, sowie eine Mindesthöhe für Bedienelemente.

Diese Sammlung braucht vorerst nur einen Modus. Wer später eine kompaktere Darstellung für Tabellen oder unterschiedliche Abstände für Smartphone und Desktop möchte, kann hier zusätzliche Modes anlegen. Wichtig ist, dass das Team diese Entscheidung bewusst trifft und nicht vorsorglich zehn Modes anlegt, die niemand pflegt.

Schritt für Schritt in Figma

Mit der Struktur im Kopf geht der Aufbau in Figma recht zügig. Die Variablen verwaltest du in einem eigenen Dialog, den du über die rechte Seitenleiste öffnest, wenn auf der Arbeitsfläche nichts ausgewählt ist.

Anlegen und gruppieren

Das Team beginnt mit der Basis-Sammlung und überträgt die Palette, die es bei einer vorherigen UI-Inventur festgelegt hat. Statt 140 Hex-Werte zu übernehmen, entstehen rund 40 Basis-Farben. Zusammengehörige Variablen fasst es in Gruppen zusammen, etwa alle Blautöne in einer Gruppe blue. In Figma markierst du dafür mehrere Variablen und wählst per Rechtsklick „New group with selection“. Gruppen lassen sich verschachteln und per Drag-and-drop umsortieren.

Danach folgt die semantische Sammlung. Beim Anlegen einer semantischen Variable trägst du als Wert keinen Hex-Code ein, sondern verknüpfst sie mit einer bestehenden Basis-Farbe. In der Tabelle steht dann der Name dieser Basis-Farbe statt eines Farbwerts. Für den Modus Dunkel legst du eine zweite Spalte an. Figma kopiert dabei die Werte der ersten Spalte, sodass du nur noch die Verweise anpassen musst, die sich wirklich ändern.

Scoping: weniger Auswahl, weniger Fehler

Scoping legt fest, bei welchen Eigenschaften eine Variable im Auswahlmenü erscheint. Laut Figma-Hilfe funktioniert das für Number-, Color- und String-Variablen. Eine Color-Variable lässt sich zum Beispiel auf Flächenfüllung von Frames, Füllung von Formen, Kontur, Textfarbe und Effekte beschränken. Eine Number-Variable lässt sich unter anderem auf Abstände in Auto Layout, Eckenradius, Breite und Höhe oder Schrifteigenschaften begrenzen.

Im Beispielteam sieht das so aus:

• color/text/* erscheint nur bei Textfarbe.
• color/surface/* erscheint nur bei Füllungen von Frames und Formen.
• color/border/* erscheint nur bei Konturen.
• space/* erscheint nur bei Abständen und Innenabständen in Auto Layout.
• radius/* erscheint nur beim Eckenradius.
• Die Basis-Farben erscheinen nirgends. Sie dienen nur als Ziel für Verweise.

Der Effekt ist im Alltag deutlich spürbar. Wer einer Textebene eine Farbe gibt, sieht im Farbwähler nicht mehr über fünfzig Einträge, sondern fünf Textfarben. Die Wahrscheinlichkeit, aus Versehen eine Flächenfarbe für Text zu nutzen, sinkt. Und neue Teammitglieder lernen die Struktur fast nebenbei.

Beschreibungen und Code-Namen

Jede Variable hat ein Beschreibungsfeld. Das Team nutzt es für einen kurzen Satz zum Einsatzzweck, etwa „Für Hinweistexte und Metadaten, nicht für Fließtext“. Diese Beschreibung erscheint beim Überfahren der Variable und erspart viele Rückfragen.

Außerdem lässt sich pro Variable ein Name für den Code hinterlegen, die sogenannte Code Syntax. Figma erlaubt einen Namen pro Plattform, also für Web, Android und iOS. Für das Web trägt das Team etwa var(--color-text-muted) ein. Entwicklerinnen und Entwickler sehen in Dev Mode dann genau den Namen, der auch im Code verwendet wird, statt einen von Figma umgewandelten Variablennamen.

Variables auf Komponenten anwenden

Sind die Variablen angelegt, geht es an die Komponenten. Laut Figma-Hilfe lassen sich Color-Variablen auf Füllungen, Farbverlaufspunkte, Konturen und Schattenfarben anwenden. Number-Variablen funktionieren unter anderem für Schriftgröße, Abstände, Innenabstände, Eckenradius, Breite und Höhe, Deckkraft und Konturstärke.

Das Beispielteam geht Komponente für Komponente vor, beginnend mit dem Button. Die Füllung wird mit color/action/primary verknüpft, die Textfarbe mit color/text/on-action, der Innenabstand in Auto Layout mit space/3 und space/4, der Eckenradius mit radius/sm. Danach folgen Eingabefeld, Karte, Hinweisbox und Dialog.

Eine Stolperfalle nennt die Figma-Hilfe ausdrücklich: Wer Innenabstand oder Abstand eines Auto-Layout-Frames direkt auf der Arbeitsfläche mit den Ziehgriffen verändert, löst die verknüpfte Number-Variable. Danach steht dort wieder ein fester Pixelwert. Gerade in Komponenten lohnt es sich deshalb, Abstände nur noch über die Seitenleiste zu ändern.

Modes an Frames und Seiten umschalten

Jetzt zeigt sich der eigentliche Vorteil. Ein Frame, eine Komponente oder eine ganze Seite lässt sich auf einen bestimmten Modus setzen. Standardmäßig steht jedes Objekt auf „Auto“ und übernimmt den Modus des übergeordneten Elements. Ist auch dort nichts festgelegt, greift Figma auf den Standardmodus der Sammlung zurück, also die Spalte ganz links.

Das Team dupliziert den Screen „Mitgliederliste“, setzt die Kopie auf den Modus Dunkel und sieht sofort das Ergebnis. Was nicht stimmt, fällt direkt auf: ein Icon, das noch eine feste Farbe hat, oder ein Schatten, der auf dunklem Grund verschwindet. Jede dieser Stellen ist ein Hinweis auf einen festen Wert, der noch durch eine Variable ersetzt werden muss.

Kontraste in jedem Modus prüfen

Ein Dark Mode ist nicht einfach eine umgedrehte Farbpalette. Jede Kombination aus Text und Hintergrund muss in beiden Modes genug Kontrast haben. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für Bedienelemente und grafische Objekte wie den Rahmen eines Eingabefelds mindestens 3:1.

Das Beispielteam legt dafür eine kleine Prüfseite an: eine Tabelle mit allen semantischen Textfarben auf allen Flächenfarben, einmal im Modus Hell und einmal im Modus Dunkel. Mit einem Kontrast-Plugin oder einem externen Prüfwerkzeug geht das Team die Kombinationen einmal durch. Ändert sich später eine Basis-Farbe, wiederholt es die Prüfung auf dieser einen Seite, statt sechzig Screens durchzusehen.

Styles bleiben trotzdem wichtig

Variables ersetzen Styles nicht, das stellt Figma in der eigenen Hilfe ausdrücklich klar. Der Unterschied: Eine Variable hält genau einen Wert. Ein Style bündelt mehrere Werte, die immer zusammen gelten. Ein Text-Style enthält Schriftfamilie, Größe, Schriftstärke und Zeilenhöhe in einem. Ein Effekt-Style kann mehrere Schatten kombinieren, ein Farb-Style einen Farbverlauf oder ein Bild.

Beides lässt sich kombinieren, und genau das empfiehlt sich. Das Beispielteam legt Text-Styles wie „Body“, „Body small“ und „Heading 2“ an. Schriftgröße und Zeilenhöhe in diesen Styles sind wiederum mit Number-Variablen verknüpft. Wer später eine eigene Typo-Skala für Smartphones möchte, kann einen Modus „Mobil“ anlegen, und die Text-Styles ziehen automatisch mit.

Als Faustregel gilt: Einzelne Werte, die sich je nach Kontext ändern, sind Variablen. Zusammengesetzte Gestaltungsentscheidungen, die als Einheit gedacht sind, sind Styles. Und Styles greifen, wo möglich, auf Variablen zurück.

Von Figma in den Code

Tokens entfalten ihren Wert erst, wenn Design und Code dieselben Namen und Werte nutzen. Dafür gibt es je nach Plan und Teamgröße mehrere Wege.

Dev Mode als Nachschlagewerk

Der einfachste Weg ist Dev Mode. Wer ein Element inspiziert, sieht dort nicht nur Werte, sondern die verknüpften Variablen. Im CSS-Code zeigt Dev Mode Variablen als Verweis mit Rückfallwert, etwa in der Form var(--color-text-muted, #4B5563). Ist eine Code Syntax hinterlegt, erscheint dieser Name. Figma unterstützt Code-Ausschnitte für Variablen laut Hilfe in CSS, SwiftUI und Compose.

Für ein kleines Team reicht das oft für den Anfang. Die Werte selbst landen dann von Hand in einer CSS-Datei mit Custom Properties. Wichtig ist eine feste verantwortliche Person, die neue oder geänderte Tokens nachträgt.

Export im DTCG-Format

Etwas robuster ist ein Export in eine Datei, aus der ein Build-Schritt die CSS-Variablen erzeugt. Als Format bietet sich das der Design Tokens Community Group (DTCG) an, einer Community-Gruppe beim W3C. Sie hat im Oktober 2025 die erste stabile Version ihrer Spezifikation veröffentlicht. Darin werden Tokens als JSON mit $value und $type notiert, Verweise stehen in geschweiften Klammern, etwa {color.gray.900}.

Figma hat auf der Konferenz Schema 2025 angekündigt, Variablen nativ in diesem Format zu importieren und zu exportieren. Laut Figma-Blog sollte die Funktion im November 2025 erscheinen, im Community-Forum berichtete der Figma-Support Anfang Dezember 2025 von einer schrittweisen Einführung. Prüfe deshalb im eigenen Konto, ob die Option im Variablen-Dialog verfügbar ist. Ist sie es nicht, erledigen zahlreiche Plugins aus der Figma Community denselben Job.

Aus der JSON-Datei erzeugt ein Werkzeug wie Style Dictionary oder ein kleines eigenes Skript die CSS-Variablen. Die Regel aus dem Design-Systems-Artikel gilt weiter: Es gibt genau eine Quelle, und jede Änderung beginnt dort. Ob das die Figma-Datei oder die JSON-Datei im Repository ist, entscheidet das Team. Für kleine Teams ist Figma als Quelle meist der pragmatischere Weg, solange der Export regelmäßig und nachvollziehbar passiert.

API und Automatisierung

Wer einen vollautomatischen Abgleich möchte, etwa einen nächtlichen Job, der Variablen aus Figma liest und einen Pull Request im Code-Repository erzeugt, braucht die REST-API für Variablen. Wie oben beschrieben, ist sie dem Enterprise-Plan vorbehalten. Für die meisten kleinen Teams ist das kein Verlust: Ein manueller Export nach jeder Änderung an den Tokens ist in wenigen Minuten erledigt.

Typische Stolperfallen

Ein paar Fehler tauchen in fast jedem Team auf, das mit Variables startet. Die meisten lassen sich mit wenig Aufwand korrigieren.

Zu viele Variablen auf einmal

Wer jede Farbe aus der Inventur als eigene Variable übernimmt, hat am Ende wieder 140 Einträge, nur diesmal mit Namen. Besser ist es, die Palette vorher zu reduzieren und mit den semantischen Rollen zu starten, die das Produkt wirklich braucht. Neue Variablen kommen hinzu, wenn es einen konkreten Bedarf gibt.

Komponenten nutzen Basis-Farben

Ein Button, der direkt mit blue/600 verknüpft ist, reagiert nicht auf den Modus Dunkel, denn die Basis-Sammlung hat keinen. Das Problem fällt oft erst beim Umschalten auf. Konsequentes Scoping verhindert es von vornherein, weil Basis-Farben gar nicht mehr im Farbwähler auftauchen.

Namen nach Aussehen statt nach Rolle

Eine Variable namens color/light-gray-bg ist im dunklen Modus plötzlich dunkelgrau. Der Name lügt dann. Semantische Variablen sollten deshalb beschreiben, wofür sie da sind, nicht wie sie aussehen: color/surface/subtle statt color/light-gray-bg.

Abgelöste Werte

Variablen gehen schneller verloren, als man denkt, etwa durch die Ziehgriffe in Auto Layout oder durch kopierte Elemente aus alten Dateien. Ein regelmäßiger Blick lohnt sich. Figma testet mit „Check designs“ zudem ein Werkzeug, das fest eingetragene Werte findet und passende Variablen vorschlägt. Laut Figma ist es bisher nur im Early-Access-Programm verfügbar und soll Organization- und Enterprise-Plänen offenstehen.

Modes für alles

Modes sind verlockend: Hell, Dunkel, Hoher Kontrast, Kompakt, Marke A, Marke B. Jeder zusätzliche Modus verdoppelt aber den Prüfaufwand für Kontraste und Zustände. Starte mit den Modes, die das Produkt heute braucht, und ergänze weitere erst, wenn ein konkretes Feature sie verlangt.

Fazit

Figma Variables machen Design Tokens im Alltag greifbar. Mit drei Sammlungen, also Basis-Farben, semantischen Farben mit Modes und Maßen, hat ein kleines Team in wenigen Tagen ein Fundament, das Dark Mode, Rebranding und neue Komponenten deutlich einfacher macht. Scoping hält die Auswahl übersichtlich, Beschreibungen und Code-Namen schlagen die Brücke zur Entwicklung.

Das Beispielteam hat am Ende kein perfektes System, aber eines, das funktioniert: Der Dark Mode entsteht durch Umschalten statt Neuzeichnen, und neue Screens nutzen automatisch die richtigen Werte. Der wichtigste Schritt war dabei nicht technischer Natur, sondern die Entscheidung, Farben nach ihrer Rolle zu benennen. Wenn du noch ganz am Anfang stehst, beginne mit dem Artikel Design Systems für kleine Teams und komm für die Umsetzung in Figma hierher zurück.

Checkliste

• Tarif prüfen: Modes ab Professional, Bibliotheken nur auf bezahlten Plänen, Variablen-API nur im Enterprise-Plan.
• Palette aus der UI-Inventur reduzieren, bevor Variablen angelegt werden.
• Drei Sammlungen anlegen: Basis-Farben, semantische Farben mit Modes, Abstände und Radien.
• Semantische Variablen als Verweise auf Basis-Farben anlegen und nach Rolle benennen.
• Basis-Farben per Scoping verstecken und beim Veröffentlichen ausblenden.
• Scoping für Text, Flächen, Konturen, Abstände und Radien setzen.
• Beschreibung und Code Syntax für jede semantische Variable hinterlegen.
• Komponenten nur mit semantischen Variablen verknüpfen, Abstände über die Seitenleiste ändern.
• Kontraste in jedem Modus auf einer eigenen Prüfseite testen.
• Styles für zusammengesetzte Werte wie Typografie und Schatten nutzen und mit Variablen verknüpfen.
• Eine Quelle für Tokens festlegen und den Weg in den Code vereinbaren.

Quellen

• Figma Help Center: Overview of variables, collections, and modes
• Figma Help Center: Create and manage variables and collections
• Figma Help Center: Modes for variables
• Figma Help Center: Apply variables to designs
• Figma Help Center: The difference between variables and styles
• Figma Help Center: Variables in Dev Mode
• Figma Help Center: What’s new from Schema 2025
• Figma Blog: Schema 2025, Design Systems For A New Era
• Figma Forum: Native variable export feature
• Figma Help Center: Starter plan overview
• Figma Help Center: Publish a library
• Figma Help Center: Guide to Dev Mode
• Figma Developer Docs: Variables REST API
• Design Tokens Community Group: Design Tokens Technical Reports 2025.10
• W3C: Web Content Accessibility Guidelines (WCAG) 2.2