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? Werden Stile obsolet?

Schließlich scheinen sie auf den ersten Blick ähnlich zu funktionieren:

• Beide fungieren als Informationsquellen.
• Beide können in Teambibliotheken veröffentlicht und in allen Designs wiederverwendet werden.
• Beide unterstützen eine effiziente Verwaltung des Designsystems, da Aktualisierungen einer Variablen oder eines Stils Aktualisierungen für alle Designs anfordern, die sie verwenden.

Stile und Variablen weisen wichtige Unterschiede auf, die sie in verschiedenen Situationen wertvoll machen.

In diesem Artikel zeigen wir die Unterschiede auf und helfen dir zu entscheiden, ob du eine oder beide in deinen Designs verwenden solltest.

Grundlegende Unterschiede

Es gibt einige wichtige Unterschiede zwischen Stilen und Variablen: die Art der verwendeten Werte, ihre Darstellung auf der Arbeitsfläche und die Verwendung von Modi.

Stile können eine Vielzahl von Eigenschaften speichern:

• Eine Eigenschaft mit einem einzelnen Rohwert wie eine einfarbige Füllung #FFFFFF
• Eine Eigenschaft mit mehreren Rohwerten wie ein Farbverlauf
• Andere Formate wie Mischmodi, Bilder GIFs, Videos

Stile sind so konzipiert, dass sie eine Kombination von Werten enthalten, wobei alle Werte gleichzeitig ausgedrückt werden. Zum Beispiel kannst du die Eigenschaften der Schriftartfamilie, Schriftgröße und Schriftstärke gleichzeitig in einem Textstil speichern. Wenn du den Textstil auf eine Textebene anwendest, werden alle Eigenschaften gleichzeitig auf die Textebene angewendet. 

In einem weiteren Beispiel betrachten wir Farbstile, die eine Kombination aus verschiedenen Fülltypen und Variablen darstellen können und in einem Stapel von oben nach unten organisiert sind. Ein Farbstil ist wie ein Blick von oben auf einen „Stapel“ von Karten, wobei jede Karte eine Füllung darstellt. Wenn die Farbe oben transparent genug ist, kannst du die darunterliegende Farbe sehen. Du kannst die Füllung auch manuell neu anordnen, um zu ändern, was du von oben siehst.

Variablen können einzelne Rohwerte speichern. Zum Beispiel können Rohwerte einfarbige Füllungen wie #FFFFFF, Zahlen wie 16 oder -32,75 und boolesche Werte true und false umfassen. 

Variablen sind so konzipiert, dass sie einen oder mehrere einzelne, wiederverwendbare Werte speichern können, aber es kann immer nur ein Wert gleichzeitig dargestellt werden. Jeder Wert entspricht einem anderen Variablenmodus. Das trifft auf alle Variablentypen zu. Im Gegensatz zu Stilen ist eine Variable wie ein Kartensatz, bei dem du nur eine Karte sehen kannst, und welche Karte du siehst, hängt von ihrem Kontext ab.

Nehmen wir zum Beispiel an, wir haben eine Collection von Variablen mit einem hellen und einem dunklen Mode. Wir wenden sie auf verschiedene Ebenen in einem Frame an und schalten den Frame in den dunklen Mode. Alle Ebenen mit den Variablen zeigen die Werte aus dem dunklen Mode an. Wenn wir den Frame in den hellen Mode schalten, ändern die Variablen ihre angezeigten Werte in den hellen Mode.

Obwohl Modi für Variablen entwickelt wurden, erlaubt Figma uns, sie auf Stile anzuwenden.

Nehmen wir an, wir haben eine Zahlen-Variable für eine Standard-Schriftgröße. Die Variable hat zwei einzelne Rohwerte: 16 für den mobilen Mode und 18 für den Desktop-Mode. Wir wenden diese Variable auf die Schriftart-Eigenschaft eines Textstils an, sowie andere Variablen und Werte auf andere Eigenschaften.

Jetzt können wir den Mode auf jeder Text-Ebene mit diesem Stil umschalten, da er eine Variable mit mehreren Modi verwendet.

Erfahre, wie du Stile mit Variablen unterstützen kannst.

