Figma Tips ⚡ - Auto layout with spacers

[@ChristianBaptiste]

Another way to accomplish the same result without having to spacers is to simply adjust the padding on your auto layouts. The advantage of using the padding is there will be less content to deal with in your layers panel, and your screens don't have all the extra noise since the padding is void of any color. One additional benefit is for the developers; the code in the inspect panel will be closer to how they would create it since they too would use padding.

[@judecruz1565]

this may be a stupid question, but how do you do variable spacing in autolayout ? can it be done without framing or grouping different things together ?

[@elfigaro622]

wow what a great tutorial, at first i was annoyed about the lentgth of it "ugh 16 minutes, i just wanted to see if there are dedicated spacers in figma" but then i sat down and watched the whole video because it was intresting and well made

[@thejunboy]

appreciate the feedback - shorter videos are definitely my preference too haha, but id prefer to explain concepts in depth.

[@adrbroadcast]

Great content my friend! Extremely useful for UI/UX Designers. Keep sharing!

[@thejunboy]

Appreciate the love!

[@preciousokere6399]

Awesome content. I'm currently learning UI and UX and found your videos really help with the basics of understanding UI design and the use of Figma. One request though, if it's possible to share the figma files for the examples so we can practice along? Again, much appreciated!

[@thejunboy]

Glad to help! I would take this more as Figma tutorial rather than UI advice haha. I am still learning myself. It may be hard for me to share the files due to file size. My advice would be to find some community files to play with and try to apply the same principles I have taught here.

[@djashawe88923]

Yes, I'm interested in Rem unit video.

[@franceslim9561]

Great tutorial for those who are new to figma like me! thanks a lot

[@kp63988]

I love your content Man 👍 , Can you please make video on building a design System from scratch.

[@thejunboy]

Definitely want to make a video on design systems! There's a lot to cover and want to make sure these videos provide a lot of value for your time, but definitely on the list of things I will make.

[@smilli6415]

love it , can you do a video on using constraints ,auto layouts ,shrug contents part in use cases.. with real life example when designing an app from scratch.. thanks

[@thejunboy]

Yes! This is something I may consider doing in the future!

[@SamyadeepPurkayastha]

🐐

[@productguiderhero2324]

Awesome plz make an iOS App with high fidelity design with complete design system using auto layouts, variants and components thanks

[@smilli6415]

that be great idea if explained with real life examples ..

[@thejunboy]

Thanks for your comment! Will definitely look into making high fidelity and design system videos in the future!

[@lissybonness3338]

What’s your reasoning for not using padding available through auto layout?

[@thejunboy]

Auto layout is limited to one padding distance - whereas designing hierarchy requires multiple padding sizes. I find this workflow better to manage my spacing, than having multiple auto layouts which can feel a bit clunky. Hope that helps :)