QtDesignStudio/FigmaProjectConsiderations
Description
This page is listing the common design considerations when using Figma and Qt together.
General
- Use unique IDs for all the components and items, this makes the structure of the project better
- Avoid extensive usage of Frames in Figma. Framing components needlessly will create extra 'empty' Rectangles in QML thus impacting performance.
- Avoid extensive usage of States in Figma, use variants for the component instead. Component variants are translated to states in QML
- Use Figma Variables for color themes. This makes changing them later easier
- Use exact Pixels for coordinates and sizes, decimal fractional values are not visible to human eye on embedded devices. Pixels are also rounded up in conversion by default which makes designs look wrong
- Different web browsers can show color tones differently. See above the usage of Variables in color themes. Work with the literal names, not hard-coded values
Effects
- Qt Design Studio supports all the Figma design effects. However, the effects will cause performance hit on small-to-mid-range embedded devices
- Consider fixing the effects ready as possible in Figma and export the effects as rasterized images
Components
- Make as generic components as possible. Each different component base model will be created into it's own QML component. Components are re-used throughout the project as instances.
- Figma element naming is best to be done with camelCase: https://en.wikipedia.org/wiki/Camel_case
- Component in Figma is translated into QML component and the name of the component results in the filename.
myButton in Figma becomes MyButton QML type which is stored in MyButton.ui.qml file.
Layers
- Layer ordering is reversed in the the Figma vs. QML. New layers are added to the end of the stack in Figma whereas the most recent layer in QML is always first.
- Figma designs should be as flat as possible (less layers the better)
Qt for MCU
Qt for MCU (or Qt Ultralight) is QML sub-set representation used in microcontrollers (MCU). Qt for MCU differs to some extent with the "standard" Qt and QML
Differences
- Qt for MCU does not support Borders with Rectangle type
- Qt for MCU does not share the same font engine as in Qt. Fonts need to be manually inserted to the QMLPROJECT file
- When doing import from Figma, look at the output of the Figma plugin console to spot differences and how to remedy them. The differences vary from Qt for MCU runtime to another.
Performance
- Use rasterization for the effects, MCU cannot render them in real-time
- Do not use 3D on MCU even if there is a GPU