Variables (Figma) – Design Tokens zentral verwalten

Variables sind Figmas Design-Token-System (eingeführt 2023), das es ermöglicht, Werte für Farben, Zahlen (Spacing, Radien, Opacity) und Strings zentral zu speichern, ihnen semantische Namen zu geben, sie in Modes (z. B. Light/Dark) zu verwalten und direkt an Entwickler zu übergeben.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Profi Synonyme / Auch bekannt als: Design Tokens, Figma Variables, Token System; Tastenkürzel: über Menü → „Local Variables" oder Strg+Alt+L / Cmd+Option+L (nicht standardisiert)

Was sind Variables?

Mit der Einführung von Variables im Juni 2023 hat Figma eine der meisterwarteten Funktionen erhalten. Variables ermöglichen es, Design Tokens direkt in Figma zu definieren und zu verwalten, ohne auf externe Tools wie Token Studio (ehemals Figma Tokens) angewiesen zu sein. Ein Design Token ist ein Named Value – statt direkt #3B82F6 zu verwenden, definiert man color/primary/500 = #3B82F6 und referenziert diesen Token überall.

Variables sind mächtiger als Styles, da sie Theming (Modes) unterstützen: Dieselbe semantische Variable color/background/default kann in einem Light-Mode den Wert #FFFFFF haben und im Dark-Mode #1A1A2E. Ein Klick schaltet das gesamte Design zwischen Modes um.

Erklärung

Variable-Typen

Figma unterstützt vier Variable-Typen:

1. Color Variables: Speichern Farb-Tokens. Können auf Fills, Strokes und Hintergründe angewendet werden. Unterstützen keine Gradienten (hierfür weiterhin Styles verwenden).

2. Number Variables: Speichern numerische Werte: Spacing (Gap, Padding), Border-Radius, Border-Width, Opacity, Dimensionen. Können auf alle numerischen Felder in Figma angewendet werden.

3. String Variables: Speichern Text-Inhalte. Können auf Text-Layer angewendet werden, um z. B. verschiedene Sprachversionen eines Designs zu verwalten (Localization).

4. Boolean Variables: Speichern true/false-Werte. Können auf Visibility von Layern angewendet werden, um z. B. Elemente in verschiedenen Modes ein- oder auszublenden.

Variable Collections und Modes

Variables werden in Collections organisiert. Eine Collection kann mehrere Modes haben – das ist das Kern-Feature für Theming.

Beispiel-Collection-Struktur: ``` Collection: Colors Modes: Light, Dark Variables: background/default: Light=#FFFFFF, Dark=#1A1A2E background/subtle: Light=#F8F9FA, Dark=#2D2D44 text/primary: Light=#1A1A2E, Dark=#F8F9FA text/secondary: Light=#6B7280, Dark=#9CA3AF

Collection: Spacing Modes: Base (nur ein Mode) Variables: spacing/1: 4 spacing/2: 8 spacing/3: 12 spacing/4: 16 spacing/6: 24 spacing/8: 32 ```

Primitive vs. Semantische Tokens

Eine professionelle Token-Architektur unterscheidet zwischen:

Primitive Tokens (Raw Values): `` color/blue/500 = #3B82F6 color/blue/600 = #2563EB spacing/4 = 16 ``

Semantische Tokens (Bedeutungsebene, referenzieren Primitive): `` color/action/primary/default → color/blue/500 color/action/primary/hover → color/blue/600 spacing/component/button/padding-x → spacing/4 ``

In Figma können Variables auf andere Variables zeigen (Variable Aliasing). Das ist der Schlüssel zur Token-Architektur: Primitive bleiben konstant, semantische Tokens wechseln je nach Mode/Theme.

Variables anwenden

Color Variable auf ein Element anwenden:

1. Element auswählen.
2. Im Fill-Panel auf das Farbfeld klicken → Farbpicker öffnet sich.
3. Im Farbpicker auf das „Library"-Symbol (Würfel-Icon) klicken → Variable-Browser öffnet sich.
4. Die gewünschte Variable auswählen.

Number Variable auf Spacing anwenden (in Auto Layout):

1. Auto-Layout-Frame auswählen.
2. Im Gap-Feld mit Rechtsklick → „Apply Variable" oder auf das Würfel-Icon neben dem Feld klicken.
3. Variable auswählen.

Modes wechseln

Ein Frame, eine Gruppe oder ein einzelnes Element kann einem Mode zugewiesen werden:

• Element auswählen → im rechten Panel unter „Variables" → Mode-Auswahl erscheint.
• Zwischen Light und Dark Mode wechseln → alle angebundenen Variables aktualisieren sich.

Dies ermöglicht das Nebeneinanderstellen von Light- und Dark-Mode-Designs auf einer Canvas.

Developer Handoff

