07.03.2022
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.
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.
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!
https://www.figma.com/
https://goodpractices.design/figma-autolayout
https://uxdesign.cc/10-auto-layout-tips-in-figma-23f530c8098a
Perfist Blog
Similar Articles
What is Site Speed? Site speed refers to how quickly a web page loads. (Site speed has multiple factors. The most important of these are initial load time and load speed.) This speed directly affects the visitor experience. A slow-loading site can cause users to leave the site and choose other pages. Additionally, search engines […]
Read More
Mid Level SEOWhat is Structured Data? Structured data is a coding system used to help search engines better understand the content of a website. Implemented using formats like JSON-LD and Microdata, it enables the presentation of detailed information such as products, events, and business details in a comprehensible way. This is especially advantageous for e-commerce websites, as […]
Read More
Mid Level SEOIn the digital marketing world, user-generated content (UGC) is becoming increasingly important. UGC includes videos where users share their own experiences, opinions, and creativity in promoting brands and products. So, why are UGC videos so significant in digital marketing strategies? 1. Trustworthiness and Authenticity User-generated content creates a more trustworthy perception for consumers compared to […]
Read More
Performance MarketingWith the transition from Universal Analytics to Google Analytics 4, there may be some issues you need to resolve. One of these issues is “unassigned” traffic. Dimensions appearing as “unassigned” / (not set) in reports negatively impact your ability to analyze and optimize. We will discuss the causes of “unassigned” traffic in your GA4 reports […]
Read More
Beginner Level Web/App Analytics