Figma Variables sind dynamische Werte-Speicher, die es Designern ermöglichen, zentrale Werte wie Farben, Zahlen, Textstrings oder boolsche (wahr/falsch) Zustände zu definieren und in ihren Designs wiederzuverwenden. Sie bilden das Rückgrat für komplexe, konsistente und leicht anpassbare Design-Systeme. Während einfachere Tools wie Canva mit statischen Brand Kits arbeiten, bieten Variables eine programmatische, skalenierbare und logische Struktur – ein wesentlicher Unterschied, der im Vergleich von Figma und Canva relevant ist.

Das Grundkonzept: Von statischen Werten zu dynamischen Variablen

Was sind Variables genau?

Variables (Variablen) sind benannte Container, die einen bestimmten Wert speichern. Statt einem Button direkt die Farbe #007AFF zuzuweisen, weist man ihm die Variable --color-primary zu. Der konkrete Wert von --color-primary kann dann zentral in einer Variablen-Sammlung definiert und von dort aus gesteuert werden.

Die vier grundlegenden Variablen-Typen

Color Variables: Für Farbwerte (HEX, RGBA). Die Basis für Themes (Light/Dark Mode).
Number Variables: Für numerische Werte wie Abstände (--spacing-md: 16px), Radii (--radius-sm: 4px) oder Opazität.
String Variables: Für Textinhalte wie Platzhaltertexte, Label-Namen oder mehrsprachige Inhalte.
Boolean Variables: Für wahr/falsch-Zustände, die die Sichtbarkeit oder Eigenschaften von Komponenten steuern (z.B., --is-logged-in: true).

Die revolutionäre Anwendung: Modes und Conditional Logic

Modes (Modi) – Kontexte für Variablen

Die wahre Stärke von Variables entfaltet sich mit Modes. Ein Mode ist ein definierter Kontext oder eine “Umgebung”.

Beispiel 1 – Light/Dark Mode: Für die Variable --color-background können Sie im Mode “Light” den Wert #FFFFFF und im Mode “Dark” den Wert #1A1A1A hinterlegen.
Beispiel 2 – Plattformen: Sie können Modes für “iOS”, “Android” und “Web” definieren und Variablen wie --font-family oder --spacing-unit plattformspezifisch belegen.
Beispiel 3 – Breakpoints: Modes für “Mobile”, “Tablet”, “Desktop”, um responsive Number Variables (wie Container-Breiten) zu verwalten.

Bedingte Anwendung von Variablen

Durch die Kombination von Boolean Variables und Modes können Designs logische Bedingungen abbilden:

Ein Card-Component kann so konfiguriert werden, dass sein Hintergrund auf --color-surface wechselt, wenn die Boolean Variable --is-highlighted auf true gesetzt ist.
Dies ist ein mächtiges Werkzeug für interaktive Prototypen und die Definition von Komponenten-Zuständen, die über einfache Figma Variants hinausgehen.

Variables im professionellen Design-Workflow

1. Aufbau eines skalierbaren Design-Systems

Variables ersetzen die alten, einfachen “Styles” für Farben und Text. Sie erlauben eine vielschichtigere Struktur:

Semantische Benennung: --color-primary statt Blue 500. --spacing-stack-md statt 16px.
Aliase und Referenzen: Eine Variable kann auf eine andere verweisen. --color-border kann auf --color-neutral-300 verweisen, was wiederum auf einen konkreten HEX-Wert verweist. Änderungen propagieren kaskadenartig.

2. Effiziente Erstellung von Themes und Varianten

Mit einem gut aufgebauten Variablen-System kann ein komplettes Design-Theme (z.B. für ein neues Produkt oder eine Marketing-Kampagne) in Minuten erstellt werden, indem einfach die Werte in einem neuen Mode überschrieben werden. Dies ist essentiell für Marken mit vielen Sub-Brands oder Produkten.

3. Nahtloser Übergang zur Entwicklung

Variables sind das direkte Pendant zu Design Tokens in der Code-Entwicklung.

