When it comes to design and web or app mock-up, Figma is THE popular tools among every designer or freelancer.
When designing on Figma, some unwanted behaviour can pop up and ruined some perfect design or make you lose a big amount of time. This is what happened to me recently.
I was designing my new website, which should be available soon at www.boutvalentin.com, and a strange but unfortunately familiar problem showed up. Every time I increased the size of my frame, some elements within it also moved. This issue can also occur with elements within groups.
To fix this behaviour, you only need to pay attention to the way of placing your elements into your frame.
By default, elements are constrained with left and top values. In other words, they are placed according to the top-left corner of your frame.
When using these constraints, if you increase the height of your frame, the elements will remain where you intended them to be.
The issues arise when certain elements are constrained using values other than top-left.
Elements constrained with scaling will be scaled when you increase the size of their parent.
With other constraints, the elements will also move depending on where you stretch the frame.
To better understand the issues, keep in mind that constraints determine how elements will be positioned relative to their parent. For instance, the centre constraint will position your elements based in the centre of the parent. If you increase the size of the parent, the centre will also shift, affecting the position of your elements.
In summary, to prevent your elements from moving unexpectedly, you need to set the constraints based on how you primarily intend to expand the parent. By applying constraints to the top and left, you can confidently adjust the size of the parent by resizing from the top, bottom, left, or right.
The other constraint modes can also be useful if you want to position your elements according to a different point on the parent. However, by default, you will usually want to stick with the top-left constraint.
I hope this article has helped you fix your design and understand more about the world of constraints in Figma.
Valentin.
If you need a website, consulting, advice, or auditing services in Cybersecurity, DevOps, or WebDev, please check out my website!.
This article is also available in other languages:
Top comments (0)