From design to application as the new kid on the block

Session Summary

How well does Design Studio fare in the hands of a new software engineer? As QtGraphs is close to succeeding the Data Visualization module, some of its examples will also need an upgrade. Such is the case with the StocQt example app, designed to showcase stock market data. This talk will walk through the design and implementation of a new look for StocQT and provide an example of how newcomers may approach designing and implementing an application using Figma, Qt Design Studio and Qt Creator.

Session Owners

Sakaria Pouke

Note-taker: Tomi Korpipää

Notes

Short intro of what's coming:

• updating application example, stocqt, to use live data and QtGraphs
• getting familiar to QtDesignStudio, no previous experience
• how complete newbie is able to get started from the scratch
• hoped takeaways: what can you do with it with a little study, get some curiosity to try it out

Presentation:

• introduction of self; SW engineer from Oulu working on QtGraphs
• as an engineer prefer using QtCreator
• bried intro into QtGraphs
• look into the old StocQt application example
  • was done with proprietary graph rendering
  • very dated in its outlook
• targets for new one: modern, mobile, live data, favourites view
  • design: simplicity, clarity, brand colors, intuitive navigation
  • portrait and landscape, colour code system
• 2 simple steps:
  •  1. import figma design to QDS
  •  2. add functionality
  • right..?
• export to design studio
  • intial idea: export all at once: (not so) surprisingly it didn't work, as everything is not converted automagically on import to QDS
  • refined idea: import as parts and assemble in QDS: this worked nicely, with an occasional element missing in import
  • perhaps we need more detailed documentation on how to do this successfully?
• layouts in QDS, different window scales for portrait and landscape
• visual example with NavBar
  • states are imported correctly from Figma
  • some icons might miss something, usually an issue with wrong size
• export from QDS to QtCreator: cmake, .ui.qml -file renaming where needed
  • changing things in QDS still possible after this
• Thoughts:
  • component importing was mostly effortless
    • some anchoring problems mostly
  • visualization tools are very helpful for fast iteration
  • code editing can be done in QDS too    
  • exporting from Figma was a bit awkward sometimes
  • QDS -> QtCreator was seamless
  • worked without tutorial knowledge, no tutorials were done prior to this work
  • existing examples helped
  • a lot less head-bashing than originally expected
  • would recommed for updating the visual quality of your applications

Discussion:

• were there problems with kit selection?
  • Qt 6.7 used in QtCreator, used the default in QDS. No problems so far
• did you use built-in components?
  • layouts, mousearea, but not any components specific to QDS
  • svgs
• workflow, start figma, use bridge, import to QDS, export to QtCreator, work on logic?
  • yes
• if you need to go back to figma, parts need to be recreated?
  • stuff comes out as separate objects, so nothing is really overwritten
  • you'll need to change object names elsewhere in code
• .ui.qml should not be renamed, the logic should be done elsewhere. Renaming will break parts of the process
• what did you have to do in QDS?
  • mostly layouting, as stuff was imported in pieces from Figma
• were different layouts used for portrait and landscape?
  • gridlayouts were used, needed some massaging