Constraints in Flowmo let you control how elements respond when their parent frame is resized — making it easy to create flexible, responsive layouts across screen sizes.
What Are Constraints?
Constraints define the element’s alignment relative to its parent frame along two axes:
Horizontal (X axis)
Vertical (Y axis)
They help you maintain consistent layout behavior when resizing containers or adapting designs to different devices.
Constraint Options in Flowmo
You can apply constraints separately for each axis:
Horizontal (X Axis)
Left – Pins the element to the left edge of the frame.
Center – Keeps the element centered horizontally.
Right – Pins the element to the right edge.
Vertical (Y Axis)
Top – Pins the element to the top edge.
Center – Keeps the element centered vertically.
Bottom – Pins the element to the bottom edge.
*Flowmo does not support stretch constraints (like “Left & Right”). To achieve similar results, adjust the element’s width manually and position it using the available anchors.
How to Apply Constraints
Select the element inside a frame.
In the design panel (right side panel), locate the Constraints section (below the alignment section)
Choose a value for both the X axis and Y axis.
Resize the parent frame or press the preview button to see how the
element responds.
Common Use Cases
Bottom-Centered Button
X: Center, Y: Bottom
Top Navigation Bar
X: Left or Right (based on alignment), Y: Top
Centered Headline
X: Center, Y: Top or Center
Default Behavior
By default, all elements in Flowmo are set to Top–Left alignment. This means they will stay pinned to the top-left corner of the frame unless you manually update their constraints.