Conversion issues

Figma to Qt converts Figma designs into QML types. Some Figma layers have properties that have no equivalent in QML. Notifications describe the differences and the steps the plugin takes to fix the issues. The following sections explain the causes for the issues and possible solutions in more detail.

Converting into QML

QML Rectangle

The Rectangle type does not support the following Figma properties, so if you set them, the rectangle becomes an Image QML type:

• Other than solid stroke fills
• Mixed stroke weight

Use solid strokes in a layer

You formatted a Rectangle layer using other than Solid fills for strokes in Figma.

Select Fix to use a solid fill for all strokes in the layer.

Use the same weight for all strokes in a layer

You formatted a Rectangle layer using a different weight for some strokes.

Select Fix to use the largest weight you set for the layer for all strokes in the layer.

QML Text

You formatted some words or characters in a Text layer using a different font family or size or text weight or style, such as bold, italic, or underlining. You must use the same formatting for the whole value of a Qt Quick Text type. For example, the text within one Text type instance must all be the same size and have the same weight, such as bold. You can combine styles if they appear to the whole value.

Select Fix to set the style used for the most characters in the value.

Converting into Qt for MCUs

Qt for MCUs takes into account the resource constraints on the MCU platforms, such as memory footprint and CPU cycles. It enables your application to perform optimally with the resources available on MCU platforms.

When designing in Figma for Qt for MCUs, keep the structure minimal and avoid unnecessary items because they come with a cost of memory and performance.

Also, keep the number of states moderate, because using over 10 states can impact performance and maintainability.

Keep the asset size as small as possible, as large image assets consume more memory.

Using opacity and scaling usually negatively impacts performance on Qt for MCUs devices.

To keep your application lean, help Figma to Qt to convert the Figma design into native Qt for MCUs QML types. Keep the following in mind when working in Figma:

• Rotate only Text or Image layers
• Do not use stroke properties
• Do not use text decoration properties, such as strikeout and underline
• If you use effects, you can either render the layer as an Image or skip the effects
• Use only linear gradients
• Figma to Qt cannot convert shapes into SvgPathItem types

The following sections explain the causes for Qt for MCUs specific issues in more detail.

Qt for MCUs Rectangle

In Qt for MCUs, the Rectangle type does not support the following Figma properties, so if you set them, the rectangle becomes an Image QML type:

• Individual radius values for each corner
• Strokes

Pick one radius value for the layer

You set individual Radius values for the corners of a rectangle in Figma.

To fix the issue, set the same radius value for all the corners or the Rectangle layer in Figma.

Select Fix to use the largest radius value used for the rectangle.

Remove strokes from the layer

You set values for the Strokes property in Figma.

Select Fix to remove the strokes in Figma.

Qt for MCUs Text

In Qt for MCUs, the Text type does not support the following Figma properties, so if you set them, the rectangle becomes an Image QML type:

• Case
• Decoration
• Other than solid fills
• Mixed fills
• Mixed styles
• Mixed line height

Pick one text case for the layer

You formatted a Text layer using the Uppercase or Lowercase setting for the Case property in Figma. A Qt for MCUs Rectangle does not support the font.capitalization property.

Select Fix to change the text to all uppercase or all lowercase in Figma.

Remove text decoration from the layer

You formatted a Text layer using the Underline or Strikeout setting for the Decoration property in Figma. A Qt for MCUs Text type does not support the font.strikeout and font.underline properties.

Select Fix to remove the text decoration in Figma.

Use a solid fill for the layer

You formatted a Text layer using other than a Solid fill in Figma.

Select Fix to use a solid fill in Figma for the whole text.

Use a fill for the whole text in the layer

You only set fills for some words or characters in a Text layer in Figma.

Select Fix to use a fill for the whole text.

Pick one font style for the layer

You formatted some words or characters in a Text layer using a different font family or size or text weight or style, such as bold, italic, or underlining. You must use the same formatting for the whole value of a Qt for MCUs Text type.

Select Fix to set the style used for the most characters in the layer.

Pick one line height for a layer

You used different line height values for parts of a Text layer.

Select Fix to set the line height for the whole Text layer to the height that is used for the most lines in the Text layer in Figma.