Design Tokens
Design Tokens sind benannte Designentscheidungen – etwa für Farben, Abstände oder Schriftgrößen –, die einmal definiert und überall wiederverwendet werden, statt Werte manuell zu kopieren.
Was sind Design Tokens – und warum sind sie mehr als Variablen?
Ein Design Token ist ein Wert mit einem Namen. Statt überall #1A1A1A zu verwenden, definierst du „color-text-primary“ und nutzt diesen Namen in Design und Code. Ändert sich der Wert, ändert er sich überall gleichzeitig.
In Figma und Webflow findest du Tokens als Variables. Und KI-Tools wie Claude Design lesen genau diese Werte, um neue Entwürfe in deiner Marke zu gestalten. Tokens sind damit die Sprache, in der Design, Code und KI miteinander sprechen – und die Basis jedes Design Systems.
Welche Arten von Design Tokens gibt es?
- Farb-Tokens: Primär-, Sekundär- und Neutralfarben sowie semantische Werte wie „Fehler“ oder „Erfolg“.
- Typografie-Tokens: Schriftfamilie, Größen, Gewichte und Zeilenhöhen.
- Spacing-Tokens: Eine Abstandsskala, am besten in REM statt festen Pixelwerten.
- Radius- und Schatten-Tokens: Ecken, Rahmen und Tiefe.
Oft arbeitest du mit zwei Ebenen: Basis-Tokens (zum Beispiel „blau-500“) und semantische Tokens (zum Beispiel „button-hintergrund“), die auf die Basis verweisen. Diese Trennung macht Themes und einen Dark Mode deutlich einfacher.
Was sind häufige Fragen rund um Design Tokens?
- Was ist der Unterschied zwischen Design Tokens und Variablen?
- Wie benenne ich Design Tokens richtig?
- Wie überführe ich Tokens von Figma nach Webflow?
- In welchem Format exportiere ich Design Tokens (JSON, CSS)?
- Wie nutzt Claude Design meine Tokens?
- Wie viele Tokens braucht ein Startup?
5 Regeln für saubere Design Tokens
- Nach Zweck benennen: „color-action“ statt „color-blau“. Das Aussehen darf sich ändern, der Zweck bleibt.
- Zwei Ebenen nutzen: Basis-Tokens für die Rohwerte, semantische Tokens für den Einsatz.
- Namen in Figma und Webflow angleichen: Sonst entstehen doppelte Tokens und niemand weiß, welcher gilt.
- Wenige, bewusste Werte: Eine Abstandsskala mit sechs Stufen reicht meistens.
- Dokumentieren: Ein Token ohne Hinweis, wofür er gedacht ist, wird früher oder später falsch benutzt.
Genau das ist mein Alltag: Tokens in Figma sauber aufbauen und 1:1 nach Webflow bringen, ohne Dubletten und ohne Rätselraten. Wie das für dich aussehen könnte, zeige ich dir gern – komm einfach auf mich zu.
Tokens, die in Figma und Webflow dasselbe sagen
Du willst, dass Design, Website und KI-Tools mit denselben Werten arbeiten? Genau das ermögliche ich für meine Kund:innen – sauber benannt, dokumentiert und direkt in Webflow umgesetzt. Ich freu mich auf dein Projekt!
Diese Leistungen passen zuDesign Tokens
Über den Autor
Als erfahrener Brand Designer, Webdesigner und zertifizierter Webflow Expert betreue ich schon seit vielen Jahren Kund:innen aus verschiedensten Branchen und verhelfe ihnen durch herausragendes Design zu mehr Marktanteilen.
