In der täglichen Produktentwicklung treffen zwei Welten aufeinander: Designer:innen, die in Figma strukturiert, visualisiert und prototypisiert arbeiten – und Entwickler:innen, die dieselben Ideen in Code übersetzen und dabei auf unseren technischen doubleSlash Living Styleguide setzen. Solange Design und Code unterschiedlichen Systematiken folgen, entsteht Reibung, wo eigentlich Geschwindigkeit und Klarheit nötig sind. Prototypen sehen gut aus, müssen aber mühsam manuell in technische Komponenten übersetzt werden. Anpassungen müssen doppelt gepflegt werden. Und immer wieder schleichen sich Inkonsistenzen ein. Unser bestehendes Setup bremste uns – und wir brauchten einen neuen Ansatz.
Naming Conventions: Der Schlüssel zur Effizienz
Der größte Fortschritt besteht darin, dass Design und Code heute dieselbe Systematik teilen. Figma-Komponenten heißen jetzt exakt so wie die entsprechenden Web-Components aus unserem Living Styleguide. Das hat einen entscheidenden Effekt: Die KI kann anhand des Namings der Figma-Komponente automatisch erkennen, welche Komponente aus dem Living Styleguide gemeint ist. Sie übersetzt Prototypen direkt in styleguide-konforme Oberflächen – ohne viel manuellen Aufwand. .
Der Model Context Protocol (MCP) Server von Figma übernimmt dabei eine zentrale Rolle. Er überträgt den gesamten Kontext des Figma Designs direkt per KI in unsere Living Styleguide Web-Components. Ein zusätzliches Cursor Ruleset verbessert das Prompting der KI erheblich und sorgt so für reproduzierbare Ergebnisse. Das bedeutet:
- Entwickler:innen müssen nicht mehr interpretieren
- Designer:innen müssen keine idealisierten Mockups mehr bauen
- Neue UI-Komponenten können sogar direkt aus Figma generiert werden
- Feedbackloops, Designabweichungen und aufwendiges „Ping-Pong“ werden massiv reduziert
Mehr Klarheit, weniger Reibung – Mit dem Designsystem Brücken bauen
Ein Designsystem erfüllt seinen Zweck dann am besten, wenn es Verständlichkeit schafft – visuell, technisch und semantisch. Genau das macht unsere aktuelle Lösung aus: Die gemeinsame Logik zwischen Figma und Living Styleguide sorgt dafür, dass Prozesse nicht nur schneller, sondern auch klarer und robuster werden. Gleichzeitig bleibt ein Designsystem immer nur so gut wie seine Pflege. Uneinheitliche Naming Conventions, fehlende Dokumentation oder unklare Varianten können selbst ein starkes System ins Wanken bringen – weshalb Konsistenz und kontinuierliche Weiterentwicklung essenziell bleiben. Besonders wertvoll ist heute, dass unsere Infrastruktur Automatisierung in beide Richtungen ermöglicht:
- Von Figma in den Living Styleguide: Neue Komponenten, die es im Living Styleguide noch nicht gibt, können zunächst in Figma modelliert und anschließend per KI in echte Web-Components überführt werden.
- Vom Living Styleguide nach Figma: Umgekehrt bauen wir in Figma bereits mit Komponenten, deren Naming exakt den Living Styleguide Web-Components entspricht. Die KI kann daraus direkt produktionsnahe UIs generieren – ohne interpretieren zu müssen und ohne Medienbruch.
Persönliches Fazit: Ein Designsystem als unsichtbarer Helfer
Ein Designsystem ist dann erfolgreich, wenn Teams es gar nicht mehr bewusst wahrnehmen – weil es selbstverständlich Teil ihres Arbeitsalltags und des Softwareentwicklungsprozesses in den Phasen Exploration & Design geworden ist. Es wirkt im Hintergrund und reduziert Komplexität, bevor sie entsteht. Die enge Kopplung unserer Figma UI Library mit dem doubleSlash Living Styleguide ist einer der größten Schritte, die wir in Richtung Effizienz, Konsistenz und produktive Zusammenarbeit gemacht haben – für die Weiterentwicklung des Styleguides und für neue Produkte.
