QML Style Export

About this plugin

Overview

A Figma plugin that converts selected Figma elements into QML code, maintaining styling, layout, and component structures. This plugin bridges the gap between Figma designs and Qt/QML development.

Supported Elements

- Frames: Converts to QML `Item` or `Rectangle` with layout properties

- Components: Generates reusable QML components with variant support

- Component Instances: Handles component instantiation with property overrides

- Rectangles* Converts to QML `Rectangle` with styling properties

- Text: Converts to QML `Text` with font properties

- Ellipses: Converts to QML shape elements

Styling Properties

- Colors (fill and stroke)

- Dimensions (width and height)

- Border properties

- Corner radius

- Opacity

- Visibility

- Drop shadows

- Font properties

- Gradients

Layout Support

- Auto-layout (horizontal and vertical)

- Spacing and padding

- Alignment properties

- Parent-child relationships

- Anchoring

Component Features

- Reusable component generation

- Variant handling through states

- Property overrides

- Nested component support

Usage

1. Select Elements

- Select one or more elements in your Figma design

2. Export QML

- Click the "Export QML" button

- The generated QML code appears in the textarea

3. Clear Output

- Use the "Clear" button to reset the output area

Integration

The generated QML code can be directly used in Qt projects, maintaining the visual fidelity of the Figma designs while following Qt best practices and conventions.