Figma Auto Layouts Crash Course - Dynamic Layouts from Design to Code 💡

Series: Dynamic Layouts from Design to Code

In this collection of 2 sessions, you will grasp the perspective of a UX/UI designer and a Web Developer in a workflow to create dynamic layouts while learning important concepts from each. In the first session, you will learn and prototype a web page in Figma using the Auto-layout property. In the second session, you will learn CSS Flexbox and code the prototype developed in the previous session.

Session 1: Figma Auto Layouts Crash Course
Session 2: CSS Flexbox Layouts Crash Course

Note: Both sessions are independent but complementary 😉

📌 S1: Figma Auto Layouts Crash Course

Have you ever struggled to keep your elements properly aligned and spaced as your design grows? In this hands-on course, you’ll learn everything about Auto Layout in Figma, a super helpful property to create responsive layouts.

Auto layout allows you to create dynamic designs and it's a powerful feature with many moving parts and uses. It is a property you can add to frames and components, and that lets you create designs that grow to fill, shrink to fit, and reflow as their contents change. You will learn the fundamentals of how Auto Layout works and you will be able to create a design on Figma by yourself.

Who this course is for:
✅ UX/UI Designers looking to enhance their knowledge in Auto Layout and better communicate with developers,
✅ Web Developers looking to learn about Auto Layouts in Figma and better understand UX/UI Designers and their deliverables.
✅ Any person interested in getting an understanding of Auto Layout in Figma (some basic Figma knowledge required)