Figma Design System

Jedes neue Projekt beginnt mit den gleichen Fragen: Welche Farben? Welche Schrift? Welche Abstände, Größen, Icons? Und jedes Mal entsteht eine neue Datei, ein neuer Aufbau – oft mit kleinen Abweichungen, manchmal ohne Dokumentation. Genau das wollte ich ändern.

Kategorie
UI Design
Neuester Stand
June 23, 2025

Systematisch statt jedes Mal neu

Ich habe ein vollständiges UI-Basissystem aufgebaut, das alle relevanten Komponenten und Designgrundlagen abbildet – bewusst modular, anpassbar und dokumentiert.

Inhalte meines Designsystems:

  1. Typografie-Styles mit responsiven Skalierungen
  2. Farbvarianten & Semantikfarben (z. B. für Status, Aktionen, Kontrast)
  3. Spacing- und Grid-Systeme für konsistente Layouts
  4. Shadows & Layer Styles für Tiefe und Struktur
  5. Icon-Komponenten mit Austauschfunktion
  6. Komponenten-Bibliothek: Buttons, Inputs, Navigation, Modale u. v. m.
  7. Dokumentationsbereiche für Übergabe an Entwickler:innen und Kund:innen

Pragmatisch, skalierbar, wiederverwendbar

Mir ging es nicht darum, ein „perfektes System“ zu bauen, sondern eines, das für echte Projekte funktioniert. Das bedeutet:

  1. Schneller Start bei jedem neuen Projekt
  2. Weniger doppelte Arbeit durch Wiederverwendbarkeit
  3. Einheitlichkeit im Design – besonders bei größeren Projekten
  4. Klare Kommunikation mit Entwicklern durch definierte Tokens & Strukturen
  5. Mehr Transparenz für Kund:innen durch dokumentierte Grundlagen

Das System ist so aufgebaut, dass es für neue Projekte leicht angepasst werden kann: Farben, Schrift und Brand-Elemente lassen sich in wenigen Minuten tauschen – die zugrunde liegende Logik bleibt erhalten.

Struktur, die Zeit spart und Vertrauen schafft

Seitdem ich mein eigenes System nutze, kann ich neue Projekte nicht nur schneller starten, sondern auch klarer kommunizieren, was wie aufgebaut ist – intern wie extern. Entwickler:innen wissen sofort, welche Größen, Abstände und Varianten gelten. Auftraggeber:innen sehen direkt, auf welcher Basis das Design entsteht – und warum.

Es ist mehr als ein Figma-File: Es ist eine Grundlage, ein Werkzeug, ein gemeinsames Verständnis.

Warum mir das wichtig war

Weil gutes Design nicht bei der Oberfläche aufhört. Ein solides Designsystem spart nicht nur Zeit – es schafft Konsistenz, Vertrauen und Raum für kreative Lösungen, die auf einem starken Fundament stehen.