This aged Figma debate reveals pros and cons for auto-layout vs. frames-only design mode

Is auto-layout in Figma a game-changer or a hindrance? Time to weigh the benefits and drawbacks of this design feature and how it impacts your UI design workflow.

Figma auto-layout debate: Benefits, drawbacks, and best practices
Research

Published on

September 2, 2024

|

3 min read

Blog

Figma auto-layout debate: Benefits, drawbacks, and best practices

Navigation

Subscribe to new posts

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Roman Kamushken

Being designers always means comparing our own and our colleagues` work results. We've all done that – let's just have a look at what they've done with that auto-layout and those components in Figma!

How good are they?
How effective labeled and user-friendly?
And now a question arises – how really fair is it to judge this way?
Don`t we put too much weight on our fellow designers?

And all in all, do any other designers working with Figma pose the same question – how well do they do the job of utilizing Figma components and auto-layout – assessing the quality of their colleagues` work?

Today`s article presents a possible answer to this question on the basis of analyzing all the pros and cons of auto-layout and the way it influences the overall designing process.

Opinion 1: Auto-Layout as a Collaboration Killer

There is an opinion that since some designers aren`t familiar with auto-layout, using it can have a negative impact on collaboration.

For example, it can cause unnecessary frustration or some unpleasant talks in the team. As a result, those designers who work with auto-layout may be thus forced to stop using it in order to relieve the pressure and frustration.

But how fair is it to stop using your advanced skills just to make everyone around happy?

Opinion 1: Auto-Layout as a Collaboration Killer

Things to be done:

  • Using auto-layout in case it is convenient in the current design.
  • Being ready to get any feedback from the team and to respond to it.

NOT to be done:

  • Expecting that the fellow designers will learn auto-layout on their own.
  • Avoiding auto-layout just not to create unpleasant situations.

Opinion 2: The Importance of Adaptability

The secret of success in a designer's work lies in constant self-improvement, which includes not only learning new tools, but also in learning new techniques. We all know there`is no universal approach that will work everywhere at all times.

Some things might benefit one project, but totally ruin another one.
So, getting new knowledge and being flexible is the key to success.

