Add comments to converted code

Development

Figma to Qt converts Figma layers into QML types. To pass notes to the developers who read the converted code, you can annotate a layer in Figma. Figma to Qt converts the annotations in the Development category into comments in the QML code.

The comment appears above the QML type that Figma to Qt generates from the layer.

Comment a layer

To add a comment to the code that Figma to Qt generates from a layer:

1. In Figma, select a single layer.
2. Add an annotation to the layer and set its category to Development.
3. Enter the note as the annotation text.

When you convert the design, Figma to Qt adds the note as a comment above the QML type. For example, an annotation with the text Shown while the data loads on a rectangle produces:

// Shown while the data loads
Rectangle {
    // ...
}

Add several comments to one layer

You can add more than one Development annotation to the same layer. Figma to Qt combines them into a single comment, keeps them in the order that you added them, and separates them with a blank line.

Document a component

Components and component sets in Figma carry a description and can link to external documentation. Figma to Qt adds the description and the documentation links as a comment at the top of the generated QML file, before any comment that comes from annotations on the component itself.

For example, a component with the description A themed button produces:

import QtQuick

// A themed button
Rectangle {
    // ...
}

Figma to Qt uses the plain text of the description, so any text formatting from Figma is not carried over. Each documentation link goes on its own line, separated from the description by a blank line. A comment that spans several lines, or is longer than 100 characters, appears as a block comment.

Comment component set variants

Figma to Qt converts a component set into a component with states, one state for each variant. An annotation on a layer inside a variant becomes a comment on the matching state, so the note stays with the variant it describes.