Protraktor Design System

Usage

Quick overview of the usage

  1. Design your application as usual by using Figma UI Kit
  2. Download QT stylesheet files from Github and select appropriate file for your task and mockups
  3. Use Qt Creator to sketch the UI file and use standard or dynamic properties according to documentation here or in Figma file.
  4. Done!

Advanced topics

While I am not a professional developer, it is worth to mention a couple of advanced ways to use Protraktor UI Kit in your application:

  1. There is qss file that uses tokens instead of final values for colors, sizes, etc. You can select token values dynamically and then recalculate the stylesheet file so it uses them by making quick search and replace.
  2. Also the tokens allow customization of the UI kit, for instance you can quickly change all border-radiuses from default 4px to 2px or even 0px.