Figma: Variables – Token-basiertes Design mit Modi und Aliassen

Variables in Figma sind benannte, typisierte Wert-Behälter – für Farben, Zahlen, Strings und Booleans –, die modusspezifisch variieren können und systemweit in Designs, Prototypen und Bibliotheken referenziert werden.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Design Tokens, Token-Variablen, Figma Tokens

Was sind Variables?

Variables (eingeführt 2023) sind Figmas nativer Ansatz für Design-Token-Systeme. Eine Variable hat einen Namen, einen Typ und mindestens einen Wert. Der entscheidende Vorteil gegenüber Styles: Variables unterstützen Modes – ein Variable-Set kann für Light Mode und Dark Mode unterschiedliche Werte haben, und mit einem Klick wechselt das gesamte Design zwischen diesen Modi.

Erklärung

Variable-Typen

Figma kennt vier Typen:

• Color: Farbwerte (Hex, RGB, RGBA) – für semantische Farb-Tokens wie color/surface/default, color/interactive/primary.
• Number: Zahlenwerte – für Spacing, Radien, Schriftgrößen, Opacity: spacing/4, radius/medium.
• String: Textwerte – für Inhalte oder Token-Namen, die Prototype-Logik steuern.
• Boolean: Wahr/Falsch-Werte – für Sichtbarkeits-Properties in Components oder Prototype-Conditions.

Collections und Groups

Variables werden in Collections organisiert. Eine Collection ist ein Set von Variables mit gemeinsamen Modes. Typische Collections:

• Primitive Tokens – rohe Werte: blue/500 = #3B82F6
• Semantic Tokens – benannte Bedeutungen: color/interactive/primary = {blue/500}
• Component Tokens – komponentenspezifisch: button/background = {color/interactive/primary}

Innerhalb einer Collection werden Variables durch Schrägstriche in Gruppen eingeteilt.

Modes

Jede Collection kann mehrere Modes haben. Ein Mode ist eine benannte Ausprägung des gesamten Variable-Sets. Klassische Beispiele:

• Light / Dark (Farbschemata)
• Mobile / Desktop (Spacing-Skala)
• Brand A / Brand B (Multi-Theming)

Ein Frame kann einem bestimmten Mode zugewiesen werden: Rechtsklick → Assign Variable Mode. Der gesamte Frame-Inhalt rendert dann mit den Werten des gewählten Modes.

Aliasse (Token-Referenzierung)

Variables können andere Variables referenzieren (Aliasse). button/background kann auf color/interactive/primary verweisen, das wiederum auf blue/500. Ändert man blue/500, propagiert die Änderung durch die gesamte Alias-Kette. Das entspricht dem Token-Tier-Modell moderner Design-Token-Systeme (Primitive → Semantic → Component).

Variables in der Praxis

Variables können auf folgende Figma-Properties angewendet werden:

• Fill-Farben (Color Variables)
• Stroke-Farben (Color Variables)
• Breite, Höhe, Radius (Number Variables)
• Auto-Layout Gap, Padding (Number Variables)
• Text-Inhalte (String Variables)
• Component-Properties Boolean (Boolean Variables)
• Prototype-Conditions (alle Typen)

Export für Entwickler

Variables lassen sich per Plugin (z. B. „Tokens Studio for Figma", „Variables2JSON") in JSON exportieren und als CSS Custom Properties, SCSS-Variablen oder JavaScript-Objekte in Code-Repositories einbinden – die Single Source of Truth für Design und Entwicklung.

Beispiele

1. Komponenten-System: button/padding-horizontal ist eine Number Variable mit Wert 16 (Mobile) und 20 (Desktop). Der Button-Component referenziert diese Variable für Auto-Layout-Padding; im Desktop-Mode wird der Button automatisch weiter.
2. Responsive Design: Ein spacing/gap Variable-Set mit Modes Mobile=8 und Desktop=16 steuert alle Grid-Abstände zentral.
3. Prototyping/Handoff: Color Variables erscheinen im Dev-Mode als Token-Namen, die Entwickler direkt in CSS Custom Properties umwandeln.
4. Dark Mode: Ein Frame wird auf den Mode Dark gesetzt; alle Color Variables wechseln auf ihre Dark-Mode-Werte. Der Prototype zeigt Light und Dark Mode als interaktiven Toggle.
5. Multi-Brand Theming: Zwei Marken Brand A und Brand B sind als Modes einer Color-Collection definiert. Mit einem Klick kann man die gesamte UI-Datei zwischen den Markendesigns umschalten.

In der Praxis

Variable erstellen: Rechtes Panel → Variables-Icon → Collection erstellen → + Variable hinzufügen → Typ und Wert setzen Mode hinzufügen: Im Variable-Panel → Collection-Header → „Add Mode" → Mode benennen → Werte für neuen Mode setzen Variable anwenden: Element Fill auswählen → Farbpicker → Libraries-Tab → Variable aus Liste auswählen Mode zuweisen: Frame auswählen → Rechtsklick → Assign Variable Mode Alias setzen: Variable bearbeiten → Wert-Feld → Library-Icon → andere Variable als Referenz wählen

Vergleich & Abgrenzung

Variables sind mächtiger als Styles für Token-Systeme, ersetzen aber Text- und Effect-Styles nicht vollständig. Tokens Studio for Figma erweitert Variables um komplexere Token-Hierarchien und direkten W3C Design Token-Export.

Häufige Fragen (FAQ)

Kann ich Variables in Prototype-Interaktionen nutzen? Ja. Boolean und Number Variables können als Conditions in Conditional Prototyping verwendet werden (z. B. „Zeige Overlay, wenn Variable isLoggedIn = true"). Das ermöglicht komplexe, zustandsbehaftete Prototypen ohne externe Tools.

Wie unterscheiden sich Variables von Design Tokens? Design Tokens sind ein generelles Konzept (W3C Standard); Variables sind Figmas Implementierung dieses Konzepts. Figma Variables decken den Kerngedanken ab, sind aber noch nicht vollständig W3C-kompatibel (Stand 2024). Plugins wie Tokens Studio schließen diese Lücke.

Verwandte Einträge

• Figma: Styles
• Figma: Design Tokens
• Figma: Conditional Prototyping
• Figma: Auto-Layout

Weiterführend

• Figma Help Center – help.figma.com/hc/en-us/articles/15145852043927
• Figma (2024): Variables overview. Figma Docs.
• Online: tokens.studio – Tokens Studio für Figma Dokumentation