Render layers as images

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

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

To render layers as images and avoid notifications about conversion issues:

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

   

   Layer settings in the plugin Home tab.

4. Select (Preview).

Check the converted design in the live preview.

To change the asset file format, select (Settings) in the plugin.

Why might other QML types work better?

There are some drawbacks to using Image types 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 can create a native QML type corresponding to the layer when possible. For more information, see Conversion issues.