Insert UI components

The plugin converts each Figma component into a suitable QML type and each instance into an instance of the type. After you download the converted design, developers can use design tools to create button states, connections, animations, and transitions, for example.

To let you test the interactions of your components in the live preview, the plugin has a library of basic UI components, such as button, checkbox, and switch, that already have default states with default properties. You can drag them into your design and change their appearance.

The plugin converts the components into suitable Qt Quick Controls types. You can change the values of the predefined properties. You cannot change how the components function. If you change the components in ways that are not supported, the plugin converts them into regular component sets instead of Qt Quick Controls.

To insert UI components:

1. In the plugin, select (UI component library).

   

   The UI component library tab in the plugin.

2. Drag a component into the design, or select Insert to add it.
3. In Figma, select the inserted component and change its appearance for each state to create a main component.
4. Use instances of the main component in layers.

   

   A Button component and its instance in Figma.

5. In the plugin, select (Preview) to check the converted design and QML code in the live preview.

   

   A Button component and its instance in the live preview.

6. Set Inspect ON to view the component states.