Designing UIs with Qt Quick 6/6, Practical Sketching
summary
Shows a concrete designer-to-code workflow: use Nokia Photoshop/Illustrator export scripts to export PSD to QML, keep layers minimal and named, and render Photoshop filters to PNG because filters must be rendered to PNG. Demonstrates building a working prototype inside Qt Creator by composing a flickable + states + mouseareas UI, adding a timer-driven splash fade, and iterating visually. Notes supported image formats (PNG, JPEG, SVG), and recommends post-export refactor: extract components, use ListView/delegate and proper ids to make the prototype production-ready.
AI-written summary · about
chapters (13)
- 0:00Introduction and Gamma-Ray demo
- 1:40Transition to module eight
- 2:22Exporting Photoshop designs to QML
- 5:39Building mock-up in Qt Quick Designer
- 14:15Adding flickable and grouping elements
- 20:04Creating states and mouse areas
- 30:38Finalizing the prototype
- 39:55Adding splash screen animation
- 45:20Refactoring code for developers
- 50:55Workflow between designers and developers
- 54:10Wireframing components concept
- 59:11Team collaboration and training
- 1:00:35Q&A and closing remarks
related talks
43mBridging the gap between designers and developers
56mTurn Sketch or Photoshop UI designs into working prototypes
55mUI Design for Small Screen Devices
25mBest Practices for using QML and QtQuick
24mThe Roadmap: Next Generation Qt (part 2/2)
23mQt Quick : Don't make these mistakes!
35mQtinUse - UI & System Design Challenges for the NxG Lighting Tool
01h 00mQt for MCUs – A Deep Dive