Übersicht über Variablen, Collections und Modes

Variablen speichern Werte wie Füllfarben, Abstand und Transparenz, die für andere Designs wiederverwendet werden können.

Genauso wie Stile und Komponenten können Variablen auch in Team-Bibliotheken veröffentlicht werden. Wenn du den Wert einer Variable aktualisierst, kannst du Designs entsprechend dateiübergreifend aktualisieren. So können projektübergreifend konsistente Designs erstellt werden, und Designsysteme lassen sich effizienter aktualisieren.

Arten von Variablen

Es gibt vier Arten von Variablen. Jede dieser Variablen kann auf spezifische Eigenschaften und Elemente angewendet werden.

Die Definition einer Variable kann aliasiert werden oder eine andere Variable referenzieren, sodass Design-Token implementiert werden können. Jede Variable kann zu einer vorhandenen Variable desselben Typs aliasiert werden. Beispielsweise können Farbvariablen ausschließlich zu anderen Farbvariablen referenziert werden. Erfahre, wie du Variablen aliasieren kannst →

Collections und Gruppen

Sowohl Collections als auch Gruppen werden verwendet, um Variablen zu ordnen und leichter auffindbar zu machen.

Eine Collection ist ein Satz von Variablen und Modes. Collections können verwendet werden, um zusammengehörige Variablen gemeinsam zu ordnen. Zum Beispiel kannst du eine Collection für in verschiedenen Sprachen lokalisierten Text und eine weitere Sammlung für räumliche Werte verwenden.

Du kannst Variablen noch weiter ordnen, indem du diese zu Gruppen innerhalb einer Collection hinzufügst. So kannst du zum Beispiel eine Gruppe für Textfarben und eine weitere Gruppe für Strichfarben verwenden.

Modes für Variablen

Ein Mode ist eine Liste von Werten einer Variable in einer Collection, der einen bestimmten Wert einer Variable speichert. Modes repräsentieren außerdem die verschiedenen Kontexte unserer Designs.

Wenn eine Variable über verschiedene Definitionen verfügt, ist jede Definition mit einem Mode verknüpft. Wenn die Variable auf die Eigenschaft einer Ebene angewendet wird, drückt die Ebene den Wert basierend auf dem Mode, in dem sie sich aktuell befindet, aus. Dies ermöglicht das schnelle Umschalten unserer Designs zwischen verschiedenen Kontexten.

So kann zum Beispiel eine Farbvariable zwei verschiedene Farbwerte speichern: blau im einen Mode und weiß im anderen Mode. Wird diese Variable auf eine Textebene angewendet, erscheint diese entweder in blau oder in weiß, je nachdem, in welchem Mode sie sich befindet.

Im Folgenden sind verschiedene Möglichkeiten zur Verwendung von Modes zum Umschalten zwischen Kontexten aufgeführt:

• Verschiedene Farbthemen wie zum Beispiel Light- und Dark-Modus
• Verschiedene Sprachen, um den Textfluss in Designs zu veranschaulichen
• Gerätegrößen, um Elemente mit unterschiedlichen Abständen und Objektabständen zu veranschaulichen

Erfahre, wie du mit Modes für Variablen zwischen Designkontexten umschalten kannst →

Dinge, die du berücksichtigen solltest

Stile und Variablen

Sowohl Variablen als auch Stile können Farbwerte speichern, werden als Informationsquelle verwendet und designübergreifend wiederverwendet, um Effizienz und Konsistenz zu gewährleisten.

Bei der Entscheidung, ob eine Variable oder ein Stil verwendet werden soll, muss Folgendes beachtet werden:

Ein Stil kann für Eigenschaften verwendet werden, die sich aus mehrerern Werten zusammensetzen, wie Farbverläufe oder Schatten. Auch wenn Stile sich nicht auf andere Stile beziehen können, können sie Variablen referenzieren.

Variablen setzen sich aus einzelnen Rohwerten wie #E5E5E5 in einem Mode und #888888 in einem anderen Mode zusammen. Das Umschalten zwischen Kontexten ist nur durch Verwendung von Modes für Variablen möglich. Außerdem können Variablen aliasiert werden, um komplexe Design-Token-Strukturen zu erstellen.