Design-Systeme sind kein neues Konzept. Und doch scheitern viele Teams genau am Anfang: beim Setup - dem unscheinbaren, aber entscheidenden Fundament.

Nicht selten beginnt alles mit einem gut gemeinten Figma-File: ein paar Farben, Komponenten, Auto Layout, vielleicht eine Dokumentationsseite. Was fehlt, ist nicht Designqualität, sondern Systemverständnis.

Gerade der Setup-Prozess entscheidet, wie skalierbar, anschlussfähig und zukunftsfähig das System wird.

1. Strategisch denken, nicht nur strukturieren

Ein Design-System in Figma ist nicht einfach eine Sammlung von UI-Bausteinen. Es ist die sichtbare Manifestation strategischer Entscheidungen – über Plattformen, Marken, Rollen, Prozesse und Prinzipien.

Wenn diese Grundlagen fehlen, bleibt der Aufbau im besten Fall inkonsequent, im schlechtesten Fall unbrauchbar. Das System verliert Vertrauen, bevor es je seinen Wert entfalten konnte.

2. Vor dem Doing: Ziel, Kontext und Scope klären

Bevor ein Team mit dem Figma-Aufbau beginnt, sollte es sich diese Fragen stellen:

• Ziel: Was genau soll dieses Design-System ermöglichen? Wiederverwendbarkeit? Markenkonsistenz? Dev-Übergabe? Skalierung?
• Kontext: Entsteht das System im Rahmen eines Rebrandings, eines neuen Produkts oder als Konsolidierung bestehender Komponenten?
• Scope: Welche Plattformen (Web, native, embedded)? Welche Marken oder Themes (z. B. Multi-Brand oder White Label)? Welche Zielgruppen und Teams sollen damit arbeiten?

Diese Klärung beeinflusst jede Designentscheidung und gehört nicht ins „Später“.

3. Prinzipien und Anforderungen definieren

Ein funktionierendes Design-System braucht mehr als Komponenten – es braucht einen Kompass. Dieser zeigt sich in konkreten Prinzipien wie:

• Modularität vor Redundanz
• Accessibility ist Standard, kein Add-on
• Tokens statt fixer Werte
• Komponenten sind in Design und Code synchron gedacht

Auch organisatorische Fragen gehören dazu:

• In welcher Sprache wird dokumentiert?
• Welche Tools und Standards gelten für Naming, States, Varianten?
• Wer übernimmt Pflege und Weiterentwicklung?

Maintainer sind keine Monopolisten, Contributor bringen nicht automatisch Chaos.

In der Praxis bewährt sich meist ein hybrides Modell:

• Ein zentrales Maintainer-Team trägt Verantwortung für Struktur, Qualität und Releases.
• Gleichzeitig können dezentrale Teams oder einzelne Contributor Vorschläge einbringen – direkt (über Branches und Pull Requests) oder indirekt (z. B. über Feedbackrunden, RFCs oder Design-System-Guilds).

Entscheidend ist nicht, wer darf, sondern wie Beiträge strukturiert angenommen, geprüft und integriert werden. Nur so bleibt das System offen, kontrolliert und lebendig zugleich.

4. Struktur in Figma: Atomic Design & Tokens

Ein nachhaltiges Setup orientiert sich an klaren Ebenen. Das Prinzip des Atomic Designs bietet eine etablierte Orientierung:

• Design Tokens: Die kleinste Einheit: Farben, Abstände, Typografie, Radius. Sie sollten zentral sowie maschinenlesbar gepflegt werden (z. B. via Tokens Studio).
• Atoms & Molecules: Grundkomponenten wie Buttons, Inputs oder Comboboxen. States, Varianten und Responsiveness gehören hier dokumentiert.
• Organisms: Höherwertige UI-Patterns wie Cards, Modals, Filterleisten – zusammengesetzt aus mehreren Molekülen. Hier zeigt sich, wie gut das System auch im Produktkontext funktioniert.

Diese Struktur sollte sich in der Library- und File-Organisation widerspiegeln: getrennte Libraries für Foundation, Components, Patterns, ggf. Icons und Dokumentation.

5. Tools, Konventionen und Zusammenarbeit: Was wirklich zählt

5a. Token-Verwaltung und Pflegeprozesse

Ein skalierbares Setup braucht nicht viele Tools, sondern klare Strukturen und verlässliche Pflegeprozesse.

Plugins wie beispielsweise Tokens Studio ermöglichen die zentrale Pflege von Design Tokens, synchronisiert mit Figma und Code. Sie erweitern Figma um Funktionen wie strukturierten Import und Export oder die Anbindung an Repositories.

Für Multi-Brand-Designs oder Dark-/Light-Modi empfiehlt sich ein Setup, das auf Figma-Modes in Kombination mit Tokens Studio basiert. Damit lassen sich Token-Werte differenziert pflegen, thematisch gruppieren und gezielt für unterschiedliche Plattformen exportieren – etwa als light.json und dark.json.

Nur bei sehr spezifischen Anforderungen, etwa für Transformationslogik oder eine Integration in CI/CD-Pipelines, kann ein zusätzliches Tool wie Style Dictionary ergänzend sinnvoll sein.

Wichtig: Plugins wie Tokens Studio können die Token-Pflege erheblich erleichtern – wenn ihre Nutzung strategisch geplant, organisatorisch abgesichert und im Worst Case ersetzbar ist.

Wer das Design-System vollständig auf ein fragiles Plugin stützt, geht ansonsten unnötige technische Risiken ein.

5b. Naming & Struktur – keine Kür, sondern Pflicht

• Einheitliche Namenskonventionen (z. B. component/variant/state) unterstützen Orientierung, Dev-Handoff und automatisierte Mappings.
• Die Komponenten- und Library-Struktur (z. B. entlang Atomic Design) sollte konsistent in Figma und Code abbildbar sein.
• Dokumentierte Layer- und Frame-Namen (z. B. _Icon, _Spec) erhöhen Lesbarkeit und ermöglichen Automatisierung.

5c. Code-Schnittstelle & Dokumentation

• Storybook als lebendige Referenz für Developer
• Zeroheight oder Notion zur zentralen Systemdokumentation
• Figma Inspect und Dev Mode für Code-Snippets, Maße und States

Je besser Design und Code zusammenpassen, desto geringer ist die Reibung im Alltag der Produktteams.

6. Häufige Setup-Fehler – und wie man sie vermeidet

• Alles in einem File: unübersichtlich, schwer zu versionieren
• Keine Tokens: erschwert Handoff, Wartung und Skalierung
• Unklarer Scope: Komponenten sind zu generisch oder zu spezifisch
• Fehlende Zuständigkeiten: führt zu Wildwuchs und Inkonsistenz
• Kein Wartungsprozess: das System altert – und wird nicht mehr genutzt

7. Fazit: Ein gutes Setup spart mehr als es kostet

Ein durchdachtes Setup schafft Vertrauen – in Komponenten, in Prozesse, in das System selbst. Es bildet die Basis für Skalierung, Konsistenz und Zusammenarbeit. Und es signalisiert: Hier entsteht mehr als ein UI-Kit.

Wer den Setup-Prozess als strategischen Schritt versteht, legt das Fundament für ein Design-System, das langfristig trägt.