Komponenten Refactoring
Design System Overhaul: Komponenten um 89% reduziert, für eine skalierbare UI/UX-Architektur über mehrere Produkte hinweg.
Problem → Ansatz → Impact
Problem
Monster-Komponenten mit 5k+ Ebenen... Figma Performance Crash
Ansatz
Basis-Komponenten + Slots + No States
Impact
111k → 12k Ebenen. Devs 3x schneller.
Die Geschichte
Als ich bei Basalt anfing, hatte das Team das gekaufte Untitled UI Design System für die zwei Produkte von Basalt angepasst. Selbständige Designer haben es fleißig ausgebaut und Varianten hinzugefügt.
🤯 Das Problem:
- ●Jedes Feature Request → neue Varianten in die Komponenten
- ●Alle States (hover, focus, disabled, loading) direkt eingebaut
- ●Produkt-spezifische Anpassungen → endlose Duplikate
- ●Nach 2 Jahren: Table Cell = 5484 Layer. Figma Performance tot
Turning Point: Brad Frost Workshop + Produkt-Pause. Bei 4 wachsenden Produkten habe ich die Pause genutzt und die Komponenten-Architektur auf den Kopf gestellt.
🤓 Mein Ansatz:
- ●Basis-System komplett aufgeräumt (Minimalismus)
- ●Produktspezifische Komponente auf Basis von Shell/Basis Komponenten in eigenem System
- ●States ausgelagert → separate Dokumentation
- ●Slots für maximale Flexibilität
Komponenten-Metriken
Base Table Cell
99,07%
Select
93,44%
84,24%
Header
99,33%
Single DatePicker
80,95%
Vorher / Nachher
Vorher
Monster-Komponenten mit 5k+ Ebenen
Alle möglichen Zustände, Varianten und Layouts in einer einzigen Komponente. Lange Ladezeiten, Recovery-Mode in Figma Dateien und schwer wartbare Varianten Sets.
Nachher
Schlankes Komponenten-System
Basis-Komponenten mit Slots und ausgelagerten States. Komponenten bleiben performant und flexibel über Produkte hinweg wiederverwendbar.
Erkenntnisse & Best Practices
Weniger ist mehr: Basis-Komponenten sollten minimal und flexibel sein
Slots statt Varianten: Flexibilität durch Komposition statt vordefinierte Varianten
States separat behandeln: Interaktionszustände nicht in jede Komponente einbauen
Produktübergreifende Basis: Gemeinsame Foundation für alle Produkte
Performance im Blick behalten: Layer Counter Plugin zur regelmäßigen Überprüfung nutzen