In vielen Teams wachsen UI-Dateien von Projekt zu Projekt einfach mit. Buttons werden kopiert, Farben leicht angepasst, Abstände grob geschätzt. Irgendwann passt nichts mehr richtig zusammen. Ein strukturiertes UI-Design-System in Figma löst dieses Problem und macht Layout-Arbeit deutlich schneller und übersichtlicher.
Der folgende Leitfaden zeigt, wie ein Design-System in Figma von Grund auf aufgebaut wird: von Farb- und Typografie-Tokens über Basis-Komponenten bis zu komplexen Layouts – inklusive konkreter Dateistruktur, Benennung und Team-Workflow.
Grundlagen für ein UI-Design-System in Figma klären
Bevor Komponenten gebaut werden, braucht das System eine klare Basis. Sonst entstehen zwar saubere Buttons, aber im nächsten Projekt passen sie doch nicht mehr.
Design-Ziele und Rahmenbedingungen definieren
Am Anfang steht die Frage: Wofür wird das System eigentlich gebraucht? Für eine einzelne Website, mehrere Marken oder ein ganzes Produktportfolio? Davon hängt ab, wie flexibel Farben, Typografie und Layout-Regeln angelegt werden.
Wichtige Punkte für den Start:
- Zielplattform: Web, App oder beides?
- Markenwelt: eine Brand oder mehrere Marken in einem System?
- Teamgröße: Solo-Designer:in oder mehrere Teams gleichzeitig?
- Entwicklungsstack: z. B. React, Vue, Designsystem-Bibliothek im Code
Wer schon ein Markenhandbuch oder ein bestehendes Layout hat, sollte es als Grundlage nutzen. So bleibt das System anschlussfähig an vorhandene Projekte.
Dateistruktur und Namenskonzept festlegen
Eine durchdachte Struktur entscheidet, ob das System später leicht nutzbar ist. Bewährt hat sich eine Trennung in mindestens drei Figma-Dateien:
- Foundations: Farben, Typografie, Abstände, Raster, Icons
- Components: Buttons, Formulare, Navigation, Karten, Module
- Templates/Layouts: Seiten, Screens, View-States (z. B. leer, Fehler, Erfolg)
Innerhalb der Dateien helfen einheitliche Namensmuster wie Button / Primary / Default oder Input / Text / Error. Diese Struktur macht es leicht, einzelne Varianten zu finden und zu filtern.
Wer sich tiefer mit Layout-Rastern im Web beschäftigen möchte, findet in CSS Grid Layout praxisnah nutzen zusätzliche Praxisbeispiele für den Übergang ins Frontend.
Design-Tokens in Figma anlegen: Farben, Schrift, Spacing
Bevor der erste Button entsteht, braucht es wiederverwendbare Grundbausteine – sogenannte Design-Tokens. In Figma lassen sie sich über Styles und Variablen sauber abbilden.
Farb-System mit Styles und Variablen aufsetzen
Ein Farb-System sollte nicht nur aus ein paar markanten Tönen bestehen, sondern abgestufte Paletten beinhalten. Statt „Blau 1, Blau 2“ helfen sprechende Namen wie brand/primary, background/base oder border/subtle.
Praktisches Vorgehen:
- Hauptfarben definieren (Brand, Akzent, Erfolg, Warnung, Fehler)
- Helle und dunkle Abstufungen für Hintergründe und Rahmen anlegen
- Textfarben für verschiedene Kontraste (z. B. auf hell / auf dunkel) planen
- In Figma als Color Styles speichern und zusätzlich Variablen für Themen wie Light/Dark-Mode nutzen
So bleibt das System anpassbar, wenn später zusätzliche Marken oder ein Dark-Mode hinzukommen.
Typografie-System mit Hierarchien planen
Ein klares Typografie-System definiert, wie Überschriften, Fließtext, Labels und Meta-Informationen aussehen. Die Gestaltung sollte sich auf wenige gut definierte Größen und Schriftschnitte stützen.
Sinnvolle Klassen können sein:
- Heading 1–4 (z. B. Seiten-Titel, Abschnitts-Headline, Untertitel)
- Body Text (Standard-Fließtext, Variante klein/groß)
- UI-Text (Labels, Button-Text, Input-Platzhalter)
Diese Klassen werden in Figma als Text Styles angelegt und konsistent im gesamten System genutzt. Wer komplexere Markenauftritte plant, kann sich von Konzepten aus Designsystem-Typografie im Web inspirieren lassen.
Spacing- und Layout-Raster definieren
Uneinheitliche Abstände machen Interfaces unruhig und erschweren die Entwicklung. Ein Spacing-System mit festen Stufen – etwa in 4er- oder 8er-Schritten – schafft Ordnung.
So lässt sich ein einfaches System aufbauen:
- Spacing-Skala festlegen (z. B. 4, 8, 12, 16, 24, 32, 40 usw.)
- Diese Stufen für Innenabstände, Außenabstände und Lücken zwischen Elementen verwenden
- Raster und Spalten für typische Breakpoints (Mobile, Tablet, Desktop) definieren
Wer Abstände konsequent nutzt, kann später viel schneller Layout-Entscheidungen treffen. Mehr zur Planung von Abstandssystemen zeigt Designsystem-Abstände im UI.
Komponenten in Figma: Vom Atom zur komplexen UI
Sind Tokens und Styles definiert, beginnt der Aufbau der eigentlichen Komponenten. Hier entscheidet sich, wie leicht sich das System im Alltag bedienen lässt.
Basis-Komponenten: Buttons, Inputs, Badges
Die Basis-Komponenten sind die kleinsten UI-Bausteine, die im gesamten Layout immer wieder vorkommen. Dazu gehören:
- Buttons (Primary, Secondary, Tertiary, Icon-Only)
- Formularfelder (Text, E-Mail, Passwort, Textarea)
- Checkboxen, Radios, Switches
- Badges, Tags, Chips
Jede dieser Komponenten sollte auf den zuvor definierten Tokens basieren: Farben aus dem Farb-System, Typografie aus den Text Styles, Abstände aus der Spacing-Skala.
Wichtig ist, Figma-Komponenten konsequent zu nutzen – also eine Master-Komponente zu definieren und alle Instanzen darauf aufzubauen. So lassen sich spätere Anpassungen mit wenigen Klicks im gesamten System ausrollen.
Varianten für Zustände und Plattformen nutzen
UI-Elemente haben fast immer Zustände: Standard, Hover, Fokus, Aktiv, Deaktiviert, Fehler. Figma-Varianten helfen, diese klar zu strukturieren.
Empfehlenswerte Struktur:
- Property „State“ (Default, Hover, Focus, Disabled, Loading)
- Property „Type“ (Primary, Secondary, Ghost, Danger)
- Optional Property „Size“ (Small, Medium, Large)
Diese Logik kann sich durch das gesamte System ziehen. Wer im Team arbeitet, sollte auf klare Property-Bezeichnungen achten. Sie tauchen später in der rechten Seitenleiste auf und bestimmen, wie schnell Teammitglieder passende Varianten finden.
Komplexere Module aus Basis-Komponenten zusammensetzen
Im nächsten Schritt werden aus Buttons, Inputs und Typo-Elementen größere Module zusammengesetzt, zum Beispiel:
- Suchleiste mit Input, Icon-Button und Filter-Chip
- Produktkarte mit Bild, Titel, Preis, Badge und CTA-Button
- Formular-Section mit Headline, Hilfetext und mehreren Feldern
Auch diese Module sollten wiederum als Komponenten angelegt werden. So lassen sich ganze Sektionen problemlos mehrfach im Projekt einsetzen und bei Bedarf zentral anpassen.
Figma Auto Layout und Layout-Raster gezielt einsetzen
Damit ein Design-System nicht nur auf der Startauflösung gut aussieht, sollte es auf unterschiedliche Inhalte und Bildschirmgrößen reagieren können. Hier spielen Auto Layout und Layout-Raster die zentrale Rolle.
Auto Layout für flexible Komponenten konfigurieren
Mit Auto Layout passen sich Buttons, Karten und ganze Sektionen flexibel an Textlängen und Inhalte an. Ein gut eingestelltes Auto Layout reduziert die Anzahl benötigter Varianten und macht das System robuster.
Zentrale Einstellungen:
- Innenabstände anhand der Spacing-Skala definieren
- Zwischenabstände konsistent wählen (z. B. immer 8 oder 16 px)
- Resize-Verhalten festlegen (Hug, Fixed, Fill Container) je nach Einsatzzweck
- Ausrichtung (Alignment) bewusst wählen, z. B. Links, Mitte, Space-Between
Wer tiefer in die Technik einsteigen möchte, findet in Figma Auto Layout meistern eine ausführliche Schritt-für-Schritt-Erklärung.
Layout-Grids für Seiten und Komponenten nutzen
Layout-Grids helfen, Spaltenbreiten, Ränder und vertikale Rhythmuslinien einzuhalten. Gerade bei responsiven Webdesigns sind sie unverzichtbar.
Empfehlungen für den Einsatz:
- Für Desktop-Seiten ein Spaltenraster anlegen (z. B. 12 Spalten mit passenden Rändern)
- Für Mobile-Layouts ein einfacheres Raster verwenden (z. B. 4 Spalten)
- Grids nicht nur auf Frames, sondern auch auf wichtigen Komponenten einsetzen (z. B. Cards oder Module mit mehrspaltigen Inhalten)
Ein konsistentes Raster macht es Entwicklern leichter, das Design exakt im Code nachzubauen.
Workflow: Design-System im Team pflegen und erweitern
Ein Design-System ist nie „fertig“. Es lebt von Feedback, Verbesserungen und einer klaren Governance – also Regeln, wer was ändern darf und wie neue Komponenten hinzukommen.
Versionierung und Freigabe-Prozess definieren
Damit nicht jede spontane Änderung live im System landet, braucht es einen einfachen Prozess. Typischer Ablauf:
- Neues Element im Projekt-File entwerfen
- Im Team besprechen und auf Barrierefreiheit, Konsistenz und Umsetzbarkeit prüfen
- Nach Freigabe als neue Komponente in die System-Datei übernehmen
- Version der System-Datei dokumentieren (z. B. v1.1 – neue Formulare, v1.2 – überarbeitete Navigation)
Klare Zuständigkeiten helfen, Konflikte zu vermeiden: Eine Person oder ein kleines Core-Team verwaltet das System und entscheidet über Änderungen.
Dokumentation direkt in Figma aufbauen
Gute Komponenten allein reichen nicht. Erst eine kurze, klare Dokumentation macht das System auch für neue Teammitglieder verständlich.
Hilfreiche Inhalte in der Datei:
- Einleitende Seite mit Überblick und Prinzipien (z. B. Tonalität, Zielgeräte, Markenwerte)
- Kurze Guidelines pro Komponentengruppe (wann welche Button-Variante, welche Formulartypen wofür)
- Beispiele für richtige und falsche Nutzung
Einige Teams ergänzen zusätzlich Links zu Code-Storybooks oder Frontend-Playgrounds, um das Zusammenspiel von Design und Entwicklung zu verdeutlichen.
So geht’s: Kleiner Fahrplan für dein Figma-Design-System
Zum Abschluss ein kompakter Ablauf, der sich in neuen oder bestehenden Projekten anwenden lässt.
- Bestehende UI-Screens sammeln und wiederkehrende Elemente markieren.
- Foundations-Datei anlegen: Farben, Typografie, Spacing und Grids als Styles definieren.
- Basis-Komponenten in Figma erstellen: Buttons, Inputs, Badges, Navigation.
- Varianten für Zustände (Hover, Fokus, Fehler) und Größen anlegen.
- Module aus den Basis-Elementen bauen (Karten, Formular-Sektionen, Header).
- Auto Layout und Grids so konfigurieren, dass Komponenten flexibel bleiben.
- Dokumentations-Seiten in der Datei ergänzen und einen Freigabe-Prozess festlegen.
FAQ zum Aufbau eines Figma-Design-Systems
Ab wann lohnt sich ein eigenes Design-System?
Sobald ein Projekt über mehr als ein paar Landingpages hinausgeht oder mehrere Personen am Interface arbeiten, spart ein strukturiertes System Zeit. Auch für Solo-Freiberufler lohnt sich ein kleines System, um wiederkehrende Muster bei Kund:innen schnell anpassen zu können.
Wie detailliert sollten Komponenten am Anfang sein?
Zu Beginn reicht eine solide Grundausstattung: Buttons, Input-Felder, Karten, Navigation, grundlegende Layout-Module. Es ist besser, mit einem schlanken Kern zu starten und das System anhand echter Projektanforderungen zu erweitern, statt zu viele Spezialfälle im Voraus zu bauen.
Wie bleiben Entwickler:innen und Design-Team synchron?
Regelmäßige Abstimmungen, gemeinsame Reviews und ein Abgleich zwischen Figma-Komponenten und Code-Bibliotheken sind entscheidend. Hilfreich ist es, die gleiche Struktur und Benennung in Figma und im Code zu verwenden. So verstehen alle sofort, welche Komponenten zusammengehören.
Wie geht man mit Markenänderungen oder Rebrands um?
Idealerweise werden zunächst die Foundations angepasst: Farben, Typografie, eventuell Spacing. Wenn alle Komponenten sauber auf diesen Grundlagen aufbauen, aktualisiert sich das meiste Design automatisch. Einzelne Spezialfälle lassen sich danach gezielt nacharbeiten.
