Design Systems: Von Figma zu Code

Ein Design System ist eine Sammlung von wiederverwendbaren Komponenten, Design-Entscheidungen und Dokumentation, die ein Team befähigt, konsistente Produkte schneller zu bauen und zu iterieren.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Komponentenbibliothek, UI-Kit, Design Language, Component Library

Was ist ein Design System?

Ein Design System ist mehr als ein Style Guide oder eine UI-Komponentenbibliothek. Es ist ein lebendiges Werkzeug, das die Brücke zwischen Design und Entwicklung schlägt: Die visuelle Sprache eines Produkts (Farben, Typografie, Spacing, Icons) ist darin ebenso definiert wie die Bausteine (Buttons, Karten, Formulare) und die Regeln für deren Einsatz.

Bekannte Design Systems: Google Material Design, Apple Human Interface Guidelines, IBMs Carbon Design System, Shopifys Polaris, Salesforces Lightning.

Für Designer relevante Frage: Wie entsteht ein Design System, und wie verknüpft es sich mit der Code-Implementierung?

Erklärung

Anatomie eines Design Systems

1. Foundation / Tokens Die unterste Ebene: grundlegende Designentscheidungen, die das gesamte System prägen:

• Farben: Primär, Sekundär, Neutral, Semantisch (Erfolg, Fehler, Warnung). Farben im Web: HEX, RGB, HSL, oklch erklärt Farbformate und Token-Konzepte.
• Typografie: Schriftfamilien, Skalen, Zeilenabstände (Webfonts: Einbindung, Performance, Lizenzen)
• Spacing: Abstands-Skala (oft 8pt-Basis)
• Border Radius, Shadows, Icons: Stilentscheidungen für das gesamte System
• Raster: Spalten, Gutter, Margins (Grid-Systeme im Web: 12-Spalten, CSS Grid, Flexbox)

Diese Werte werden als Design Tokens definiert: benannte Variablen, die in Figma und Code denselben Wert tragen. Ein Token color-primary hat in Figma den Hex-Wert #2563EB und im CSS die Variable --color-primary: #2563EB;.

2. Komponenten Bausteine des Interfaces, die auf den Foundations aufbauen:

• Atoms: kleinste Elemente – Button, Input, Label, Icon
• Molecules: kombinierte Atoms – Suchfeld (Input + Button), Form-Zeile (Label + Input + Error)
• Organisms: komplexe Einheiten – Navigation, Produktkarte, Hero-Section
• Templates: Seitenlayouts ohne echte Inhalte
• Pages: Templates mit realen Inhalten

Diese Hierarchie basiert auf Brad Frosts Atomic Design (2016), einem einflussreichen Framework für Design Systems.

3. Patterns Richtlinien für wiederkehrende Interaktionsmuster: Wie werden Formulare validiert? Wie erscheinen Modale? Welche Navigationsmuster werden genutzt?

4. Dokumentation Beschreibt, wann und wie Komponenten eingesetzt werden, nicht nur wie sie aussehen. Eine Dokumentation ohne Nutzungsrichtlinien ist nur ein Style Guide.

Von Figma zu Code

Das Herzstück moderner Design Systems ist die Verbindung zwischen Figma und Code. Mehrere Ansätze existieren:

