Summary
Keywords
Full Transcript
Get the workshop file here: https://www.figma.com/community/file/1616882915242962728/resizing-with-auto-layout-and-grid-in-figma In this workshop we will hone in on the concept of resizing when using Auto layout and grid frames to better understand how to build responsive design layouts. We will build common component patterns and demonstrate how they resize and flex to respond to different device sizes. 00:00 Introduction 00:50 Overview 2:12 Resizing vs. scaling in Figma 03:50 Constraints 08:34 Image resizing 15:05 Text resizing 17:30 Auto layout frames and direction 20:06 Auto layout resizing 20:43 Fixed sizing 21:31 Hug sizing 25:30 Fill container 35:53 Grid (beta) 37:05 Resizing in Grid example 1 46:25 Resizing in grid example 2 50:41 Hug in grid explainer 54:33 Questions and Answer ____________________________________________________ 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/
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
