Some observations about designers and Figma’s auto layout, both from my recent video (link in the comments) and my own anecdotal experience talking to and working with thousands of designers from many different design and design system teams over the last decade: 1️⃣ A common reaction is, “Your way is too complicated. All you have to do is {{ COMPLICATED THING 1 }} and {{ COMPLICATED THING 2 }} and it becomes much simpler.” 2️⃣ Some designers think their Figma files dictate the way a developer codes a design. 3️⃣ I never cease to be surprised by the hoops some will jump through to achieve a “best practice.”
I’m not aware of what exactly is being said on X as I don’t have an account there, but I got a link to that earlier today. What of course stood out was the spacer part around the 2:00 minute mark. Adding layers like “spacer_80” add complexity compared to using auto of the box Auto-layout functionality: it’s less obvious is dev mode, it’s an extra layer which should not be built and the _80 makes it less flexible with responsive layouts or size changes over time. You mention you prefer it this way, and then just do it like that. Which is obviously up to you, but do you have specific reasons for it? Other than that it used to be common practice in the photoshop/sketch days?
1. There are pros and cons to different ways of doing things. I don't love your use of spacer frames, but if they work for you then great. I find Auto Layout Gap and Padding work really well for me. Both can be true. 2. I've seen this many times. I've fallen into this way of thinking at times. Designing in Figma gets better when you realize that engineers don't care about how you've structured things. 3. Too many people call something a "best practice" when really it is just a way that works well for them. Who decides what is "best practice" anyways?
Ahaha. Yea forget those fools. But also…I almost spit out my coffee when I saw you putting a spacer div in. 😆😉
Dan, don't be discouraged. I learned something new and I'm grateful. We all know theres many ways to do things and no hard and fast rules. We don't save lives either, so everyone just needs to chill. It's only Figma. Thanks for sharing.
Perhaps the title of the video should be appended with “For Me”. I’m flabbergasted by how often people go into attack mode whenever an opinion is inadvertently interpreted as “expert”. Sounds like you were simply sharing “YOUR” way and not “THE” way.
Framer and Webflow are the best schools for Figma Autolayout I know.
As someone who started with design and development around the same time, using Auto Layout in Figma just felt like the natural way to use it. I find it faster than not using Auto Layout because I almost always need to change things ?move elements around, adjust the padding in different sections by the same amount…). Without Auto Layout, I’d have to move things manually. Also, when it's time to make a mobile version, it's so fast if everything has Auto Layout. I think how much you need Auto Layout.and how useful it is also depends on whether you’re working on marketing sites or on app interfaces / functional components. For the latter, I think it’s even more important, because you often have lots of small elements that have to work well together and you need to utilize the space efficiently.
I help designers make more money and get their flowers.
2moWatch the full video here: https://www.youtube.com/watch?v=TaC-4LuZhIE