←  Alle Begriffe
W
Webflow

Webflow Variables

Webflow Variables speichern wiederverwendbare Werte wie Farben, Größen und Abstände für konsistente Styles.

Mit Webflow Variables lassen sich zentrale Designwerte projektweit steuern und konsistent einsetzen. Werden verknüpfte Werte angepasst, wirken sich die Änderungen automatisch auf alle entsprechenden Styles aus. Collections, Aliasse und Modes helfen dabei, Design Tokens übersichtlich zu organisieren und unterschiedliche Werte für Breakpoints, Themes oder andere Zustände zu verwalten.

Weiterlesen

Design Token

Design System

Styleguide

CSS

FAQ

Webflow Variables

Welche typischen Fehler entstehen bei Webflow Variables?
Häufig sind hartcodierte Werte neben Variablen, unklare Namen und zu viele Ausnahmen. Dann wirken Änderungen nur teilweise, und das System verliert seine Verlässlichkeit. Als Regel gilt: Neue Werte zuerst als Variable anlegen, dann verwenden, und Benennungen dokumentieren. Regelmäßige Aufräumrunden entfernen ungenutzte Variablen und Dubletten.
Wie werden Variables in einem Projekt sinnvoll strukturiert?
Sinnvoll ist eine Ebenentrennung: Grundwerte wie Farbpalette und Skala, darüber Aliasse mit Bedeutung wie Primärfarbe oder Textfarbe. Styles verweisen auf die semantische Ebene, nicht auf Rohwerte. So lässt sich ein Rebranding über wenige Grundwerte umsetzen. Collections gliedern die Werte nach Themen.
Wozu dienen Modes bei Webflow Variables?
Modes liefern für dieselbe Variable unterschiedliche Werte, etwa für Light und Dark Theme oder Markenvarianten. Die Styles bleiben unverändert, nur der Modus wechselt die Werte. Das reduziert doppelte Klassen. Aufwand entsteht bei der Planung, denn Namen und Aliasse müssen vorher konsistent festgelegt sein.
Worin unterscheiden sich Webflow Variables und Design Tokens?
Design Tokens sind das Konzept, Variables die Umsetzung in Webflow. Tokens beschreiben Designentscheidungen wie Farben und Abstände unabhängig von der Technik, Variables speichern diese Werte im Projekt und binden sie an Styles. Der Austausch mit Code oder Figma braucht darüber hinaus eine eigene Abstimmung.