View source for QtDesignStudio/FigmaProjectConsiderations

== Description ==
This page is listing the common design considerations when using Figma and Qt together.

== Figma related considerations ==

=== 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