Importance of Auto Layout in Responsive Design

Today’s topic is about, used especially in every stage of the interface design process, UI/UX Design team’s one of the most preferable tools which has prototyping and creating code, browser-based application Figma, and its most efficacious property for Responsive Design: Auto Layout.

Let’s get started with the basics. What does Responsive Design mean? Both in the dictionary and design world, it’s referred to as quite similar: reacting quickly and positively, flexible. Since its appearance in 2010, has become quite popular and has had a huge role in both designer and programmer’s collaboration and UX (User Experience) optimization.

Day to day evolving and developing technology and increasing usage of mobile and tablet devices caused Responsive Design in need of creation of an effective way to provide User Experience on these devices. In other words, Responsive Design is all about placing the design appropriately on each device size without causing any problems.

What about the rapport between Auto Layout And Responsive Design? What kind of convenience does it provide to the designers?

As we all know designing an interface is a long process. Meticulously prepared details, long-during meetings, and we may encounter a limited time when we have already a lot on our table. Let’s say you are working on a project in Figma, regardless of the size of a device in which showed (mobile or tablet) thanks to Auto Layout every component such as images, writings and everything reshaped according to device size and fit perfectly. In other words in accordance with the content, provide to change the size of components automatically. That’s why a convenient property for both web and mobile app designs.

Let’s dig in more about Auto Layouts! Layouts have all of the same properties with frames and can be used both vertically and horizontally. It tends to move as a default as the component’s shape, but this can be changed easily by using the arrows on the menu right side of the page. Because it doesn’t make any sense to rotate vertically or horizontally an only auto-layout frame, creating a new auto-layout to add the existing one and copying it provides to put in order vertically or horizontal. One of the most practical properties of it is that auto-layout frames can expand and reduce according to text in it automatically. The reason auto-layout is such a practical tool to use is that all the time-consuming and tiring things can be done with it which buys us time and can be done quite easily.

When you create an auto-layout, spacing between items and padding around items are formed 10px as a default. In order to make a responsive design, default numbers can be changed with space between items and padding around items on the right-side menu. Auto-layouts can be replaced by using arrows on the keyboard or leading the components with a mouse. Also, it’s really easy to create a new layout to add between the existed ones or to remove.

How to activate Auto-Layout and know it’s on?

There are several ways to activate Auto-layout. You may right-click to component and choose the “add auto layout” on the appeared list. Another way to activate is to click on the “+” next to the Auto Layout part on the right-side menu. The most common and practical one is the keyboard shortcut: Shift+A. To acknowledge whether it’s on or off to control the left-side menu. If it’s on you’ll see two empty rectangles right next to the component.

Since the use of websites through mobile devices has drastically increased and is expected to raise more, responsive websites will be preferred more than before. As all the properties of Auto-Layout, we have mentioned before and many others provide a great deal of support for designers, creating a responsive design for all kinds of devices has never been easier!

REFERENCES

https://www.figma.com/

https://goodpractices.design/figma-autolayout

https://uxdesign.cc/10-auto-layout-tips-in-figma-23f530c8098a