Hello there! It’s Thomas, the creator of Nucleus UI. I write bi-weekly newsletter posts about UI design, design systems, Figma, and beyond. Subscribe to receive them in your inbox.
How do you use Auto Layout in Figma? Do you use it every time for every layer in your design, or do you use it sparingly?
In this post, I want to share some tactics on how we can intentionally use Auto Layout throughout our design process.
Before moving on, if you don’t know what Auto Layout is you can either read more or watch the video.
I have a strong opinion about Auto Layout, for me, designers don’t benefit the most from the Auto Layout feature. It's not mandatory or foundational. It has nothing to do with improving how designers create aesthetic magic, making better at arranging layouts or achieving nice and sensible spacing. I've always seen it as a tool for maintaining discipline within a set of rules that are closely aligned with other team members, such as the marketing team, content writers, and developers. The clearer and tighter your collaboration with others, the more you will benefit from Auto Layout.
So, the question is: How can we use Auto Layout effectively to get the most out of it? I would strategically use Auto Layout by understanding who will benefit from it the most in the design process.
For documentation if you work with multiple designers
Imagine you are on a new project. Things aren't clear yet at the beginning of the process. You are jumping from one concept to another concept. You’re still trying to figure out the information you want to have, and how you want to put it together and make it look good.
Would you use Auto Layout for every element you add, even when you're still moving things around a lot? Does Auto Layout matter when you present your early design concept?
You probably use some components with Auto Layout, like dynamically growing buttons. In most cases, I do use Auto Layout for repeating elements.
But honestly, I don't think it's essentially necessary. It’s arguably quicker and neater, but I've seen designers be even faster and organized without Auto Layout, just by using shortcuts.
So, in the exploration phase, I’d suggest, don't get too caught up with Auto Layout for every design detail. Instead, use it because it's included in the component library you're using. Additionally, Auto Layout works best when your design's behaviors and properties are set and match what's being developed. This helps other designers on your team understand the rules and limits of a particular screen, section, or element.
For content-focused purposes (content writer or growth team)
As you know, Auto Layout will automatically make any container you design grow based on the content inside it.
But do you think we should apply Auto Layout to all the containers so that content writers can update the content directly in the mockup without breaking the layout?
I don't think so because, in some cases, I still collaborate with the content writer by providing suggestions and comments alongside the content. This is because it's faster, and preparing Auto Layout could be overkill.
I'll use Auto Layout to enable content writers to update the content directly in these situations:
When the mockup is a content-focused template with minimal design changes required, the content team simply needs to create new content.
When a team seeks a rapid iteration on a specific screen or feature for a growth experiment without involving designers extensively. Typically in my case is a landing page.
Sometimes, you might need to update the text or other content by yourself. I understand it can be frustrating when you have to adjust the position of everything just to move one element. However, I would assess whether I will need to update this particular screen frequently in the future. If not, then I won't bother applying Auto Layout.
For development hand-off
To be honest, I think Auto Layout is designed primarily to improve the relationship between design and development. The more similar they are, the smoother the process, and ultimately, the better the output.
Auto Layout is basically how the layout works in the development, or called a Box Model for the developer. Box Model is a fundamental concept in web design and CSS (Cascading Style Sheets). It describes how elements on a web page are structured and how they interact with one another.
Here’s what you see on Figma Dev Mode
It's not exactly the same at the moment, but they are starting to speak a similar language.
It's always recommended to divide your design into different sections because that's how they are structured in actual development.
The other features within Auto Layout that match development:
Position: Absolute. When you apply this to an element, it means you can freely place that element exactly where you want within an Auto Layout container.
Wrap: It’s how text or content behaves when it encounters the edge of its containing element, if there's not enough horizontal space, the content will wrap to the next line. It's the standard behavior in development, but it wasn’t for designers until Figma released ‘Wrap’. What's even more exciting is that 'Wrap' enables us to create responsive designs within a single frame.
With Auto Layout capabilities that align with the development behaviors, do you believe designers should use Auto Layout to assist developers? Perhaps. I've collaborated with talented developers who could translate my designs into code without the need for detailed Auto Layout rules; I simply provided them with notes. I’d suggest before start tinkering with Auto Layout, match your expectations with your development team.
This post isn't meant to discourage you from using Auto Layout; it's intended to make you more mindful of when to use it and, in essence, any feature.
This way of thinking led me to transform the Nucleus UI Kit and Design System from full Auto Layout to Auto Layout-ready, providing greater flexibility. Designers can now freely move elements by default, and when they need to use Auto Layout, they can simply switch it on, and it's ready. Check our documentation
If you have any unique ways you use Auto Layout that work well within your team, please share. I'm eager to learn from you, or feel free to ask me anything!
Nucleus Plus is the all-in-one UI and design system starter kit for Figma
My mission is simple: I want to create a design system starter kit that truly helps you supercharge your design workflow, kick-start your projects faster, and elevate your process.
Enjoy unlimited projects both personal and commercial and lifetime updates.
Download Nucleus Lite – Free version
Support Nucleus
All the content on Nucleus and in the newsletter is accessible to everyone for free
If you like my post, please consider giving it a ❤️ and share it with your design friends.
Subscribe to the newsletter, if you haven’t.
Explore my other publication where I share practical tactics, frameworks, and mindsets that help designers remain intentional, self-aware, and thrive in their craft.
If you have any comments or feedback, or if you'd like to get in touch, feel free to send me a message. Thank you for subscribing!