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:
The output for the Checkout
Frame will be the following:
As seen above, the three elements are aligned from a Positioned
inside a Stack
based on how the designer aligned and sized each element.
Below is an example of the Figma constraints sub-menu:
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: