Reference Images Helper

The Reference Images Helper is a visualization tool for the references of the original image. It allows you to compare the frames of the imported project with the original frames in the Figma project.

When you enable the visibility of the reference images, the image reference is reflected on a lower opacity back layer. If there is a difference between the imported and the original frame, you can use the reference image to edit the imported frame.

You can use the tool in different modes and during different work stages:

  • When importing the Demo Page Host, you can paste the Reference Images Helper to it.

  • When importing individual frames from Figma, you can paste the Reference Images Helper in a Frame prefab.

  • In a production workflow with a custom UI model based on Kanzi Activities or State Managers, you need to control the Frame Controller Property based on the UI model in a root node that is a parent of the Reference Images Helper.

Importing reference images

To import reference images:

  1. In Kanzi Figma Importer select Reference Images for the frames for which you want to create a reference image, and import the project.

    _images/reference-image-helper-activation-check.png

    After importing a Figma project, in a Kanzi Studio project:

    • Prefabs contains the ReferenceImagesHelper prefab that Kanzi Figma Importer uses to show the reference images.

    • Library > Resource Files > Images > ReferenceImages contains the FigmaScreenshots directory that contains the reference images.

    • Library > Materials and Textures > Textures contains the textures based on images from the Figma project.

    • The Screen resource dictionary contains the ReferenceImageProjectName resource that points to the current project. You can see the content of a resource dictionary in the Dictionaries.

  2. From the Prefabs:

    1. Drag the PageHost prefab to the Node Tree.

    2. Drag the ReferenceImagesHelper prefab to the Node Tree so that it is the sibling of the PageHost.

  3. In the Node Tree, drag the ReferenceImagesHelper node to the PageHost node.

  4. Restart Preview.

    After you move, remove, or modify the ReferenceImagesHelper node, restart the Preview.

Setting visibility of reference images

To toggle the visibility of reference images, in the Kanzi Studio main menu, select Importer > Reference Images On/Off.

_images/reference-image-helper-on-off.png

You can see the changes in the Preview.

_images/reference-image-helper-example-off.png _images/reference-image-helper-example-on.png

To change the opacity level of reference images, in the Node Tree select the ReferenceImagesHelper node and in the Properties adjust the Opacity property.

See also

Importing