Automatisiertes UI-Engineering: Von Figma zu Code

Software-Designs stimmen selten mit dem Endprodukt überein. 'DesignSync' löst dieses Problem durch eine automatisierte Brücke zwischen dem Design-Tool Figma und dem Code, gewährleistet visuelle Konsistenz und spart über 65% manuellen Aufwand.

Der automatisierte Workflow: vom Design System zu getesteten Code-Artefakten.

Ausgangslage

In der modernen Softwareentwicklung besteht eine hartnäckige Lücke zwischen Design und Implementierung. Designer nutzen Tools wie Figma, um pixelgenaue Benutzeroberflächen zu erstellen, doch Entwickler müssen diese visuellen Spezifikationen anschliessend manuell in Code übersetzen. Dieser manuelle Prozess ist eine Hauptquelle für Ineffizienz und Qualitätsprobleme und führt zu:

• Effizienzverlust: Entwickler verbringen unzählige Stunden mit repetitiver "Übersetzungsarbeit".
• Qualitätsrisiken: Das Endprodukt weist oft visuelle Inkonsistenzen im Vergleich zum ursprünglichen Design auf.
• Kontextwechsel: Sowohl Designer als auch Entwickler müssen ständig zwischen Tools wechseln, was die Konzentration stört und den gesamten Prozess verlangsamt.

Problemstellung / Projektziel

Das Ziel dieses Projekts war es, diese Lücke durch die Entwicklung eines robusten Tools zu schliessen, das den gesamten Design-zu-Code-Workflow automatisiert. Unsere Lösung, das Figma-Plugin "DesignSync", integriert sich direkt in die Tools, die Teams bereits nutzen, und gewährleistet einen nahtlosen, konsistenten und hocheffizienten Übergabeprozess.

Entwickelte Lösung und ihre Vorteile

Das Ergebnis ist ein voll funktionsfähiger Figma-Plugin-Prototyp, der durch Usability-Tests validiert wurde. Die Tests bestätigten, dass DesignSync eine massive Effizienzsteigerung von über 65% im Vergleich zu traditionellen manuellen Workflows bietet.

• ✓ Drastische Zeitersparnis: Eliminiert stundenlange, mühsame manuelle Arbeit für Entwickler.
• ✓ Garantierte Konsistenz: Stellt sicher, dass das Endprodukt immer pixelgenau und designgetreu ist.
• ✓ Erhöhte Qualität: Automatisierte Tests verhindern visuelle Regressionen und Fehler, bevor sie den Nutzer erreichen.
• ✓ Unterbrechungsfreier Workflow: Durch die direkte Verbindung von Design- und Entwicklungstools werden Kontextwechsel eliminiert, sodass Teams fokussiert und produktiv bleiben können.

Schlüsselbegriffe

• FigmaEin führendes kollaboratives Design-Tool zur Erstellung von Benutzeroberflächen.
• Design SystemDie zentrale Bibliothek mit allen wiederverwendbaren Komponenten und Richtlinien für das Design eines Produkts.
• Design TokensDie kleinsten, atomaren Bestandteile eines Designs, wie z.B. ein spezifischer Farbwert oder eine Schriftgrösse.
• Automatisiertes TestenDer Einsatz von Software zur automatischen Überprüfung und Validierung der Code-Qualität.
• GitLabEine vollständige Plattform für Softwareentwicklung und Versionskontrolle.
• AngularEin beliebtes Framework zur Entwicklung moderner Webanwendungen.

Auftraggeber

Institut für Mobile und Verteilte Systeme (IMVS)
FHNW Hochschule für Technik

Team