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

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

Roman Kamushken

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 are labels 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.

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications

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

Related posts

Your startup’s user persona is probably wrong (and it’s costing you)

Research

6 min read

Your startup’s user persona is costing you

Most founders I meet can describe their product in 30 seconds… but freeze when I ask: Who exactly is buying it, and why?

How to cancel Adobe subscription without fees

Research

5 min read

Adobe is not a design tool anymore. It’s a monthly ransom. Here’s how I escaped and cancelled my subscription without fees.

The frustrations of a long-time Adobe user who's had enough of the subscription model, bloated software, and sneaky cancellation fees. Get ready to vent and find out why it's time to explore alternatives.

Campaign marketing dashboards designed right. Know who cares, where they live, and why they click

Research

5 min read

Campaign marketing dashboards designed right. Know who cares, where they live, and why they click

Learn to design dashboards that reveal who engages with campaigns, where they’re located, and how to turn data into decisions.

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.
Dashboards
Mobile
Charts
Code
Websites
Bundle
Freebies

Nocra UI kit

Nocra is a design system for AI products. Built specifically for startups harnessing AI generation: images, video, audio, music, prompts, and beyond.

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.