Design Tokens als Brücke Token-Werte werden in Figma (über Figma Variables oder das Plugin „Tokens Studio") definiert und als JSON-Datei exportiert. Das Entwicklungsteam nutzt diese JSON-Datei mit einem Tool wie Style Dictionary, um CSS-Variablen, JavaScript-Konstanten oder native Werte für iOS/Android zu generieren.

Figma → Storybook Storybook ist ein Open-Source-Tool, in dem Frontend-Entwickler Komponenten isoliert bauen, dokumentieren und testen. Plugins wie „Chromatic" verbinden Figma-Designs mit Storybook-Komponenten. Designer können prüfen, ob die Code-Implementierung dem Design entspricht.

Figma → Code via Auto-Code-Plugins Plugins wie Figma Dev Mode, Framer oder Builder.io können Figma-Designs in Code umwandeln. Das Ergebnis ist selten direkt produktionsreif, aber ein guter Startpunkt. Handoff an Entwickler: Figma, Zeplin, Storybook beschreibt den Handoff-Prozess im Detail.

Varianten und Props

In modernen Design Systems werden Komponenten mit Varianten definiert: Ein Button hat Varianten für Primary, Secondary, Destructive; für Large, Medium, Small; für Normal, Hover, Disabled.

In Figma werden Varianten mit dem Variants-Feature erstellt. In Code entsprechen sie Props (Eigenschaften) einer Komponente. Eine konsistente Benennung ist entscheidend: Wenn Figma Variant=Primary, Size=Large, State=Disabled verwendet, sollte die Code-Komponente dieselbe Terminologie nutzen.

Beispiele

Material Design 3: Googles aktuelles Design System für Android und Web. Vollständige Token-Dokumentation, Figma-Kits, Storybook-Implementierungen und Richtlinien für Barrierefreiheit (Barrierefreiheit im Web (WCAG 2.2) für Designer).

Tailwind CSS: Kein klassisches Design System, aber ein utility-first Framework mit einer vordefinierten Token-Skala für Farben, Spacing und Typografie. Viele Teams bauen ihre Design Systems auf Tailwinds Tokens auf.

Radix UI + shadcn/ui: Open-Source Headless Components (keine eigene Optik) kombiniert mit vorgestalteten Komponenten. Ermöglicht schnelles Aufbauen eines eigenen Design Systems.

In der Praxis

Wann brauche ich ein Design System?

Ein vollständiges Design System lohnt sich ab einer gewissen Teamgröße und Produktkomplexität. Für kleinere Projekte reicht oft ein gut strukturiertes Figma-UI-Kit mit Styles und Komponenten.

Faustregel:

• 1–2 Designer, kleines Team: Figma UI-Kit mit globalen Styles
• 3–10 Designer, mehrere Produkte: Token-basiertes System mit Dokumentation
• Enterprise: Vollständiges Design System mit Token-Pipeline, Storybook und Governance

Design System Governance

Ein häufig unterschätzter Aspekt: Wer pflegt das Design System? Wer entscheidet über neue Komponenten? Wie werden Breaking Changes kommuniziert?

Ohne klare Governance veraltert ein Design System schnell. Erfolgreiche Systeme haben:

• Klare Ownership (Design System Team oder designierter Verantwortlicher)
• Beitragsmodell (wie können Teams neue Komponenten vorschlagen?)
• Versionierung und Changelog

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Muss ein Design System Code enthalten? Nicht zwingend – aber ohne Code-Entsprechung ist es kein echtes Design-zu-Code-System. Ein reines Figma-Kit ist der Anfang, aber kein vollständiges Design System.

Wie fange ich an? Klein beginnen: Zuerst Tokens für Farben und Typografie definieren. Dann die meistgenutzten Komponenten (Button, Input, Card) aufbauen. Schrittweise erweitern.

Was ist der Unterschied zwischen Figma Variables und Tokens Studio? Figma Variables (native Funktion, seit 2023) erlaubt einfache Token-Definitionen direkt in Figma. Tokens Studio (Plugin) bietet erweiterte Funktionen wie Multi-Mode-Tokens, JSON-Export und GitHub-Integration.

Verwandte Einträge

• Farben im Web: HEX, RGB, HSL, oklch – Farbsysteme und Tokens
• Webfonts: Einbindung, Performance, Lizenzen – Typografie im Design System
• Grid-Systeme im Web: 12-Spalten, CSS Grid, Flexbox – Raster-Definitionen
• Handoff an Entwickler: Figma, Zeplin, Storybook – Von Figma zu Code
• Barrierefreiheit im Web (WCAG 2.2) für Designer – Barrierefreiheit im System verankern
• Dark Mode Design: Farben und Kontraste – Multi-Mode-Themes im Design System

Weiterführend

• Frost, B. (2016). Atomic Design. Brad Frost.
• Suárez, D. et al. (2020). Design Systems. Smashing Magazine.
• Nathan Curtis (2019). Releasing Design Systems. EightShapes.
• Figma (2024). Variables and Design Tokens.
• Storybook (2024).