Figma concepts in Kanzi Studio¶

Here you can find out about:

The basic workflow of using Kanzi Figma Importer. See Workflow.
The most common content types in Figma. See Figma content types.
How Figma content maps to Kanzi. See Figma content in Kanzi.

To learn how to use the Kanzi Figma Importer and Figma content in Kanzi Studio, see Working with ….

Workflow¶

Kanzi Figma Importer supports importing Figma content into Kanzi Studio as native Kanzi content without prerendering or interaction limitations.

In a production context, the Kanzi Figma Importer and Kanzi Studio workflow follows this general pattern:

Function and UX specifications require an update.
The applying of updates is split into tasks.
Apply an update in Figma.
Synchronize the update from Figma to Kanzi Studio with the Kanzi Figma Importer and fill in the data bindings.
Validate the integrated updates against the reference images that are imported together with the updated content.

Design your Figma document so that you organize the content into meaningful sections. This way you support the synchronization of the content. Ideally, the updates match the Figma document structure of Pages and Sections close enough to make the scope of updates clear.

To learn how to import content from Figma, see Importing.

Figma does not support defining a UI model, other than an interactive prototype in design frames. For this reason you must implement it in Kanzi using the Kanzi Activities and State Managers. Use the design frames as reference images for validation. See Reference Images Helper.

While a Figma interactive prototype is suitable for demonstration and proof-of-concepts, the structure of Figma interactive prototypes is not suitable for production. See Navigation and Design frames, prototypes, and pages.

Extended workflows¶

To integrate functionality that Figma does not support, use the Kanzi Support Portal at support.rightware.com. When submitting a request regarding, set the Product field to Kanzi Figma Importer.

For example, these Kanzi features are not available in Figma:

Localization and data bindings
Theming and dynamic styling
Parametric animation

Figma content types¶

Here you can learn about the content types available in Figma.

Styles¶

Figma has reusable styles for text, color, effect, and grid layout layers.

In Figma, color styles define the look of items rendered with a style. Color styles can have multiple layers, such as color, gradient, or image. You can assign a color style for the fill of a shape, shape stroke, or text fill. You can override color styles within instances of components.

To learn how to work with styles, see Styles for a fill and Text styles.

Components¶

Components are reusable building blocks that you can instantiate anywhere. You can override property values in the Instances. In addition to overriding properties, Figma supports defining Component Properties to publish an interface of what is intended to be modified. Types of component properties are: variant, Boolean, text, instance swap.

To learn how to work with components, see Using Figma components in Kanzi Studio.

Design frames, prototypes, and pages¶

Figma provides a mechanism for creating interactive prototypes from design frames. You can define interaction and navigation between design frames. Each page has its own prototype composed of the design frames of that page. In Figma, run a prototype to test it.

To learn more about how to work with Figma prototypes in Kanzi, see Using Figma navigation in Kanzi Studio.

Sections¶

Figma uses sections to organize frames or layers into groups. While not mandatory, organizing components and design tokens, such as visual objects with attached color styles, can be useful for seamless use and re-importing using the Kanzi Figma Importer.

Figma content in Kanzi¶

Here you can learn about how Kanzi Figma Importer imports different content types from Figma to Kanzi Studio.

Sections and pages¶

When you query a Figma project, Kanzi Figma Importer organizes the content is by page and section structure.

To learn how to import content from Figma, see Importing.

To learn how to import interactive prototype of a Figma page, see Prototype and design frames.

Prototype and design frames¶

Prototypes are used for creating demonstrations. For a Figma frame that corresponds to the beginning of a demonstration flow (marked as Flow starting point), Kanzi Figma Importer creates a prefab with the PageHost suffix.

To learn how to work with Figma prototypes, see Navigation.

You can import design frames as reference images, which you can see in the Reference Images Helper. See Reference Images Helper.

Color styles¶

Kanzi Figma Importer imports Figma color styles as Brushes.

Text styles¶

Kanzi Figma Importer imports Figma text styles as Named Styles with name corresponding to the content of the Text layer in Figma. To use the same text style for a text that is not imported but created in Kanzi Studio, an add an Override State Manager to that Text node.

Effect styles¶

Kanzi Figma Importer imports Figma effect styles as Effect Stack 2D effect prefabs.