Leitfaden zu Variablen in Figma

Variablen in Figma Design speichern wiederverwendbare Werte, die auf alle Arten von Eigenschaften und Prototyp-Aktionen angewendet werden können. Sie ersparen Zeit und Mühe, wenn du Designs erstellst, Designsysteme verwaltest und komplexe Prototyp-Flüsse erstellst.

Folgendes ist zum Beispiel möglich:

• Erstellen von Design-Tokens für mehr Effizienz beim Verwalten von Designsystemen
• Wechseln des Frames zwischen verschiedenen Gerätegrößen und sofortiges Aktualisieren des Abstands gemäß einem definierten räumlichen System
• Anzeigen einer Vorschau dafür, wie der Textfluss in verschiedenen Sprachen aussieht, durch Umschalten des Textes auf einem Frame
• Erstellen von vollständig funktionsfähigen Warenkorb-Designs, die den Gesamtpreis der Bestellung auf Grundlage der Artikel im Warenkorb berechnen
• Erstellen eines Prototyps eines interaktiven Quiz, der bedingte Logik verwendet, um anzuzeigen, ob ein*e Benutzer*in eine Frage richtig oder falsch beantwortet hat

Es gibt drei Hauptmethoden zur Verwendung von Variablen in Figma:

1. Designs und Designsysteme ↓
2. Erweitertes Prototyping ↓
3. Figma-APIs ↓

Variablen für Designs und Designsysteme

Verwende Variablen und Modes, um Design-Token für dein Designsystem zu implementieren und zwischen Designs in verschiedenen Kontexten zu wechseln, z. B. zwischen Hell- und Dunkel-Themen. Mit Variablen kannst du effizienter gestalten und ein leistungsstärkeres Designsystem aufbauen.

• Figma-Tutorial: Einführung in die Variablen

  Dieses Video-Tutorial behandelt die Grundlagen von Variablen, wie man sie zur Darstellung von Design-Token verwendet und wie man Farb- und Zahlenvariablen verwendet, um verschiedene Modes und Themen zu berücksichtigen.
• Figma-Tutorial: Variablen für Schriftarten

  In diesem Video-Tutorial erfährst du, wie du Variablen für Schriftart-Eigenschaften verwendest, Variablen in ein bestehendes Schriftsystem integrierst und wie du sie für ein responsives Design nutzt.
• Artikel: Überblick über Variablen, Collections und Modes →

  Starte deine Reise in die Welt der Variablen hier! Erfahre mehr über die verschiedenen Arten von Variablen und was Variablen-Collections und -Modes sind.

• Artikel: Variablen erstellen und verwalten →

  Erfahre, wie du Variablen und Collections erstellst, auf andere Variablendefinitionen verweist und festlegst, welche Variablen in Designs verwendet werden können.

• Artikel: Variablen auf Designs anwenden →

  Erfahre, wie du vorhandene Variablen auf Designeigenschaften anwenden kannst.

• Artikel: Modes für Variablen →

  Erfahre, wie du mehrere Definitionen für eine Variable erstellen kannst, die jeweils einem Mode zugeordnet sind. Erfahre außerdem, wie du sie verwenden kannst, um schnell zwischen den Designkontexten zu wechseln.

• Artikel: Der Unterschied zwischen Variablen und Stilen →

  Da Figma seinen Funktionsumfang um Variablen erweitert, fragst du dich vielleicht: Was ist der Unterschied zwischen Variablen und Stilen? Wann solltest du dich für das eine oder das andere entscheiden?

• Artikel: Variablen im Dev Mode →

  Erfahre mehr darüber, wie du im Dev Mode beim Untersuchen von Designs auf Variablen zugreifen kannst, einschließlich des Abrufens von Variablendetails und vorgeschlagener Variablen sowie der Anzeige lokaler Collections mithilfe der Variablentabelle.

• Community-Datei: Variablen-Testumgebung →

  Möchtest du praktische Erfahrungen mit Variablen sammeln? Hol dir eine Kopie der Variablen-Testumgebungsdatei, um zu üben, während du lernst.

Variablen für erweitertes Prototyping

