Joey Banks explains how to use constraints to create responsive components that work with nearly endless screen widths and heights. One hidden feature he didn’t mention is a special relationship between constraints and layout grids — see my old article “Using Constraints with Layout Grids in Figma” from 2020.
Miggi shows how to make a reusable and flexible tooltip component set using Auto Layout, absolute positioning, constraints, and component properties.
Dan Hollick shares a few pros and cons of using Spacer components vs. Auto Layout.
Why do people use Spacer components?
— Dan Hollick 🇿🇦 (@DanHollick) January 26, 2022
Personally, I prefer using Auto Layout wrappers and controlling spacing with gaps but there might be a use case I'm overlooking?
Made some pros and cons below 👇 pic.twitter.com/uHHJndbRrn
“Creating components with automated sizing behavior saves a lot of time during the process. They also let us think more like a developer that has to implement the real application. That is why it is essential to master Constraints and Auto Layout in Figma.”
Cool to finally see an official video from Figma on using this hidden technique! See also my old article Using Constraints with Layout Grids in Figma, explaining the same approach.
Joey Banks shows a nice use case for combining Layout Grids with Constraints. For a deeper dive, check out my older article on this feature.
Here's a quick @figmadesign speedrun to show how you can combine Layout Grids with Constraints to create the perfect effect when resizing a frame/component with nested items. ↔️✨ pic.twitter.com/cMSken1lJO
— Joey Banks (@joeyabanks) September 3, 2020
In the first part, Rogie uses constraints and components to build navigation that scales from mobile to desktop. In the second part, he shows how to use Auto Layout to design flexible grids, hero, and card components that adapt to any browser size.
Great video by Figma55 channel, explaining how to use stretchy Layout Grids in conjunction with Constraints. It’s based on my article from a few weeks ago, but video is a great medium to demonstrate that trick.
While working on the book, I learned about a powerful way to arrange objects using a combination of Layout Grid and Constraints. I wrote a short article for Prototypr.io explaining how it works.