Skalierbarkeit und Verwaltung

Eine der effektivsten Methoden zur Verwaltung und Skalierung eines Designsystems ist die Verwendung von Alias-Token.

• Ein Design-Token ist ein Fachbegriff für wiederverwendbare Werte, die dazu dienen, Design und Code zu synchronisieren.
• Aliasing ist eine Methode für das Organisieren eines Designsystems, indem jedem Designtoken ermöglicht wird, den Wert eines anderen Designtokens zu erben.

Variablen ermöglichen es dir, genau das zu tun.

Nehmen wir zum Beispiel an, dass die Variable „brand-400“ (ein Design-Token von uns) den Wert #EAEA00 aufweist. Wir möchten, dass die Variable „icon-default“ (ein weiteres Design-Token) ein Alias von „brand-400“ ist, was bedeutet, dass sie den Wert von „brand-400“ erbt.

Wenn sich der Wert von „brand-400“ jemals ändert, wird „icon-default“ entsprechend folgen, solange sie noch an die Definition von „brand-400“ gebunden ist.

Stile unterstützen kein Aliasing. Das bedeutet, dass sie nicht auf Variablen und andere Stile angewendet werden können. Variablen können auf beide angewendet werden.

Weil Variablen Aliasing unterstützen, bieten sie eine robustere Unterstützung für komplexe, skalierbare Token-Strukturen. Sie ermöglichen es dir, primitive Werte festzulegen, die als Token durch andere Token und Elemente deines Designsystems fließen können. Dadurch wird auch die Aktualisierung und Verwaltung von Designsystemen effizienter.

Nehmen wir zum Beispiel an, wir erstellen eine Variable, die als globales Token fungiert, und nutzen sie, um andere Variablen auf verschiedenen Ebenen festzulegen. Ändert sich das globale Token, so ändern sich auch alle untergeordneten Objekte.

Wenn wir nur einige Tokens ändern möchten, ermöglicht uns diese Struktur, das richtige Token im Upstream auszuwählen und es zu ändern, ohne alles im Downstream manuell überarbeiten zu müssen.

Aliasing wird für alle Variablentypen unterstützt. Erfahre, wie du Variablen als Alias festlegen kannst.

Unterstützende Funktionen

Variablen festlegen

Scoping wird vollständig für Zahlenvariablen unterstützt, soll aber in Zukunft auf andere Variablentypen ausgeweitet werden.

Lege Variablen fest, um einzuschränken, auf welche Eigenschaften eine Variable angewendet werden kann.

Zum Beispiel kannst du eine Variable nur auf Konturfüllungen beschränken, sodass du die Variable nicht auf andere Eigenschaften anwenden kannst. So erhältst du eine bessere Kontrolle darüber, wo sie angewendet werden kann, und eliminiert das Rätselraten beim Designprozess.

Erfahre, wie du Variablen festlegst.

Prototyp mit Variablen

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

Erfahre, wie du Variablen in erweiterten Prototypen verwendest.

Codesyntax mit Variablen

Die Codesyntax befindet sich derzeit in der Entwicklung und wird bald verfügbar sein.

Wenn du das Bearbeitungsmodal einer Variable öffnest, siehst du einen Abschnitt mit dem Titel Codesyntax. Die Codesyntax repräsentiert Variablen im Code mit gültigen Variablennamen. Diese Informationen werden im Dev Mode angezeigt und unterstützen Designer*innen und Entwickler*innen bei der Schaffung eines nahtlosen Übergabeerlebnisses.

Erfahre mehr über die Codesyntax.

Fazit

Ob du Variablen oder Stile verwendest, hängt größtenteils von deinen Zielen ab. Du könntest dich ausschließlich auf Variablen konzentrieren, um die Skalierbarkeit von Design-Tokens zu nutzen. Oder du könntest feststellen, dass die Beibehaltung von Stilen für deine Projekte passend ist. Oder du könntest am Ende eine Kombination aus beidem verwenden!

Stile werden ‌ein zentrales Merkmal im Figma Design bleiben. Trotz ihrer Ähnlichkeiten sind Variablen kein Ersatz für Stile. Vielmehr sind sie eine Ergänzung zu den Kernfunktionen von Figma.