Mit Variablen kannst du hochpräzise Prototypen mit weniger Frames erstellen. Nutze Variablen zusammen mit anderen fortgeschrittenen Funktionen wie Ausdrücken und Bedingungen, um deine Prototypen auf das nächste Level zu bringen.

Im Prototyping werden Variablen verwendet, um Objektzustände oder Eigenschaften zu speichern. Nutze Prototyp-Interaktionen, um Variablenwerte zu ändern, die das Erscheinungsbild, den Inhalt oder die Sichtbarkeit von Objekten in einem Design verändern können – alles in nur wenigen, einfachen Frames.

• Video-Tutorial: Prototyp mit Variablen

  Schau zu und lerne an einem realistischen Beispiel, wie du Variablen in Prototypen verwendest. Du erfährst, wie du Variablenwerte ändern kannst, wie du einfache Ausdrücke erstellst und wie du mehrere Aktionen und die Wenn/dann/sonst-Logik verwendest, um bedingte Prüfungen durchzuführen.
• Artikel: Variablen in Prototypen verwenden →

  Lerne die Grundlagen des Prototypings mit Variablen in Figma kennen – einschließlich der Konfiguration deiner Variablen, der Verwendung der Aktion Set variable (Variable festlegen), um Variablenwerte zu ändern, und der Nutzung von Variablen mit Komponentenvarianten und interaktiven Komponenten.

• Artikel: Ausdrücke in Prototypen verwenden →

  Lerne, wie du Ausdrücke und Variablen in Prototypen verwenden kannst, um dynamische String-Werte zu generieren, grundlegende mathematische Operationen mit Zahlenwerten durchzuführen oder sogar boolesche Ausdrücke auszuwerten.

• Artikel: Mehrere Aktionen und Bedingungen →

  Lerne, wie du mehrere Aktionen verwenden kannst, um eine unbegrenzte Anzahl von Aktionen auf denselben Auslöser zu stapeln, oder wie du Bedingungen nutzen kannst, um mit der Wenn/dann/sonst-Logik zu prüfen, ob eine Bedingung erfüllt ist, bevor du eine Aktion ausführst.

• Artikel: Variablenmodes in Prototypen →

  Lerne, wie du Variablenmodes in deinen Prototypen verwenden kannst. Du kannst die Werte bestimmter Modes basierend auf dem Kontext festlegen oder spezifische Modewerte in deinen Ausdrücken verwenden.

• Community-Datei: Erweiterte Prototyp-Testumgebung →

  Mach dir eine Kopie unserer erweiterten Testumgebungsdatei, um mehr praktische Übungen mit Variablen im Prototyping zu bekommen.

Variablen, die APIs verwenden

Variablen werden jetzt in der Plugin-API von Figma – zum Erstellen von Plugins und Widgets – sowie in der REST-API unterstützt. 

• Entwicklerdokumentation: Zur REST-API →

  Die Unterstützung für Variablen in der REST-API umfasst Endpunkte zum Abfragen, Erstellen, Aktualisieren und Löschen von Variablen.

• Entwicklerdokumentation: Zur Plugin-API →

  Die Unterstützung für Variablen in der Plugin-API umfasst das Erstellen und Lesen von Variablen sowie das Binden von Variablen an Komponenten. Zum Beispiel kann ein Plugin erstellt werden, um Variablen zu importieren oder zu exportieren oder um Stile in Variablen zu konvertieren.

• Entwicklerdokumentation: Zur Widget-API →

  Widgets können über die Plugin-API auf Variablen zugreifen. Widgets können Variablen erstellen und lesen, aber die Eigenschaften von Widgets können nicht an Variablen gebunden werden.

• Figma-Tutorial: Variable mit GitHub synchronisieren

  In diesem Video-Tutorial lernst du, wie du deine Variablen mit deiner Codebasis synchronisierst. Wir zeigen dir, wie du unser Beispiel-Repository für die GitHub-Aktion „Variable“ verwendest, um deine Figma-Variablen und deine Codebasis zu synchronisieren.
• Community-Datei: Designsysteme mit der Variables REST API synchronisieren →

  Lerne, wie du die Figma Variables REST API verwenden kannst, um automatisierte Workflows einzurichten, die Änderungen zwischen Design-Dateien und deinem Codebase synchronisieren.