All Figma, No Bull 12: Auto layout basics in 5 minutes
Auto layout is like a swing: it moves in a fixed plane of motion, but it's mega fun once you figure it out. Learn the basics in just 5 minutes, including: • Adding auto layout • Shortcut for auto layout • Horizontal resizing • Vertical resizing • Horizontal padding and spacing • Vertical padding and spacing • Spacing modes: packed, and space between • Your first responsive component The full course with worksheets, class project, and exercises is available on Skillshare. You can score 1 month for free using my referral link! 🎁 1 month free: https://chk.fyi/skillshare 🤹 Course link: https://chk.fyi/nobull Timestamps: 00:00 Introduction to why Auto layout 00:23 Demo using a responsive webpage 00:54 Practical overview: Navbar and Footer 01:09 Horizontal Auto layout using a Navbar 01:54 Adding and configuring Auto layout 02:19 Shortcut to add Auto layout and alternating directions 03:45 Spacing modes and responsive components 04:20 Layers structure for a responsive Navbar 03:18 Padding horizontally and vertically 04:51 Summary of techniques and the basics of Auto layout 05:07 Vertical Auto layout using a Footer 🧰 Resources: Mastering Frame nesting is key to getting the most out of Figma: https://uxdesign.cc/mastering-frame-n... The No Bull Guide to Figma is the fastest way to learn the world's biggest and best design tool. Where other courses teach you about UX and UI, I'll simply teach you how to get really good at Figma. Design web pages, mobile apps, SaaS tools, and even more just like I have using my techniques and approaches. Perfect for designers, product designers, or even software engineers, developers, and product managers. Full course available on Skillshare: 🎥 https://chk.fyi/nobull Even MORE resources: 🎙️ Podcast, Diary of Design Thinking: https://chk.fyi/DoDT 📚 Medium articles, mostly on UX Collective: https://chk.fyi/medium 🔴 Subscribe to me on YouTube: https://chk.fyi/GetYouTube If you can't wait, checkout my written Figma tutorials on Medium: ✏️ / figma-tutorials Or how to fix common issues in Figma: 🛠️ / figma-troubleshooting ❤️ If you found this valuable, funny, or entertaining, hit that like and subscribe button. It means a lot! Don't forget to share with your design peers! #Figma #FigmaDesign #UIDesign #UXDesign #ProductDesign #DesignTools #GraphicDesign #WebDesign #DigitalDesign #OnlineLearning #SkillShare #CreativeCourse #LearnFigma #DesignEducation #DesignSkills #DesignTutorial #DesignCourse #DesignClass #NoBullFigma #FigmaPro #FigmaTraining #DesignCommunity #DesignInspiration #DesignSystems
