Doing it here leaves the Master Components intact - in a larger project this gives you more flexibility for reuse. Whilst we’re here, set the horizontal and vertical padding on both of these instances to 20px in the Auto layout options. An Instance of 3-row Frame goes into the Medium breakpoint.An Instance of 4-row Frame goes into the Large breakpoint.Copy an item row Frame, select a breakpoint, and then paste a new Instance as follows: If you’re not used to creating pixel-perfect designs, this part may be a bit tricky, but there’s a method to line these up perfectly every time. Set the Fill colour of the Large and Medium Frames to red and blue respectively, so we can visually identify each one as we go.īefore continuing, ensure that the “Clip content” checkbox is unticked on both the Medium and Large Frames.
#Figma grid plus
Set the height of both Frames to approximately 2 item cards (mine’s 438px), the width of Medium to the same as your 4-row Frame plus 40px, and Large should be 20px in width. To make the layers easier to identify later, let’s create two Frames representing two breakpoints: Large, and Medium. You should end up with something like the above.
Repeat the process for the 4-row Frame, but only create each row with 3 items and create 4 rows. The basic building blocks: 4x3 and 3x4 versions of the same SD card listings. Protip: quickly rename items you’ve just Framed using Cmd + Shift + r as you go. It seems like a lot of work, but trust me it’s worth it. You should have something resembling the previous screenshot. Turn this final Frame into a Master Component and rename it - mine’s named 4-row Frame.Set the Auto layout to flow in a “Vertical direction” if not already, and adjust the vertical spacing between each item - I set mine to 40px.Make 3 duplicates of this 4-row of results and apply Auto layout again with Shift + a.Turn this row into a Component with Cmd + Option + k in case you want to adjust it later.Set the Auto layout to flow in a “Horizontal direction” if not already, and adjust the horizontal spacing between each item - I set mine to 12px.Select the 4 copies you’ve made, then press Shift + a to apply Auto layout.
So, please see this Figma video tutorial, and you will get to know everything about grid systems in Figma and Figma layout grid settings.įigma layout grid is a tutorial from our Figma Tutorial video series. Your search is over! Now, you’ll learn about Figma layout grid bootstrap as well as Figma layout grid. This video cover:ĭid you attempt to search for Figma layout grid before? This video is mainly about “Figma layout grid bootstrap” and how it works, but we also try to cover the subjects. Along with this Figma layout grid bootstrap video, please follow our regular design tutorial videos, PLEASE visit our youtube channel.