Figma for Edu: Auto Layout components

Download the community file here: https://www.figma.com/community/file/1497624806807087285/making-auto-layout-components
Join a future Figma event or livestream here: https://www.figma.com/events/
This Figma for Edu monthly workshop recording is for intermediate users of Figma Design who want to create reusable and responsive components. We’ll go step-by-step in building out a responsive component, discuss Auto layout for responsiveness, component properties, variables, and modes to make it more flexible and extensible. We will then walk through how developers can view and inspect your components in Dev Mode for a better hand off experience.

Led by Figma’s Designer Advocate for Education Miguel 'Miggi' Cardona, this is monthly workshop is for students, educators, teachers, instructors, teaching assistants, and those in the ed-tech space.


00:00 Intro
00:28 File overview
01:00 Example breakdown
06:45 Auto Layout introduction
08:08 Aspect ratio lock
12:04 Text field resizing options
14:03 Enabling Auto layout frames and Suggest Auto layout
20:52 Auto layout direction
21:55 Auto layout basics
30:11 Suggest Auto layout for complex layouts
40:01 Min/max width and height
47:47 Building the component
57:30 Livestream wrap
____________________________________________________

Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/