Components¶
Kanzi Figma Importer imports to Kanzi Studio Figma components as prefabs and Figma component instances as Prefab View 2D nodes.
Instances and overriding¶
In Figma, you can override properties and styles of layers of an component instance. This allows you to customize and reuse instances for each use and context.
In Kanzi Studio, the imported components support overriding using template bindings. The default values for the prefab properties are set to the default values of the published properties.
You can manually instantiate prefabs imported from Figma by adding a Prefab View 2D or Prefab Placeholder node that refers to the imported prefab. In the Properties of the instantiating node, you can see the available Override Properties.
Component override is partially supported for text content, fills, and text styles. For more details on how to override fills see Fill overriding.
Component properties¶
Component properties provide a structured way of overriding in Figma. You can build common property interfaces that work for multiple components and that are easy to manage.
Figma supports Boolean, text and instance swap properties. In Kanzi the same properties are available to control the components:
Boolean property allows you to toggle a specific property.
Instance swap property indicates which instances you can swap. Dropdowns denote instances that you can swap.
Text property indicates which text strings you can edit. Update the text in text fields to directly change the string of text that appears on the canvas.
Variant property allows you to define specific values and attributes to your variants, such as state, color, or size. Dropdowns with no icon denote variant states that you can change.
Component sets and variants¶
Variants are extension of Figma component properties. Sometimes it is best to implement a property of a component as a separate component, instead of controlling a single component with properties.
In Figma, component sets are used to organize and group similar components as variants. Use variants when you are using multiple versions of similar components that share the same properties to control them, such as state, size, and color. When setting properties on of Figma variants, you define how the variant is selected. When instantiating a variant from a component set, a matching variant is selected according to the controlling properties.
Kanzi Figma Importer imports Figma variants as prefabs, just as any other Figma component. Kanzi Figma Importer imports a component set as a State Manager that handles switching the prefab on a Prefab View based on the selected state. Each component set State Manager has a Controller Property that has a state to select each variant. When instantiating a variant manually, add the Controller Property and State Manager to the Prefab View that instantiates that prefab.
Using component properties to make components configurable and reusable¶
Use a Boolean Property to enable users to toggle a regular property. For example, if your design system contains buttons with and without an icon, instead of creating variants for each state, use a Boolean property for the visibility of the icon layer.
The Instance Swap Property indicates which instance of a main component or variant can be swapped. When creating an Instance Swap Property, you can define the default instance value from any local and enabled libraries.
When using this property, Figma shows the Instance Swap menu to swap the nested asset for one in the same component subset or from any available library. Nested instances with this component property can only be swapped on the top-level layer of their parent component. You cannot swap it for another instance, if you select the nested instance. Use this approach when you want to swap components inside another component. For example, when you have a button, you can change the icon inside the button using the properties panel.
Use a Text Property to indicate which text layers are editable. Whether you are managing a default value of a text property or using an instance containing it, you can edit the text either in the sidebar or on the canvas. The value updates in both directions. You can still update the layers without this property.
A Variant Property is responsible for creating an individual component within a variant group. Variants also enable you to switch between states of the same component. Variants carry attributes that can be defined by variant properties, and as a part of the variant, you can assign two modifiers: properties and values. Variant Property is specific to variants and components sets, and cannot be created or applied to main components.
Remote components and component sets¶
You can use components and components sets from the shared team libraries in an imported project. Each remote component and component set is marked with [Remote] tag in the Kanzi Figma Importer.
In the Kanzi Figma Importer:
If a component or component set is reconstructed, the item is shown in the page where Kanzi Figma Importer first found them.
If a component or component set is successfully queried, the item is shown in a new section at the bottom of the selection tree. Name of the section is the name of the library from which the item comes and is marked with the [Asset library] tag.
Using Figma components in Kanzi Studio¶
To learn how to use Figma components, you can use the Variants Test Project example project that contains these variants and component properties:
Boolean Property with checked or unchecked checkbox
Instance Swap Property with instance options Send, Search, Settings
Variant Property with enable and disable options
Text Property with one or two text fields
Tip
If you want to inspect or edit the project, in Figma, duplicate the example project and open the duplicated project.
In Kanzi Studio, import the example project. The imported Empty Node 2D represent Figma variants:
Combination of Variant Property and Text Property. There are four possible combinations of enable/disable options for Text Property with two text fields. You can set the properties in Frame prefabs by selecting the Controller Property state.
Boolean Property. You can set the properties in Frame prefabs by enabling or disabling the property.
Instance Swap Property. You can set the properties in Frame prefabs by selecting an icon in the Icon property.
