Topic:
Creating Interactive Applications with Figma for Qt and QML
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.
