Best practices

Organizing designs

The converted code corresponds to the structure of your Figma design.

Pages

In Figma, pages provide a way to organize layers, frames, and groups. Figma to Qt accounts for both pages and layer dependencies across pages. You can skip pages that are not a part of the final UI, to avoid cluttering the application project. For more information, see Skip pages and layers.

Layers

In Figma, you arrange each page into layers, such as frames, text, shapes, and images. The layer order determines how layers overlap in the canvas. Any layers at the top of the layers panel appear above any layers below them in the canvas.

Skipping layers

When you download the converted design, you can skip all layers that are not a part of the final UI, to avoid cluttering the application project.

Flattening deeply nested layers

In Figma, you can nest layers within frames or groups. The nested layers are called children, and the frames or groups that they nest within are called parents.

This works similarly in QML, where you typically nest QML types within other types to create UI elements. However, a deep code structure increases memory consumption and CPU overhead during rendering. On resource-constrained devices, such as microcontrollers, this can significantly impact the performance and responsiveness of the application. Therefore, try to avoid deep nesting in Figma.

Naming layers

Figma documentation recommends that you create a clear naming structure or hierarchy to make managing layers in designs easier. Figma automatically assigns names to layers, but these names often don't accurately reflect the layer's purpose in the design.

Also, while Figma allows a wide range of characters for layer names, a QML ID can contain only letters, numbers, and underscore characters. Even though Figma to Qt cleans up layer names, it's best to stick to the QML-compatible character set when naming layers.

When converting designs with Figma to Qt, it's important to explicitly name layers based on their context. It's crucial for text layers in variants, where the layer name typically reflects the text content. Since the content can vary between variants, relying on auto-generated names can lead to inconsistencies in layer names and the QML IDs that Figma to Qt generates.

Using a consistent syntax to name layers is important because Figma to Qt converts layer names into QML ID values. Descriptive and unique layer names within UI elements help avoid duplicate IDs in the converted code. Also, they help the developers understand the purpose of an UI element without seeing the visual representation. For example, you could name your button labels layer_button_ok and layer_button_cancel.

To rename layers in Figma, select Ctrl+R (or Cmd+R on macOS).

Frames versus groups

In Figma, frames and groups are both containers for other layers, with their own properties and use cases. Generally, use frames with constraints to create resizable components and groups to combine many layers into one manageable layer.

One important difference is that you can control the frame size independently of its contents. Thus, you can clip frame content or place it outside the frame boundaries and move the child layers around. Groups fit to their contents and constraints that you set to their child layers apply to the parent of the group layer.

Figma to Qt converts frames into QML Rectangle types and groups into Item types. This means that you need to use them in different ways. For example, a group does not have color properties, so you must use a background rectangle to add color behind a group.

The following table describes the differences between frame and group properties.

Components

In Figma, you can create reusable components from any layers or objects, such as icons, buttons, or other UI controls. A main component defines the properties of the component, whereas an instance is a copy of the component you can reuse in your designs. Instances are linked to the main component and receive any updates that you make to the main component.

This works similarly in QML, so Figma to Qt converts each Figma component into a suitable QML type and each instance into an instance of the type. After you download the converted design, developers can use design tools to create button states, connections, animations, and transitions, for example.

Reusable components take some load off the QML engine, which does not need to generate and store type-data for a type that is essentially a duplicate of another pre-existing and potentially already loaded component.

Variants

In Figma, you can create variants to group and organize similar components into a single container. For example, you can create a component set for a push button with different states, such as idle, hovered, and pressed. Add layers to the variants or remove them to implement the differences.

Figma to Qt converts variants into suitable QML types with states. It merges the variants within a component set together and turns the differences between the variants into states.

Do not change the layer names across the variants. Figma to Qt generates the ID value of a layer based on the layer name. It identifies the differences in the property values and creates the appropriate states. For this to work, you must keep the layer names the same across variants.

Overrides

In Figma, you can override the visuals of components in their instances. However, support for overriding variant instances is limited. QML does not support changing the value of a property both in a state and using an outside binding because states take precedence over property bindings.

To help design and development tools handle component variants, use Figma's component properties, such as Boolean and Text, and variables, which we plan to support in future Figma to Qt versions.

Optimizing assets

Developers can test the UIs on the target devices to make sure they get the best performance out of the application. To solve performance problems, you can optimize the graphical assets used in the UI, such as images or effects.

To optimize UIs for different target devices, consider:

• Minimizing image size.
• Using transparency sparingly.

For more useful information for application developers, see QML Performance Considerations And Suggestions.

Minimizing image size

Images are a vital part of any UI. Unfortunately, they are also a big source of problems due to the time it takes to load them, the amount of memory they consume, and the way in which they are used.

We recommend that you make image size as small as possible without negatively affecting image quality.

Avoiding transparency

Opaque content is generally a lot faster to draw than transparent because the latter needs blending and the renderer can potentially optimize opaque content better.

An image with one transparent pixel is treated as fully transparent, even though it is mostly opaque.