FIGMA AUTO LAYOUT

Everything you need to know to master Auto Layout in Figma. In this video we will go over all the basics of auto layout and create a UI card design that is responsive and adapts to the content in your design.
-
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
My Desk Setup for Design & KZbin:
kit.co/caleredwards/my-setup
Learn UI/UX Design and Prototyping using Adobe XD:
www.udemy.com/ui-ux-design-us...
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Disclaimer: This video and description may contain affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
FIGMA AUTO LAYOUT - Tutorial
#AutoLayout #Figma #FigmaTutorial

[@CalerEdwards]

Did you find this Figma video helpful? As always thanks for watching!

[@tonyblack2141]

Very helpful👌... Thanks

[@CalerEdwards]

Glad to hear it :D

[@modz9711]

Thank you

[@Deckard76]

As someone who doesn't use Figma, this was really interesting and helpful as I took your approach to see if I could create this responsive card in Xd... and it works pretty much identical! The only thing that I want is negative values in their layout stacks feature (to add or delete the user profile shapes/graphics). Thanks so much for putting this together!

[@mauriciocastro2876]

I just have to thank you. Clean explanation, good audio, and using a real example instead of boring theory. Thanks a lot!

[@alexsichevoy]

Finally, someone has made a video with a real example of autolayout using, not just talking about properties around some dummy content. Thank you so much. I can image what a challenge it could be for a newbie. I was confused by autolayout at first too, but as I had some experience with frontend I found out autolayout frames and properties are made to act like divs. Overall, it seems that Figma team are trying to bring design and frontend together.

[@CalerEdwards]

Glad you liked the video :D

[@westkast]

Hey Caler! I watch your tutorials for a while. Always demoing and explaining like a master! You made Figma's Autolayout easy and fluid to assimilate in less than 10 min! Thanks for your awesome videos!

[@happychristelle]

Hi Caler, I've been so confused with auto layout for days and your video is the only one that I could follow and complete. Did I just understand auto layout?? All thanks to you!

[@jeffsutthoff2111]

This is one of the clearest auto layout tutorials I've come across. Thank you!

[@gideonofoegbu4331]

Great teaching! Thank you.

[@BenStickland-vh2vd]

Great practical video - thankyou!

[@ticoriver]

Thank you very much for sharing

[@tetiana_tsyhankova329]

Thank you 🙏💛

[@divyanshpandey9140]

Hey Caler! I'm looking to learn Figma, and I've watched all videos of this playlist till now. So I hope that you keep uploading videos on figma which will me in learning the tool.

[@CalerEdwards]

More to come!

[@user-sk9ui6qs4i]

This is the best video i seen explaining the use for Auto Layout. Questions... I notice that you began ur work from the inside out. My brain thinks a bit different when designing (newbie).. is there a way to do this step by step the opposite way? Starting with the card and working your way in. I'm sure I can figure it out if I were to play around with it(would probably take me forever). Are there any other video recommendations that can help me? I'm having trouble doing it the other way around dropping the icons in. would love to see a video explaining it the opposite order. Or do you recommend these steps when designing? is it better?

[@Shatz]

Your videos are simply amazing, thank you very much! 🤩

[@CalerEdwards]

Thank you very much :D

[@irfantosun8363]

@@CalerEdwards VİDEOYUDÖGİYEAL

[@ilovesinchan613]

it was really helpfull ...thanks

[@CalerEdwards]

Most welcome! Glad to hear it :D

[@GraveRave]

Great tutaorial!

[@CalerEdwards]

thank you :D

[@cosmech1084]

Loved this, now I just need a responsive resize one for XD that's just as easy to understand.

[@CalerEdwards]

more XD content coming soon!

[@cosmech1084]

@@CalerEdwards That's great! I get lost in the older videos because the UI of XD has changed or they've added features. Can't wait!!

[@Deckard76]

@@cosmech1084 I made one in Xd following Caler's methodology and works great for building out responsive UI cards!

[@gambomaster]

Thanks. 🙏

[@CalerEdwards]

You’re welcome 😊

[@petermichael3490]

Hey Caler! thanks again ! can you make a content about Figma vs. adobe Xd ?? cheers from philippinezzz