Figma Design for Beginners: Complete Course - Figma Auto Layout for Beginners | REAL Understanding to Always get it right!

5.0 (2)

15 learners

What you'll learn

This course includes

5 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

auto layout figma figma auto layout figma design figma for beginners figma for edu figma tutorial figma tutorial for beginners تخطيط فيجما التلقائي فيجما

Full Transcript

If you are a new designer struggling with Figma auto layout, this video is your final stop to actually understand auto layout and use it effectively in your designs. In this deep-dive tutorial, we'll go from Auto Layout beginner basics to advanced techniques using real UI examples like cards, tag components, and responsive navigation bars (both vertical and horizontal). You'll also discover how Auto Layout is powered by **CSS Flexbox principles**, and how to use that knowledge to unlock precision and flexibility in your designs. https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout #FigmaAutoLayout #FigmaTutorial #UXDesign #UIDesign #Figma2025 #ResponsiveDesign #Flexbox #ProductDesign #FigmaTips ------------------------------------------------------------------------------- 🌸Learn more with Playlists🌸: 🌈 Complete Series Figma for Beginners 2025: https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN 🔥 Create a project for your Portfolio Playlist: https://www.youtube.com/playlist?list=PLXdRMPwB8CHmVsO8AGFwslE9_Fa4zNtI8 🧘🏻‍♀️ UX/UI Design Career Playlist: https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y ------------------------------------------------------------------------------- Connect with me! ➡️ LinkedIn: https://www.linkedin.com/in/nehmatgereige/ 👩🏻‍💻 Portfolio: https://nehmatgereige.com/ 🎓Book Free Mentorship time with me: https://adplist.org/mentors/nehmat-gereige 🌈 Figma Creations: https://www.figma.com/@nehmatgereige ------------------------------------------------------------------------------- Music Credit ------------------------------------------------------------------------------- Music by: Bensound.com/royalty-free-music Artist: Benjamin Tissot License code: GDI0ISXGP2GXF9YX --------------------------------------------- ⏰ CHAPTERS ⏰ 00:00 #1. Intro 00:40 #2. What is Auto Layout? CSS Flexbox 01:49 #3. When to Use Auto Layout 03:00 #4. How to use Auto Layout Demo on a Tag 06:39 #5. Layout options: vertical, horizontal, Wrap 08:43 #6. Gap Property: space between items 09:21 #7. Padding property for auto layout 10:00 #8. Alignment options for Auto Layout 11:21 #9. Design Vertical Navigation with Auto Layout 18:45 #10. Design Horizontal Navigation with Auto Layout 21:08 #11. Ignore Auto Layout: Place items exactly where you want (Absolute position)