Im Dev Mode können Entwickler alle angewendeten Variables und ihre Werte sehen. Wenn Variables als Design Tokens exportiert werden sollen, können Plugins wie „Tokens Studio for Figma" oder der native Export (Figma 2024) genutzt werden, um JSON-Dateien für Style Dictionary oder andere Token-Management-Systeme zu generieren.

Beispiele

1. Light/Dark Mode: Eine Color Variable Collection mit zwei Modes (Light, Dark) und ca. 30–50 semantischen Farb-Tokens. Durch Wechsel des Modes im Frame-Panel wechselt das gesamte Design automatisch.
2. Spacing-System: Eine Number Variable Collection mit T-Shirt-Größen (spacing/1 = 4px bis spacing/16 = 64px). Alle Padding- und Gap-Werte im Auto Layout referenzieren diese Variables – Spacing-Änderungen werden projektweit synchron.
3. Responsive Design: Eine Variable Collection mit verschiedenen Modes für Mobile, Tablet, Desktop. Der Border-Radius eines Buttons ist auf Mobile 8px, auf Desktop 12px – ein Mode-Wechsel zeigt den Unterschied.
4. Lokalisierung: String Variables für mehrsprachige Designs. Mode „Deutsch" und Mode „Englisch" mit verschiedenen Textwerten für alle Labels.
5. Brand Theming: Eine Multi-Brand-Collection mit Modes für Brand A und Brand B. Gleiche Komponentenbibliothek, anderes Erscheinungsbild per Mode-Switch.

In der Praxis

Workflow:

1. Mit primitiven Tokens beginnen (Raw-Farben, Spacing-Werte).
2. Semantische Tokens darauf aufbauen (Alias-Variables).
3. Variables auf Components und Styles anwenden.
4. Modes für Dark Mode / Theming definieren.
5. Mit Dev Mode und Plugin-Export an Entwicklung übergeben.

Best Practices:

• Token-Benennung von Anfang an sorgfältig planen – sie ist die Sprache zwischen Design und Entwicklung.
• Primitive Tokens von semantischen Tokens trennen (zwei Collections oder klare Namenskonvention).
• Nicht versuchen, alles als Variable zu modellieren – Gradienten und komplexe Effekte bleiben bei Styles.
• Mit Entwicklungsteam abstimmen: Wie sollen Token-Namen in CSS/Design-Token-Format aussehen?

Häufige Fehler:

• Variables direkt auf Elemente anwenden, ohne eine semantische Schicht dazwischen – das macht Theming schwierig.
• Zu viele Modes erstellen – beginnen mit Light/Dark und bei Bedarf erweitern.

Vergleich & Abgrenzung

Token Studio for Figma (ehemals Figma Tokens): Plugin, das vor nativen Variables genutzt wurde. Bietet noch mehr Flexibilität (z. B. Composition Tokens), aber natürliche Variables sind für die meisten Use Cases ausreichend und besser integriert. Style Dictionary: Open-Source-Tool zur Token-Transformation; kann mit Figma-Variable-Exporten arbeiten. Theo (Salesforce): Ähnliches Token-Management. Im Vergleich zu Sketch (kein natives Token-System) und Adobe XD (eingeschränkte Token-Verwaltung) ist Figmas Variables-System das mächtigste in einem Design-Tool.

Häufige Fragen (FAQ)

Was ist der Unterschied zwischen Variables und Styles? Styles speichern komplexe visuelle Eigenschaften (Gradienten, Schatten, Typografie-Sets). Variables speichern primitive Werte (Farben als Hex, Zahlen) und können aliased werden. Variables unterstützen Modes (Theming), Styles nicht. Für Light/Dark-Mode: Variables. Für Schatten-Systeme: Styles.

Können Variables in Plugins exportiert werden? Ja, native Variables können über Figmas Plugin-API ausgelesen werden. Plugins wie „Variables to JSON" oder „Tokens Studio" ermöglichen den Export als W3C Token-Format, Style Dictionary-Format oder JSON für Entwickler-Workflows.

Warum sehe ich im Dev Mode meine Variable-Namen nicht? Im Dev Mode werden Variables nur angezeigt, wenn die entsprechenden Elemente mit Variables (nicht mit raw Werten) verknüpft sind. Außerdem muss die Collection nicht als „lokal privat" markiert sein. In manchen Plänen ist der vollständige Variable-Export in Dev Mode eingeschränkt.

Verwandte Einträge

• Styles
• Dev Mode
• Responsive Design in Figma
• Components

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Variables in Figma" – help.figma.com/hc/en-us/articles/15339657135383
• Zack Onisko / Figma Blog: „Introducing Variables" (figma.com/blog, 2023)
• Nathan Curtis: „Token Architecture for Design Systems" (eightshapes.com, 2024)