Save assets

Development

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. You can select the asset file format and create high-DPI versions of asset files.

View asset details

To review asset files:

1. In the live preview, go to (Files).
2. Select Assets.

   

   List of assets on the Files page in the live preview.

3. Select an asset file to view it on the canvas.

You can see the width and height of each asset in pixels, as well as its file size.

Select asset file format

The plugin uses the file format that you select when saving all assets. You cannot select it separately for one layer.

As a general rule:

• For raster photography, select JPG
• For a raster UI, select PNG
• For vector icons, logos, and simple illustrations, select SVG (not available for Qt for MCUs)

To save all assets in a particular format:

1. In the plugin, go to (Settings) > Assets.

   

   Image format in Asset settings in Code settings on the Settings page.

2. In Image format, select JPG, PNG, or SVG.

Save as SVG

An SVG file has no fixed pixel size. When the application runs, it renders the vector content of the QML Image once, in the size the layer has in the design. If the application then needs a larger version of the image, it scales up the rendered pixels. This makes the image look blurred, just as a raster image would.

To render the vector content in the size that the application sets for the image, bind the sourceSize property of the Image to that size:

1. Select the layer in Figma.
2. In the plugin, go to Home > Advanced layer settings.

   

   Advanced layer settings on the plugin Home page.

3. In Additional properties, add the property:

   sourceSize: Qt.size(width, height)

With this binding, the SVG is rendered again whenever the size of the image changes. Rendering an SVG is slower than loading a raster image, so avoid resizing the image continuously, for example in an animation. If the image has a fixed size in the application, set sourceSize to that size instead of binding it.

If Figma cannot produce an SVG asset for a particular layer, the plugin falls back to PNG format for that layer and corresponding layers in component variants. You can see the affected layers in Issues. The plugin saves the other assets as SVG.

Create high-DPI versions of assets

To take advantage of the increased pixel density of high-DPI displays, an application should include high-DPI versions of static image assets. Developers can use a special naming convention for the high density assets, for example logo@2x.png, and load both the normal density image and the high-density image into a QIcon. Qt automatically chooses the best representation for the target display at runtime. For more information, see High DPI, High DPI Icons, and Scalable User Interfaces.

To create high-DPI versions of asset files, go to (Settings) > Assets and then select Generate high-DPI assets.

Manage asset cache

The plugin caches assets to make previewing and downloading converted designs faster. The assets are recreated only if you change the layer properties in Figma.

To change cache size if you have lots of assets or the computer is running low on memory:

1. In the plugin, go to (Settings) > Assets.
2. In Cache size, you can increase or decrease the cache size.

Assets are cached until you close the plugin.

Select Clear in Clear cache to recreate assets if it does not happen automatically.