Convert constraints into anchors

In Figma, constraints describe the position of an layer in relationship with its parent. Constraints correspond to anchors and margins or fixed positioning using X and Y coordinates in QML.

Anchors position a QML component next to or inside another one by attaching their anchor-points: top, bottom, left, right, fill, horizontal center, vertical center, or baseline.

Figma constraints and QML don't have all the same properties. For example, QML does not have a scale property.

When using anchors for positioning, the plugin uses the layer constraints to set the position of the corresponding QML component as follows:

• Left or top: at the distance specified by a margin from the parent's left or top edge.
• Right and bottom: at the distance specified by a margin from the parent's right or bottom edge.
• Left and right or top and bottom: at the distance specified by a margin from both edges, so it grows and shrinks with the parent.
• Center: centered horizontally and vertically within the parent.
• Scale: preserves the position and size in proportion to the parent.

To convert constraints into anchors and margins:

1. In the plugin, go to (Settings) > Code.

   

   Position with anchors in Code settings on the Settings page in the plugin.

2. Turn on Position with anchors.
3. Select (Preview) to review the results.