Dev Mode Integration: Im Dev Mode in Figma sehen Entwickler nicht nur den konkreten Wert #FF5733, sondern den Variablennamen --color-error, den sie direkt in ihren Code (z.B. als CSS Custom Property) übernehmen können.
Export von Token-Dateien: Variables können als JSON- oder Stylesheet-Dateien exportiert werden, um das Design-System automatisch mit dem Code-System zu synchronisieren.

Vergleich mit einfacheren Ansätzen

Herausforderung	Lösung mit Figma Variables	Lösung mit statischen Styles (ohne Variables)
Einführung eines Dark Modes	Ein neuer Mode wird angelegt, Variablenwerte überschrieben. Komponenten passen sich automatisch an.	Jede Komponente und jedes Farbelement muss manuell dupliziert und neu eingefärbt werden.
Änderung des Primärfarbtons	Wert der Variable `--color-primary` wird einmalig geändert. Änderung gilt global.	Jede Instanz der Farbe muss manuell gesucht und ersetzt werden (Fehleranfällig).
Plattformspezifische Spacing	Modes für iOS/Android definieren. `--spacing-unit` hat pro Mode einen anderen Wert.	Unterschiedliche Komponenten-Bibliotheken oder manuelle Anpassung pro Plattform.
Prototyping komplexer Zustände	Nutzung von Boolean Variables, um UI-Logik zu steuern (z.B. `if logged-in then...`).	Erstellung vieler manueller Varianten oder eingeschränkte Interaktionen.

Best Practices für den Einsatz von Variables

1. Planen Sie eine klare Taxonomie

Überlegen Sie sich eine logische Namenshierarchie, bevor Sie beginnen. Gängige Muster sind:

--{category}-{item}-{variant} (z.B. --color-background-primary)
--{semantic-use} (z.B. --color-text-heading, --spacing-container-padding)

2. Beginnen Sie mit den Fundamenten

Start small. Beginnen Sie mit Ihren Core Colors und wichtigsten Spacing-Werten. Integrieren Sie diese dann in Ihre Components in Figma und Auto Layout in Figma-Container.

3. Nutzen Sie Collections zur Organisation

Gruppieren Sie zusammengehörige Variablen in Collections (Sammlungen). Zum Beispiel: “Colors”, “Spacing”, “Typography”, “App-Specific”. Das hält die Übersicht, besonders in großen Teams.

4. Kombinieren Sie Variables mit anderen Figma-Features

Components & Variants: Definieren Sie die Eigenschaften Ihrer Components (Farben, Padding) mit Variables. So können Sie ganze Komponenten-Themes über Modes steuern.
Prototyping: Verknüpfen Sie Interaktionen mit dem Setzen von Boolean Variables, um komplexe, zustandsbasierte Prototypen zu bauen.
Automation: Nutzen Sie Figma Make oder Plugins, um Variables aus bestehenden Styles zu generieren oder umgekehrt.
Frühe Planung: Diskutieren Sie die Struktur Ihres Variablen-Systems bereits in FigJam-Workshops mit dem gesamten Team, um ein gemeinsames Verständnis zu schaffen.

5. Dokumentation und Kommunikation

Nutzen Sie Figma Slides, um die Struktur und Logik Ihres Variables-Systems für Stakeholder und neue Teammitglieder verständlich zu präsentieren.

Fazit: Figma Variables markieren einen Paradigmenwechsel im Design – von der visuellen Gestaltung hin zum strukturellen “Engineering” von Benutzeroberflächen. Sie sind der Schlüssel, um Design-Systeme von statischen Styleguides in lebendige, logikfähige und zwischen Design und Entwicklung perfekt synchronisierte Systeme zu verwandeln. Diese Fähigkeit, Abstraktion und Logik in den Designprozess zu bringen, ist ein klares Unterscheidungsmerkmal für professionelle Produktteams und ein Hauptgrund für den anhaltenden Figma Buzz. Während Canva einfache Konsistenz bietet, ermöglichen Variables in Figma eine tiefgreifende Systematik, die im umfassenden Tool-Vergleich als entscheidender Faktor für skalierte Produktentwicklung hervorgehoben wird.