If you constantly acquire new skills, stay in line with the new trends and learn new tools, you`ll be on the top.

Opinion 2: The Importance of Adaptability

Things to be done:

  • Learning new tools and techniques to be up-to-date.
  • Trying various approaches and combining them to get the best result for your projects.

NOT to be done:

  • Sticking to one, even quite efficient, approach.
  • Avoiding getting new knowledge and skills, for example, auto-layout.

Opinion 3: Auto-Layout in the Discovery Phase

Speaking of the discovery phase, we shouldn't forget that its basis is creativity and using auto-layout may seem to hinder this process.

So, in order to pass this phase smoothly, it's vital to balance the creativity aspiration and the need to structure your design project. Auto-layout can play an important role here as it can help to make all components set into an overall picture.

Knowing of its ability to restrict some creativity, a wise designer may use its advantages of the discovery phase, bearing in mind the limitations set by it.

Opinion 3: Auto-Layout in the Discovery Phase

Things to be done:

  • Applying auto-layout at the discovery phase, taking into consideration the creativity limitation it presupposes.
  • Trying different auto-layouts to find the one that fits best.

NOT to be done:

  • Using auto-layout as the only possible option at the discovery phase.
  • Denying new approaches and sticking to just one.

Opinion 4: The Benefits of a Systematic Approach

Being creative is an essential thing for any designer, but being systematic is not any less important.
Effective and user-friendly designs should be systematic.

If you just move the components in and out of your layout, it won't do any good. The elements should be interconnected and effective, that is the main idea of any design. Such an approach will structure the design and make the team see the whole picture.

One more benefit of auto-layout is that it can help you see the structural drawbacks or even little issues.

Opinion 4: The Benefits of a Systematic Approach

Things to be done:

  • Creating a systematic approach with the help of auto-layout.
  • Making the relationships between the elements the main focus of your work at this phase in order to build a comprehensive design.

NOT to be done:

  • Assessing your design only visually.
  • Denying the advantages of systematic approach to design.

Opinion 5: The Limitations of Auto-Layout

As any other tool used in design, auto-layout has its own limitations, which should surely be taken into account.

Although it's quite structural, it can't be seen as an equivalent to flexbox.

The thing is, it can make designers put elements in containers without a real need. So, the main point is to remember these moments and mind them when creating your design with auto-layout. In general, knowing the restrictions, designers can use this tool to their advantage.

Opinion 5: The Limitations of Auto-Layout

Things to be done:

  • Bearing in mind the limitations of auto-layout.
  • Utilizing auto-layout in combination with other tools for the best of your project.

NOT to be done:

  • Seeing auto-layout as an equivalent to flexbox, which it is not.
  • Applying auto-layout as the only tool in a complex design.

Opinion 6: The Importance of Teamwork

Working in a team is an art of itself.

On the one hand, it is essential to take into consideration the preferences and skills of the team members.
On the other hand, everything should be to a certain extent.

Auto-layout, although it is a truly effective tool, is not an absolutely necessary requirement.

All designers in a team should work in cooperation which means they should be open to any feedback and act to the common advantage. Only close collaboration and openness could create the result that will be efficient, user-friendly and be for the best to all the interested parties.

Opinion 6: The Importance of Teamwork

Things to be done:

  • Taking into account the preferences of all team members while working with auto-layout.
  • Ensuring cohesive team approach by being open to feedback and useful changes.

NOT to be done:

  • Avoiding compromise with your team members and prioritizing only your workflow.
  • Insisting on one person's way of work over other team members` ways of work.

Opinion 7: The Value of Maximizing Tools

Maximizing tools is a great way to get the best results for a designer.
Those who are considered to be real professionals always try to do it.

Using auto-layout is not an absolute requirement, as has already been said, but in certain situations it can really be of huge advantage. Being in the flow, learning new techniques and industry trends can help you to achieve bigger goals. Maximizing tools can be a stunning opportunity to stay competitive and provide the results of the highest quality at the market.

Opinion 7: The Value of Maximizing Tools

Things to be done:

  • Learning the art of maximizing tools to be up-to-date.
  • Finding the most suitable approaches for any single project.

NOT to be done:

  • Sticking to one approach .
  • Avoiding getting new skills and knowledge thus losing your market position.

Conclusion

Auto-layout constantly raises a lot of debate as it is a complex tool.

All designers familiar with it are in one of two camps – they either love it or see it as a serious obstacle to creativity and teamwork. As is in many cases, the key lies in finding a certain balance between these two polar issues. Being flexible and learning new tools, techniques and approaches will always pay off well.

Give yourself a try: have a closer look at auto-layout while dealing with your design project and see how it might benefit your work.

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
No items found.

Our Dashboard Templates Will Make It A Treat To View Data

Experience the magic of data visualization with our user-friendly dashboard templates. Try out our dashboards now and enjoy efficient reporting processes, greater transparency in, among others monitoring and making educated decisions easily.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Research

6 min read

Innovative Ideas For Video Creation: From Editing To Animation

Discover innovative ideas for video creation, including advanced editing techniques, seamless VFX integration, and cutting-edge animation strategies to elevate your brand’s visual storytelling and engage your audience effectively.

Research

3 min read

Figma fiasco. The dark side of recent updates.

Get a quick look at the recent changes in Figma and find out why they might not be as effective as you thought.

Research

5 min read

Visual Elements in Email Marketing: Types, Tips, and Examples For The Best Email Designs

Are visual elements important in email campaigns, and how to craft the best emails? Let’s dive into the world of the best email designs!

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

This is some text inside of a div block.
This is some text inside of a div block.