Figma is a popular digital design and prototyping tool among UI/UX designers. Its range of features makes it highly favored by the design community. In this article, we will explore the ‘Locking the Aspect Ratio’ feature, which allows for consistent proportions when resizing design elements.
What is Aspect Ratio?
Aspect Ratio is simply the proportion of width to height of an image or screen. It is crucial in design because it ensures that images don’t appear stretched or squished when resized.
Locking Aspect Ratio in Figma
Locking the aspect ratio is quite straightforward in Figma. Follow the steps below:
-
Select the object you wish to resize while maintaining the aspect ratio
-
Look to the right side of the interface, in the ‘Design’ panel under the ‘Dimensions’ subheading. Here, you will find the height and width values of the selected object.
-
Between the width and height parameters is a small lock icon. This is the ‘Lock Aspect Ratio’ button. Click on it. When locked, the button will turn blue, indicating that your aspect ratio is locked.
-
Now, when you adjust either the height or the width of your selected object, the other dimension will adjust automatically to maintain the aspect ratio.
That’s it! The aspect ratio of your object is now locked and will maintain its proportions when resized.
Unlocking Aspect Ratio
If you need to resize your object without preserving the aspect ratio, simply click on the same ‘Lock Aspect Ratio’ button again. It will turn gray, indicating the aspect ratio is unlocked.
Shortcut Tip
For those who love keyboard shortcuts, Figma has a built-in shortcut for locking/unlocking aspect ratio. Just select the object and press Shift + Command + K on Mac or Shift + Control + K on Windows.
Conclusion
Locking the aspect ratio in Figma is a simple but powerful feature. It helps designers ensure their designs maintain proper proportions, leading to more accurate and visually pleasing designs. The next time you’re resizing objects, remember this handy feature!