Conversion

Unless using AutoLayout, Frames will directly map to Flutter Stacks, where the contents of the stack will be Positioneds that contain the rest of the UI.

Take the following Figma File:

Untitled

The output for the Checkout Frame will be the following:

Untitled

As seen above, the three elements are aligned from a Positioned inside a Stack based on how the designer aligned and sized each element.

Constraints

Below is an example of the Figma constraints sub-menu:

Untitled

Values

Figma allows designers to add constraints to Frames in their vertical and horizontal axes.

The values for both the vertical and horizontal axes are the following: