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.

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.

Components and variants

Figma to Qt converts each Figma main component into a QML component and each instance into an instance of the component. It converts component sets (with variants) into QML components with states. You can override the properties of the main component or component set in the instances.

If the plugin shows you issues about component instances, check that:

• The layer names match accross components and their instances.
• Names of added layers in variants are not the same as names of layers in the default variant.
• Positions of layers in variants match those in the default variant.
• Layer structure in variants matches that of the default variant.

Remove conflicting instance 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.

To fix the conflicts:

• Remove the conflicting overrides.
• Reset the instance or push changes to the main component.

Use the same layer name for the main component and instance

You changed the layer name of an instance of a main component. The plugin converts the main component and instance into two separate QML components. The visibility changes in the instances are not implemented as states.

Fix the layer names in the component instances.

Revert instance swap

You swapped layer content in instances. The plugin ignores the swapped content.

Revert the instance swap and change the properties of the instance instead.