Menu
If you want the screens of your application to automatically adjust to the resolutions of different screens, then this article will help you solve this problem.
Let's start with constraints.
With constraints, you can create components that adapt size and position to their environment (frame). Use it every time you need to prepare projects that need to be resized for different devices.
You can select multiple options when working with constraints. An object can stick left, right, left and right, top, bottom, top and bottom. It can be centered or configured in different combinations, for example, top left right for a nav bar, and so on.
Here's another example of constraints:
Gif 1: In this picture you can see how the circle is sticked to the top left, for this setting go to the constraints and set the horizontal constraints to "left" and the vertical constraints to "top".
Gif 2: In the second picture the constraints are set to 'right' horizontally and to 'top' vertically.
Gif 3: The third example shows how 'left and right & top' constraints work together. When a frame is stretched, the circle inside it retains its position at the top and stretches on either side as it stretches.
Gif 4: 'Left & bottom' constraints fix the circle in the bottom left corner when the frame is resized.
Gif 5. Select 'center' if you want the button to stay in the center of the frame.
Gif 6: 'Top & bottom' and 'left & right' constraints will make the button stretch along with the y and x axes.
Let's explore this with other practical examples:
Button Groups
The buttons within the group should stretch to the correct size, but the text or icons inside should remain centered. Thanks to сonstraints, this is easy to achieve.
First, select the element you need individually, in this case, icons and text, find the constraints in the right sidebar and select center, since we want the icons and text to remain centered when resizing their frame.
Inputs
Text boxes and dropdowns should stretch to fill the container's space. However, the text area must be left and right aligned. For dropdowns, the small chevron on the right should always stay on this side.
We adjust the field text to right left as they should stretch evenly on both sides, but the dropdown should always be anchored to the right edge of the field text, so we select the chevron and select the right constraint.
Cards
Cards may have various appearances, but their content should be relevant to specific areas. In this example, the content of the card is aligned to stick left and bottom constraints.
Carousels
This component is popular in modern web design. Creating it in Figma is easy thanks to constraints. The Next and Back buttons stick to the left and right edges. They are also centered vertically. The page indicator is centered horizontally and attached to the bottom of the carousel.
Constraints are a very useful feature when developing applications, although they are easy to set up in Figma, but they take a little getting used to. You can play around with a simple button in a frame to see how objects react to different types of constraints.
Here are some additional setup tips:
1. Most of the options provided in Figma are created with developers in mind. So if you designed an element properly, it should convey the exact same behavior you want throughout your prototyping screens without excessive explanation. If you set constraints to the element and put it into another object, you need to set constraints to the related element again. If you put it in a simple way, if you have multiple objects one in another, you need to configure constraints for each element inside of it to make it work.
2. Sometimes you may need to resize a frame without using the constraints applied to it. You can ignore limits applied to nested objects by holding down the CMD (Windows - CRTL) key while resizing a frame.
Constraints is one of the great features of Figma, that are also supportable in Sizze. This article is to help you properly transfer your projects from Figma to Sizze, make sure to apply constraints property to your frames to make them adaptive and stretchable.
