Best practices¶

Guidelines for getting clean, predictable transfers out of Kanzi Figma Importer. Follow these recommendations during Figma authoring so that Kanzi Figma Importer can map your designs to native Kanzi assets without manual cleanup in Kanzi Studio.

To prepare a Figma project for transfer:

Apply consistent Naming guidelines to layers, components, variables, and styles.
Define Component structure so reusable pieces become prefabs and instances become placeholders.
Use Variables and modes for runtime-switched values, and Text and colour styles for named consistency.
Group related content into Sections to form natural re-import units.
Decide When to bake images and tag the relevant layers with [KZ_BAK], [KZ_BAK_TINT], or [KZ_SDF].

Naming guidelines¶

Use clear, unique names for your Figma layers, components, variables, and styles. The names you choose become Kanzi Studio item names on the receiving side.

Rectangle 47 is valid but not descriptive. Use Card_Background or CardBackground, which read more clearly in the Kanzi Studio Node Tree.
Do not use . (period) in names. Kanzi treats the period as a namespace separator (Foo.Bar reads as property Bar on Foo), which causes ambiguous lookups. Use an underscore (Card_Background) or PascalCase (CardBackground) instead.
Slash-separated names like Display/Large become hierarchical resources in Kanzi Studio. Use them for styles and variables you want grouped.
Avoid trailing whitespace and unusual characters. Kanzi Figma Importer sanitises invalid characters automatically; clean input produces predictable output.

Component structure¶

For reusable pieces, use Figma components instead of duplicated layers. Kanzi Figma Importer transfers component instances as Prefab Placeholders that point to a shared prefab, which is the right runtime model.

Define main components outside the layer tree of your screens. Place them in a dedicated library section (for example Components) and only place instances inside your screens. This keeps the screen tree readable and ensures every Prefab Placeholder in Kanzi Studio points at one canonical prefab.

Variables and modes¶

Use Figma variables for any value you want to switch at runtime (Light or Dark themes, brand themes, language-specific values). Kanzi Figma Importer transfers the Variable Collection as a Kanzi Studio State Manager with one state per Figma mode. For the full pipeline, see Library Assets (FVC pipeline).

Text and colour styles¶

Use Figma text styles for every text element. Consistent text styles let Kanzi Figma Importer produce named text-style resources in Kanzi Studio that you can reuse across screens and update centrally. Use the same approach with colour styles for any colour value that needs named consistency without runtime switching. Styles transfer as named Kanzi Studio resources.

Sections¶

Use Figma sections to group related components and design tokens. For example, a Components section that contains all reusable building blocks, or a Tokens section that holds your colour and text styles. Sections form a natural unit of transfer on re-import.

When to bake images¶

Kanzi Figma Importer is designed to avoid baking by default: vectors become SDF-rendered shapes, text stays as TextBlock2D, and images stay as Image2D. Sometimes baking to a single image is the right choice:

Static illustrations with effects that do not transfer cleanly (shadows, complex blend modes, multiple overlapping fills). Tag the layer with [KZ_BAK] to flatten the subtree to a single PNG on transfer.
Icons that need runtime tinting (telltales, status icons that switch colour). Tag the layer with [KZ_BAK_TINT] to create a single mask plus a per-instance TintColor property.
Highly detailed vectors that the SDF Shape pipeline struggles with. Bake to image as a fallback. The vector import is possible, but can take noticeably longer than a baked PNG.
Custom fonts that the multi-source resolver cannot find. Tag a TEXT layer with [KZ_SDF] to flatten the glyphs to vector paths and route through the SDF pipeline. See Text transfer.

To learn how to apply tags inside the Figma plugin, see Tag cheat sheet.