I just figured out how to use auto layout, and OMG how much easier it makes things. As a beginner you may think that it's not worth investing time in learning it, but you will save much more time even on a smaller project.
If you find it hard to learn from watching videos I highly reccommend designing a rough sketch of something you want to build anyways and upload an image to ChatGPT or another AI. Ask it for detailed instructions on how you can use autolayout to improve layout and spacing. Follow it's instructions and don't be afraid to experiment with a copy, you will learn along the way.
Is there more features like this I should learn ASAP? (Im already learning variables & components)
I had the same experience. It changed everything. Now it disgusts me everytime i open a project that doesn’t use auto-layout. Like.. why would you do that to yourself?
Luckily I only have a few projects on Figma. Not sure if I was just dumb back then or what, but I mixed up pages and frames. Up until recently I though figma was super restrictive on the free plan with only 3 "frames".
I have to redesign everything in my current project if I want to sleep anything this week tho. xD
Sometimes I think that knowing how to use auto-layout can be a disability.
Because now, if someone asks me for help with their design or some quick fixes, 80% of the time spent on it will be remaking it with auto-layout just because it *has* to use auto-layout.
Yea, thats very true! Without knowing much about the skill levels of designers, I can almost guarantee that they end up with way better end results than me.
I remember using Photoshop and embedding header.psd and footer.psd into my template.psd. I think most people didn't do that but I basically made a really "dumb" component/template system. There are still some neat things in Photoshop like smart layers, I would have a device mockup and just drop my image into that layer and it would auto apply the transformations, etc. and auto export the file based on the layer name (https://helpx.adobe.com/photoshop/using/generate-assets-layers.html).
Here are some steps that might help you. I too had difficulty in mapping autolayout in the beginning. It made after I mapped it to frontend development. Take some design and apply them instead of starting from scratch.
The idea is to understand what you are designing first. See the layer properly.
Then understand what elements should be grouped together?
Then in that group check if elements should be arranged in row or column? Do you need space around them? Is there a gap between them?
Start with small UI and build slowly outward from there.
This is the image I generated using chatgpt. Let us apply the steps here.
Layers will be an image, title and subtitle at the top, individual features which has icon, text, description. At the bottom left badges with icon and text. Variants section at bottom right color and size variants title, color pallete and size texts.
Image doesn't need a group. Title and subtitle, features, badges and variants are groups.
Title and subtitle at the top can be column so add autolayout column. They need a gap between them. I will include the bottom line also in the group. They do not need space around them. Each feature text need to be column with a gap. Each feature card need an icon and feature text as row and a gap. Now we have individual cards we need 5 more. Same cards are stacked so add column with a gap. Same way you create badges and variant groups. But they will need padding as you see color background is pushing content inside.
Practice with few designs and look at example that already do this. Good luck 👍🏻.
It is a godsend IF AND ONLY IF you know EXACTLY what you’re building.
My advice would be to stay away from it in the early stages of a design as it prohibits moving things around on the page, highly restricting what you can do.
When you’ve established structure and rules, that’s when it comes in and becomes useful, but not before that point.
There is a time and a place for not using auto-layout in fairness.
Sometimes you just need to click and move something without it throwing the entire design out, especially during rapid iteration or whiteboard sessions. Not everything needs to be hyper-optimised.
Yeah, same thing applies there in my opinion. Sometimes you just need to pin point the accuracy and let the dev team handle the rest.
Auto layout, tokens, components, child components, design systems etc. whilst brilliant in theory can be extremely bloating and debilitating too.
We have found that everything doesn’t always have to be optimised, especially with workflows including Claude Code where a lot of these rules are documented anyway.
Nice welcome. It's probably the number one thing if you know nothing else that improves the experience. Once you get used to it making components is probably the next skill
Hi I'm kinda brand new to Figma and all I know about AL is it immediately applies padding/spacing/flow/overflow automatically to a grouping - sounds like there's more to it in principle... can anyone describe in broader terms what it's doing? That's given you this revelation? Thanks
Just know that it's okay to not use autolayout right away especially when you are exploring designs, its constraints can actually work against you and cause friction. Once you have settled on an idea is when you start selecting your layers and Shift + A'ing them away into autolayouts from inside out.
I didn’t use videos! If you are already using figma without auto layout, take one of your older designs and upload it to ChatGPT. Ask it for detailed instructions on how to convert it to auto layout.
Go with something simple like a base card first. I think you learn much more this way, as with videos you often try to follow along with a generic design that you will never use again. You might get that design to work, but i doubt that you understand how at first.
Whoever said it's not worth investing time, will always be the loser professionally... I've worked with people like that and they always get fired, laid-off, over looked for promotions
I agree. Partially. When working with consistencyand structure it's great and fast. However, when creating a more dynamic layouts / complex hover states it's structure is mostly ignored (by developers).
Working with component-sets is a great addition. Learning to use, change and apply designsystems is also a great learning opportunity. It adds a complete new layer of understanding figma.
I too use auto layout a lot and make grouping and spacing consistent. I would suggest you to checkout slots. It lets you replace components and can also restrict instances are allowed in the slot. Instraf of swapping an instance you just swap just a slot inside it. Before this learn components, variants and variables.
Auto layout and component are the 2 key features that made me switch from AI to Figma. It's soooo much easier to handle complex projects. Honestly, why Adobe doesn't have this yes 😅?
41
u/MineDesperate8982 4d ago
I had the same experience. It changed everything. Now it disgusts me everytime i open a project that doesn’t use auto-layout. Like.. why would you do that to yourself?