Step 1 - Setup¶

This step is the prerequisite for implementing the cluster in Kanzi Studio. You first set up your environment and import the Cluster resources, then you create the reference image, and the cluster background.

Set up the environment¶

Before you start creating a cluster, you must set up Kanzi Studio, download the Cluster resources, and create a Kanzi Studio project where you create the cluster.

When you import the design from Figma, Kanzi Figma Importer organizes frames and components into prefabs and creates the interface using Prefab View 2D nodes that point to generated resource IDs. During the import process, Kanzi Figma Importer converts vector graphics into editable Kanzi Shapes nodes. This allows you to adjust your design in Kanzi Studio.

To set up the environment:

Install the Kanzi Figma Importer and Kanzi Shapes extension packs. For detailed instructions, see the Kanzi Figma Importer installation instructions.
In Kanzi Hub, download the Cluster resources. See Installing Kanzi Project Templates.
In Kanzi Studio, create a project.
To get the correct display of colors for projects that you import from Figma, in the Project > Project Properties, set the Binary Export > Color Workflow property to Legacy.
Import to the Kanzi Studio project the fonts that the Figma project uses:
1. In the Kanzi Studio main menu, select File > Import > Import Fonts.
2. In the Import Fonts window, click Browse and select the Fonts directory in the Cluster resources that you downloaded. In the Fonts column, select each font and in the Typefaces column double-click the typefaces to select them for importing.
3. Click Import.
  
  You can see the imported fonts in the Library > Font Families and font files in the Library > Resource Files > Fonts.
Import the Cluster Figma project:
1. In the Kanzi Studio main menu, select Importer > Import from Figma.
2. In the Kanzi Figma Importer, set:
  - Access token to your Figma access token
  - Project Id to the ID or URL of the Figma project from the Cluster resources that you downloaded
  Click Query.
  
  For detailed instructions, see the Kanzi Figma Importer importing instructions.
3. Select all content and click Import.
Adjust the imported content and the Kanzi Studio project:
1. In the Prefabs, in each prefab that is in red type, select its last descendant node marked in red and in the Properties enable the Clip Children property.
2. In the Node Tree, delete the Viewport 2D node.
3. Select the Screen node. In the Properties, set the Screen Resolution property to 1920x720 - 720p.
From the Cluster resources, merge the ClusterTemplate Kanzi Studio project:
1. In the RootPage node, create an Empty Node 2D node and name it Control.
2. In the Node Tree, press Alt and right-click the Control node and select Alias.
  
  Kanzi Studio creates the alias to the Control node in the resource dictionary of the Screen node.
  
  This alias is a direct access to the Control node. You use it in the cluster components to bind the properties that set each cluster component to the properties in the Control node. This way you can control the cluster components from the Control node.
3. Merge the Control and Support properties from the ClusterTemplate project:
  1. In the Kanzi Studio main menu, select File > Import > Merge Project and select the ClusterTemplate project.
  2. In the Properties section, select all the properties in the Control and Support namespaces and click Merge.
In the Library > Property Types select all properties in the Control and Support namespaces and drag them to the Node Tree to the Control node.

Add reference image¶

Use the cluster reference image so that you can compare and adjust your design based on that image.

To add the reference image:

In the Node Tree, in the Control node create an Empty Node 2D named Reference.
In the Properties, add these properties:
- Resources > Disable KZB Export
  
  When enabled, this property allows you to exclude the content of the Reference node when you export the kzb file of your project.
- Node > Opacity
  
  This property allows you to control the opacity of the Reference node content so that you can adjust the position of your project nodes.
- Support > ReferenceSelector
In the Reference node, create an Image node and name it SimpleRect.
In the Properties, add and set:
- Image to Frame 2024:2176
- Node > Visible
  
  Note
  
  Make sure to use the Kanzi Node > Visible property and not the Visible property that comes from the Figma content.
- Support > ReferenceSelector to SimpleRect
In the Properties, click + Add Binding and create a binding to the Node > Visible property with this binding expression:
```
{@./Support.Reference_Selector} == {@../Support.Reference_Selector}
```
Duplicate the SimpleRect node three times, and name the nodes:
- RichRect
- SimpleRound
- RichRound
For each of the duplicated nodes, in the Properties set:
- Image to the corresponding image
- ReferenceSelector to the value that represents the image
For example, for the RichRect node, set:
- Image to Frame 2165:1240
- ReferenceSelector to RichRect
To test the reference image setup, in the Reference node, change the value of the ReferenceSelector property.
Hide the Reference node by selecting it in the Node Tree and pressing Ctrl H.

When you need to use the reference node for comparison, disable quick hide and set the node opacity.

Create cluster background¶

To create the cluster background:

From the Prefabs, drag the Cluster Components_2375:687 prefab to the Node Tree between the Control and Reference nodes.
Delete the Cluster Components > Background Prefab View node.

This node is only needed for multiple backgrounds.

Make sure that the Rectangle node Background_1 node is still in place. The Background_1 node draws the blue glow on top of the background image.
In the Cluster Components, create an Image node, name it Background_Image, and place it as the first child of the Cluster Components node. In the Properties, set the Image property to figma_image_18e9.

Introduction Next step