When using constraints, you can control how layers within a frame respond when resizing their frame.
Design built with constraints can flexibly adapt to screens of different resolutions and sizes without the need to redesign for multiple device sizes.
How constraints work
You can set constraints along the horizontal and vertical axes.
Tip: By default, Motiff sets a layer's constraints to Left and Top.
Horizontal
When you adjust the size of the frame containing a layer along the horizontal axis, the horizontal constraints determine how the layer changes as the frame resizes.
- Left: The layer maintains a constant distance from the left side of its frame, the layer's width remains unchanged, and the distance from the right side changes with the frame's size.
- Right: The layer maintains a constant distance from the right side of its frame, the layer's width remains unchanged, and the distance from the left side changes with the frame's size.
- Left and Right: The layer maintains a constant distance from both the left and right sides of its frame, and the layer's width changes with the frame's size.
- Center: The center of the layer maintains a constant horizontal distance from the center of its frame.
- Scale: The layer's width and the distance from both the left and right sides of its frame scale proportionally with the frame's size.
Vertical
When you adjust the size of the frame containing a layer along the vertical axis, the vertical constraints determine how the layer changes as the frame resizes.
- Top: The layer maintains a constant distance from the top side of its frame, the layer's height remains unchanged, and the distance from the bottom side changes with the frame's size.
- Bottom: The layer maintains a constant distance from the bottom side of its frame, the layer's height remains unchanged, and the distance from the top side changes with the frame's size.
- Top and Bottom: The layer maintains a constant distance from both the top and bottom sides of its frame, and the layer's height changes with the frame's size.
- Center: The center of the layer maintains a constant vertical distance from the center of its frame.
- Scale: The layer's height and the distance from both the top and bottom sides of its frame scale proportionally with the frame's size.
Use constraints
Applicability
You can set constraints for any layer that is within a frame. However, you cannot set constraints for layers outside of a frame or for auto layout child layers.
- You can set constraints for frames nested within other frames.
- A group will display the constraints of all its child layers. If you use constraints on a group, the constraints will apply to all the group's child layers.
Note: The boundary of a group is determined by all its child layers, so the group cannot independently respond to changes in the frame in which it is contained.
Set constraints
- 1.Select a layer within a frame. The blue dashed lines on the canvas represent the current layer's horizontal and vertical constraints.
- 2.Adjust the horizontal and vertical constraints in the Constraints section in the design panel.
- You can set the layer's constraints using the dropdown menu.
- You can also set constraints by clicking on the interactive icons on the left side.
Tip: You can hold Shift to select multiple constraints, such as left and right constraints.
When you want to deselect, you can hold Shift and click on the selected constraint again. After deselecting all, the constraint will change to scale constraint.
Ignore constraints
When adjusting the size of a frame, you can temporarily ignore constraints by holding down modifier keys.
- macOS: Hold ⌘ Command while resizing.
- Windows: Hold Ctrl while resizing.