Thema:
Interaktive Anwendungen mit Figma für Qt und QML realisieren
Qt (sprich: «cute») ist ein plattformübergreifendes Framework, das für die Entwicklung von Desktop-, Mobile- und Web-Applikationen verwendet wird. Es wird derzeit besonders in der Automobilbranche eingesetzt, da es ebenfalls die Möglichkeit bietet, Embedded Systems zu entwickeln. Viele moderne Fahrzeuge (Mercedes, Porsche, Toyota …) verwenden Qt für ihre interaktiven Dashboard-Displays.
In unserem Team haben einen praktischen Workflow entwickelt, mit dem wir ohne grosse Umwege von UX-Konzepten zu fertigen Qt-Frontends kommen. Dieser Workflow wird speziell auf die Bedürfnisse unserer Kunden zugeschnitten und bietet schlanke Schnittstellen zu Entwickler-Teams. So können wir Anwendungen schnell und effizient realisieren.
Unser Workflow beginnt mit der Entwicklung von Wireframes und Userflows. Das Online-Tool Miro ermöglicht uns dabei eine direkte Zusammenarbeit mit unseren Kunden. So können wir die Anforderungen der Anwendungen schnell verstehen und Verbesserungen vorschlagen. Auf dieser Basis erstellen wir Prototypen, um das UX-Konzept der Anwendung zu validieren.
Nachdem die Usability der Workflows in Anwendertests über mehrere Iterationen verbessert und bestätigt wird, beginnen wir mit dem UI-Design in Figma. Idealerweise stützen wir uns dabei auf ein Designsystem, um konsistente Layouts zu erstellen. Oft ergebe sich in diesem Schritt noch neue Ideen und Fragestellungen, die laufend in kleineren User Tests validiert werden.
Die fertigen Layouts werden mithilfe des Figma-Plugins «Qt Bridge to Figma» in QML exportiert. Anfangs waren die Ergebnisse mit diesem Tool ziemlich ernüchternd. Mit ein paar Anpassungen konnten wir das UI-Design aber pixelgenau in Qt umsetzen und sogar in Details noch optimieren. Besonderes Augenmerk legen wir darauf, Stil-Definitionen wie Farben, Typografie, Abstände und Formen in einer zentralen Theme-Datei festzulegen. Layout-Prinzipien werden ebenfalls in Figma definiert und dann mithilfe von Qt Layout umgesetzt. Dadurch stellen wir sicher, dass diese Definitionen in der gesamten Anwendung einheitlich sind. Änderungen können so zentral angepasst werden. Dieser Schritt ist entscheidend, um die volle Kontrolle über das Endprodukt zu behalten.
Motion Design ist ein wichtiger Bestandteil moderner Applikationen. Animationen und Transitionen machen Interaktionen intuitiver, steigern das Engagement der Anwender und stärken die Markenidentität. Die Umsetzung von Motion Design ist deshalb ein Kernelement unseres Workflows. Wir skizzieren unsere Ideen mit den einfachen Animationstools von Figma. Das Ergebnis kann anschliessend von unserem Frontend Engineer direkt in die Qt-Anwendung integriert werden. Der direkte Kontakt von Designer und Frontend-Entwickler sorgt dabei für eine schnelle und qualitativ hochwertige Umsetzung. Die nahtlose Integration von Animationen ist eine der Stärken unseres Workflows.
Die leistungsstarke Werkzeugpalette und unser UX/UI-Workflow ermöglichen uns, animierte Qt-Frontends effizient umzusetzen. Mögliche Fehlerquellen an der der Schnittstelle zwischen Design und Frontend-Umsetzung haben wir weitgehend ausgeschaltet. So sorgen wir für Applikationen, die sich dank überzeugender User Experience und zügigem Time-to-market erfolgreich in einem kompetitiven Marktumfeld behaupten können.
