Using Constraints to Create Responsive Pages
Making truly responsive pages is as easy as setting up the constraints in your design or later in Quest.
When setting your constraints, you’re setting them relative to the parent. If the parent is the top-level frame, then it will be affected by how big the browser is or the size of the phone’s screen for instance.
Left
When setting a constraint to Left, the position will always be relative to the left-side of the screen. Because of how coordinates read from the top-left corner of the screen (0X being all the way left & 0Y being all the way to the top), this essentially means it is in an absolute position. This is the default for most things in your design doc.
Essentially, Left will retain the padding (or negative space) on the left-side of the element no matter what the screen size.
It’s good to keep a lot of your elements like this and move on to using other constraint types once you have a better understanding of how you want your page to respond to resizing.
Right
Setting constraints to the Right will retain the padding on the right side of the element and keep it stuck to the right side of the screen. This is a great way to keep a hamburger menu or shop button stuck to the top right of your navigation bar.
Center
Setting constraints to Center will center it in the middle of the parent, or page if it’s at the top level. This is good to do if you want something centered in the page no matter what the screen or browser size is.
Stretch / Left and right
Setting constraints in Figma to “Left and right” (or “Stretch” in Quest) will retain the exact padding on both sides. If you resize this, it will actually stretch it out to be wider or short depending on the size of the screen or browser. This option is also best used on containers / frames or background elements as it can potentially stretch out images.
Scale
Similar to Stretch, scale will adjust the width it is applied to relative to the screen size or browser. The difference is it retains the % it came in as. Padding on the sizes will also adjust based on % and not retain the exact padding like the Stretch option will. Again, this option is also best used on containers / frames or background elements as it can potentially stretch out images.
Currently Vertical Constraint positioning in Quest. It is more used for making Apps than webpages. We plan to give better support in the future. For now, it is best if you leave Vertical Constraints to “Top”.
When setting constraints it is important to note:
- Constraints should be applied in your Figma file to either Frames, Images, Vector graphics or text.
- Constraints on Groups will not work for the group as a whole but be applied to the children only. So if you want a section and all its children to be right aligned on the page, it is best to change it to a frame instead of a group before applying that.
Note on setting constraints in Quest:
Settings constraints in Quest are considered overrides if they are different from what was set in Figma. This means if you change them in Figma and reimport, you’ll have to clear the override for that update to be visible.