Text¶
Here you can find information on how you can manage text from Figma projects in your Kanzi Studio project. To learn how to manage text in Figma, see Getting started with text.
In Figma, text properties and styles set the text appearance. When you import text from a Figma project, Kanzi Figma Importer:
Creates a Kanzi Style and there sets the text properties from a Figma project.
Creates a Kanzi Style for each text style defined in a Figma project.
Figma supports overriding text styles on its instances. See Components.
Text styles¶
In Figma, you can define a set of properties with text styles. This way you can apply consistent formatting for the text of same type across the project. To learn how to create text styles in Figma, see Create and apply text styles.
Note
To see the Properties tab, in Figma duplicate the project.
These text properties can be applied by:
Using or creating text styles from your library.
Changing custom text property values without using text styles.
Overriding a style on layer instance of the component by detaching it.
For example, here are a set of properties that define the Header1 text style.
In Kanzi Studio, you can find the text styles imported from Figma project in the Library > Styles.
The suffix values in the names are the IDs of the project item. These create unique names in Kanzi, because Figma allows more than one item with the same name.
If a node in the imported Figma project does not use a text style, Kanzi Figma Importer creates a node-specific style.
In the Kanzi Studio project imported from Figma, Styles are used to select the proper style for the text nodes from the imported library of styles. See Using Figma text in Kanzi Studio.
To use Text Styles from Figma in your own text nodes, you need to add the Override State Manager on the text node as the State Manager.
Overriding¶
Each imported text node within a Component publishes the Text Override, Text Style Override and Enable Text Style Override properties with bindings. See Components.
Using Figma text in Kanzi Studio¶
To learn how to use text from a Figma project, you can use the TextStyles Test Project example project that contains text formatted using text styles and properties. For example:
Header1 text node uses the Header1 text style.
Header1 detached and changed text node uses text properties.
Tip
If you want to inspect or edit the project, in Figma, duplicate the example project and open the duplicated project.
To use Figma text in Kanzi Studio:
In Kanzi Studio, import the example project. In the Library > Styles, you can see the properties that define the styles of imported text. For example, select Header1 to see the properties that define that style.
Instantiate the Frame prefab. In the Properties, the Text Style Overriding > Default Text Style property sets the text style.
Select the Header1 node and set the Default Text Style property to Header2 detached and changed.
In the Preview, you can see that the font type and size change.
