A really detailed guide by Molly Hellmuth on spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.
Molly shares a few takeaways from recreating a responsive Asana dashboard in Figma.
💡5 tips for designing a responsive dashboard in Figma
— Molly Hellmuth (@molly_hellmuth) November 23, 2021
Responsive design seems to be one of the trickier topics for my students so I made a project for them (Recreate the Asana Dashboard in Figma). Below are some of my favorite takeaways from the project. pic.twitter.com/RHtIRQnLIm
Miguel with a tip on setting up a lightweight baseline grid with Layout Grid.
If you want to make a baseline grid in @figmadesign, set the row count to auto and the type to top, you can also set the gutter to zero, or match your baseline value.
— Miggs in Space (@miggi) September 23, 2021
The 'auto' count will grow the rows to fit your frame. pic.twitter.com/5UwBBtg3eb
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.
Live-building Sign-in and Registration components for the official Tailwind UI Figma kits.
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
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.