Thema:
Interaktive Anwendungen mit Figma für Qt und QML realisieren

Thema:<br>Interaktive Anwendungen mit Figma für Qt und QML realisieren
Ein Beitrag von Tim Walther-Galatoire
30.08.2023
Unser Designprozess zeichnet sich durch eine gemeinsame Leitidee aus: die ergebnisorientierte und effiziente Umsetzung steht bei allen Teams immer im Fokus. Daher ist auch das Interactive-Experience-Team immer auf der Suche nach Wegen, den Workflow zu optimieren. Mit Qt und dem Design Studio haben wir eine Umgebung gefunden, mit der wir Layouts schnell in Code umzuwandeln können. So können wir den Entwickler-Teams unserer Kunden optimale Schnittstellen bieten.

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.

News
NOSE AG
Hardturmstrasse 171
8005 Zürich
Switzerland

Telefon: +41 44 533 19 00,

E-Mail: contact@nose.ch


Web Development:
Schlatter corporate GmbH
Davidstrasse 45
9000 St.Gallen
Switzerland
www.schlattercorporate.com
Diese Seite benutzt Cookies, um Ihre Benutzererfahrung zu verbessern. Mit der Nutzung dieser Seite und der damit verbundenen Verwendung von Cookies stimmen Sie unseren Datenschutzbestimmungen zu. Cookies können Sie jederzeit in Ihren Einstellungen ihres Browsers verwalten.