Render layers as images

If a Figma layer has properties that have no equivalent in QML, the plugin converts it into an asset and creates a QML Image for it. Figma to Qt warns about these issues and offers fixes for some of them.

Image is a perfect match for UI elements such as icons, logos, or backgrounds, especially when they are static.

To instruct the plugin to render layers as images:

1. In Figma, select a layer.
2. In the plugin, go to (Home) > Layer settings.
3. Select Render as image.

   

   Render as image in Layer settings on the plugin Home page.

4. Select (Preview).

Check the converted design in the live preview.

You cannot instruct the plugin to render the following as images:

• Skipped layers.
• A layer within an instance of a component. It follows the main component.
• A component with variants (that is, a component set).
• A variant of a component.
• A layer within a variant.

To change the asset file format, go to (Settings) > Code > Assets in the plugin.

Too many images?

There are some drawbacks to using instances of Image in applications:

• Higher resource consumption: rendering many large image assets can significantly increase system resource usage.
• Slower loading: loading assets from disk or over the network can cause delays.
• Poor scalability: unless the image asset is vector-based or high-resolution, it may not scale well on high-DPI screens.
• Limited styling: you cannot dynamically change QML Image properties, such as color, border, or shape, whereas you can easily change these QML Rectangle properties.

Therefore, change the Figma design so that Figma to Qt does not have to render the layer as an image. For more information, see Conversion issues.

Why are some layers always rendered as images?

If the plugin cannot convert a layer into more suitable QML, it converts it into an asset. For example, Image fill layers and layers with effects always become assets.

If a layer in a component, instance, or variant is converted into an image, all its occurrences are converted into images. A layer and its children are rendered as an image if the layer:

• Has visible effects.
• Is of the type Polygon or Star.
• Is of the type Ellipse and the selected Qt version is older than 6.12.
• Is of the type Line and has stroke settings QML cannot express: decorated end caps (such as arrows), different caps per end, a stroke alignment other than center, a gradient stroke, or a brush or variable-width stroke.
• Is of the type Line, has a dash pattern, and is converted into Qt for MCUs.
• Is converted into Qt for MCUs, is rotated, and has children.

In other cases, only the layer is rendered as an image.