Fills¶
Kanzi Figma Importer imports Figma fills and color styles as Kanzi Brushes. Materials and Material Types for rendering fill types are imported from the Assets project. Kanzi Figma Importer configures the imported Brushes to match Figma fills with material properties. The imported content supports fills overriding. See Fill overriding.
Kanzi Figma Importer supports importing of: - Fills and blend modes for all node types, including shapes, frames, text, and so on - Color layer with a solid color - Image layer with fill, fit, crop, and tile modes - Gradient layer with linear, radial, angular, and diamond modes - Opacity and visibility for each layer
You can find the imported fills in the Library > Materials and Textures > Brushes > Figma.
Note
To get correct display of colors, in the Kanzi Studio main menu select Project > Properties. In the Properties, set the Binary Export > Color Workflow property to Legacy.
If a fill includes more than two layers, non-text nodes use only the first two layers. Text nodes have a solid black color.
Kanzi Figma Importer does not support blend modes for the fill layers.
Fill overriding¶
Figma supports property overriding for instances. Kanzi Figma Importer imports overriding from a Figma project as a Kanzi Brush. To disable overriding, detach overridden properties.
In Kanzi Studio, you can toggle overriding in the Properties of a prefab instance:
When you enable overriding, the prefab instance uses its own fill property.
When you disable overriding, the prefab instance uses fill from its parent node.
Styles for a fill¶
You can use Figma styles for a fill.
Kanzi Figma Importer imports a style as a separate Kanzi Brush with style name and ID used in the Figma project.
Materials¶
Kanzi Figma Importer adds the materials for layers in a Kanzi Studio project to the Library > Materials and Textures > Materials and Material Types and applies a material in the Brush that uses that material.
Property types for Brushes¶
Kanzi Figma Importer creates property types for each layer in the Library > Property Types > FigmaImporter > Fill and uses the property in the relevant Brush. Kanzi Figma Importer supports up to two layers.
Blending¶
In Figma, blend modes define how two layers or fills between layers blend when they overlap. In Kanzi, the blending is controlled by the Blend Mode property. Figma blend modes translate directly to Kanzi blend modes. The only exceptions are Plus darker and Plus lighter blend modes that do not exist in Kanzi. For these blend modes Kanzi Figma Importer uses the Premultiplied Alpha blend mode.
You can also apply a Pass Through blend mode for an entire layer. In Kanzi, that equals to Premultiplied Alpha blend mode.
Example¶
Figma project with image fill layer.
When imported to a Kanzi Studio project:
Node properties
Brush properties
Material properties
Material Type properties
