Durch ein effizientes Design System in Figma konnten Design- & Entwicklungsprozesse neuer Software-Komponenten um bis zu 50% beschleunigt werden.

Als freiberuflicher Interface Designer und Webflow Spezialist helfe ich vorwiegend KMUs bei der Strategie, dem Design und der Entwicklung ihrer Webseite. Darüber hinaus konnte ich mir durch diverse Corporate-Projekte einen Expertenstatus im Bereich Design Systems mit Figma erarbeiten.

Eines dieser Projekte durfte ich zusammen mit dem Consulting- & IT-Haus All For One durchführen. Die Ausgangslage vor der Zusammenarbeit war eine umfangreiche Bibliothek aus hunderten bereits programmierten Komponenten und Layouts. Als Grundlage fehlte jedoch ein strukturiertes Design System. Komponenten wurde über Jahre hinweg in Sketch ohne klaren Designprozess in unterschiedlichen Files entwickelt. 

Dies hatte mehrere Probleme zur Folge:

• durch den fehlenden Design-Prozess lagen an vielen Stellen Unstimmigkeiten im Design vor, z.B. Abweichungen vom Font-System oder Abständen
• dadurch, dass die Komponenten nicht zentral gespeichert wurden, existierten viele garnicht mehr in Sketch, sondern nur noch als fertig programmierte Variante
  

Daraus resultierte ein hoher Kosten- und Zeitaufwand:

• Hoher Entwicklungsaufwand neuer Komponenten durch den fehlenden Design-Prozess, mehrere Feedback-Loops mit Entwicklern notwendig
• Entwicklung neuer Layouts in Sketch fast unmöglich, da rund 85% der Komponenten nicht zur Verfügung standen
• Extrem hoher Einarbeitungsaufwand für neue Designer
  

Um diese Probleme aus der Welt zu schaffen habe ich im ersten Schritt ein Design System in Figma entwickelt, welches in Atome, Moleküle und Organismen strukturiert ist. Alle Komponenten sind mit wenigen Klicks über das Asset-Management für ingesamt 4 unterschiedliche Viewports in Figma erreichbar. Durch die vollständige Bibliothek an Komponenten können neue Layouts in kurzer Zeit entwickelt werden. Außerdem wurde so die Einarbeitungszeit für neue Designer drastisch reduziert.

Im zweiten Schritt habe ich in enger Abstimmung mit den Designern und den Entwicklern einen klaren Prozess entwickelt, der nicht nur den Designern vorgibt, nach welchem Schema eine neue Komponente designed wird, sondern auch wie diese für die Entwickler dokumentiert werden. Die Wahrscheinlichkeit von Unregelmäßigkeiten im Design konnte so auf ein Minimum gesenkt werden. Gleichzeitig wird auch die Entwicklungszeit reduziert, da durch die klare Dokumentation weniger Abstimmungsbedarf zwischen Designern und Entwicklern besteht.