Designsystem-Glossar

Das Vokabular, mit dem Designsystem-Arbeit läuft, klar erklärt. Die Einträge beschreiben das Fachgebiet, nicht das Produkt. Sie helfen dir also auch, wenn du Flash DSM nie öffnest.

Dark-Mode-Tokens

Dark-Mode-Tokens sind ein zweiter Satz von Werten, der an dieselben semantischen Token-Namen gebunden ist wie das helle Theme. Ein Moduswechsel richtet Namen wie --color-surface auf andere Farben aus, ohne dass eine Komponente wissen muss, welcher Modus gerade aktiv ist.

Design zu Code

Design zu Code beschreibt den Weg von Entscheidungen, die in einem Werkzeug wie Figma getroffen wurden, zu lauffähigem Frontend-Code. Die tragfähige Variante überträgt Design-Tokens, statt Markup aus einer Zeichenfläche zu erzeugen: Tokens bleiben gültig, wenn sich die Oberfläche ändert, generiertes Markup nicht.

Design-Token

Ein Design-Token ist ein benannter Wert, der genau eine Design-Entscheidung festhält - etwa eine Farbe, eine Abstandsstufe oder eine Schriftgröße - damit diese Entscheidung in Design-Werkzeugen und im Code wiederverwendet werden kann, statt an jeder Stelle von Hand ausgeschrieben zu werden.

Designsystem

Ein Designsystem ist der gemeinsame Satz an Design-Entscheidungen, Komponenten und Regeln, mit dem ein Team ein Produkt konsistent baut. Dazu gehören üblicherweise Design-Tokens, eine Komponentenbibliothek, Nutzungsrichtlinien und Dokumentation - gepflegt als eine einzige Quelle der Wahrheit für Design und Code.

Farbskala

Eine Farbskala ist eine geordnete Folge von Abstufungen eines Farbtons, üblicherweise von 50 bis 900 nummeriert, so gebaut, dass die Schritte wahrnehmungsgleich wirken und bestimmte Kombinationen bekannte Kontrastverhältnisse erfüllen. Damit wählt ein Team Farben nach Rolle und Stufe statt nach beliebigen Hex-Werten.

Figma-Variablen

Figma-Variablen sind benannte Werte in einer Figma-Datei für Farben, Zahlen, Zeichenketten und Wahrheitswerte, mit Modi für Fälle wie helles und dunkles Theme. Sie sind Figmas native Form von Design-Tokens, doch sie programmatisch über die Figma-REST-API zu lesen setzt einen Enterprise-Plan voraus.

MCP für Design-Tokens

Model Context Protocol ist ein offener Standard, der KI-Assistenten mit externen Werkzeugen und Daten verbindet. Auf Design-Tokens angewendet stellt ein MCP-Server die aktuellen Werte eines Projekts einem KI-Coding-Agenten bereit, damit erzeugte Komponenten das echte Designsystem verwenden statt Werte, die das Modell erfindet.

Semantisches Token

Ein semantisches Token ist ein Design-Token, das nach seiner Aufgabe benannt ist und nicht nach seinem Wert - etwa --color-text-danger statt --color-red-600. Es verweist meist auf ein primitives Token, wodurch sich der zugrunde liegende Wert ändern lässt, ohne irgendetwas umzubenennen, das ihn verwendet.

Token-Drift

Token-Drift ist das allmähliche Auseinanderlaufen zwischen den im Designsystem festgehaltenen Entscheidungen und den Werten, die ein Produkt tatsächlich verwendet. Es entsteht, wenn eine Oberfläche - eine Figma-Datei, ein Stylesheet, KI-generierter Code - die gemeinsame Quelle nicht mehr referenziert und eigene Werte ansammelt.

Typografische Skala

Eine typografische Skala ist die geordnete Menge der Schriftgrößen, die ein Designsystem zulässt, meist erzeugt durch Multiplikation einer Basisgröße mit einem festen Verhältnis. Text auf diese Stufen zu beschränken hält die Typografie einer von vielen Menschen gebauten Oberfläche konsistent.