Topic:
Creating Interactive Applications with Figma for Qt and QML

Topic:<br>Creating Interactive Applications with Figma for Qt and QML
A post by Tim Walther-Galatoire
30. Aug 2023
Our design process is characterized by a common guiding principle: result-oriented and efficient implementation always takes center stage for all teams. Therefore, the Interactive Experience team is constantly looking for ways to streamline the workflow. With Qt and Design Studio, we have found an environment that allows us to quickly convert layouts into code. This enables us to provide optimal interfaces to our clients' development teams.

Qt (pronounced ‘cute’) is a cross-platform framework used for developing desktop, mobile, and web applications. It is currently widely employed in the automotive industry, offering the capability to develop embedded systems as well. Many modern vehicles (Mercedes, Porsche, Toyota, etc.) use Qt for their interactive dashboard displays.

In our team, we have developed a practical workflow that allows us to efficiently transition from UX concepts to finished Qt frontends without significant detours. This workflow is tailored to the specific needs of our clients and provides streamlined interfaces to development teams, enabling us to rapidly and efficiently bring applications to life.

Our workflow starts with the development of wireframes and user flows. The online tool Miro facilitates direct collaboration with our clients, allowing us to quickly grasp application requirements and propose improvements. Based on this foundation, we create prototypes to validate the application’s UX concept.

After improving and confirming the usability of workflows through multiple iterations of user testing, we move on to UI design in Figma. Ideally, we rely on a design system to create consistent layouts. Often, this stage yields new ideas and questions that are continuously validated through smaller user tests.

The finalised layouts are exported from Figma to QML using the Figma plugin ‘Qt Bridge to Figma.’ Initially, the results with this tool were somewhat underwhelming, but with some adjustments, we were able to implement the UI design precisely in Qt and even optimise details further. We place particular emphasis on defining style attributes such as colours, typography, spacing, and shapes in a central theme file. Layout principles are also defined in Figma and then implemented using Qt Layout, ensuring consistency throughout the application. Changes can be centrally adjusted, a crucial step in maintaining full control over the end product.

Motion design is a crucial component of modern applications. Animations and transitions make interactions more intuitive, increase user engagement and reinforce brand identity. Implementing motion design is therefore a core element of our workflow. We sketch our ideas using Figma’s simple animation tools, and the results can be directly integrated into the Qt application by our frontend engineer. The direct collaboration between designer and frontend developer ensures a fast and high-quality implementation. Seamless integration of animations is one of the strengths of our workflow.

The powerful toolset and our UX/UI workflow enable us to efficiently implement animated Qt frontends. We have largely eliminated potential sources of errors at the interface between design and frontend implementation. This ensures that our applications, thanks to compelling user experiences and a swift time-to-market, can successfully compete in a competitive market environment.

 

NOSE AG
Hardturmstrasse 171
8005 Zürich
Switzerland

Landline: +41 44 533 19 00,

E-Mail: contact@nose.ch


Web Development:
Schlatter corporate GmbH
Davidstrasse 45
9000 St.Gallen
Switzerland
www.schlattercorporate.com
This site uses cookies to improve your browsing experience. By using this site and the associated use of cookies, you agree to our privacy policy. You can manage cookies in your browser settings at any time.