Apply auto layout

You can use auto layout in Figma on frames or components to have designs respond dynamically to content changes. Elements in a frame are automatically arranged based on direction, spacing, padding, alignment, and other auto layout properties. For example, you can create resizable screens, buttons, and lists.

The plugin converts horizontal and vertical auto layout frames and components into FlexboxLayout QML types.

Note the following restrictions:

• Grid auto layout frames are converted into other suitable types.
• Due to Qt framework limitations, only one axis per direction (horizontal or vertical) works correctly.
• Auto layout doesn't work well with effects, rotations, flips, and advanced auto layout properties.
• The FlexboxLayout type is not supported on Qt for MCUs.

The FlexboxLayout type was added in Q 6.10 and is still in development, so the option is off by default.

To turn on conversion into FlexboxLayout:

1. In the plugin, select (Settings).

   

   The Settings tab in the plugin.

2. In Code generation, select Use FlexboxLayout for auto layout.
3. Select a horizontal or vertical auto layout frame or component.
4. Select (Preview) to review the results.