You can click and drag over the area to select all and then group the selection by right-clicking in the layers panel and Group selection or pressing Ctrl + G. Step 12: To solve this, we will first select all the rectangles and triangles in the middle section. Step 11: Now resizing the mainframe, we see that the rectangles on top follow the grid positions and shrink uniformly, but the section in the middle does not because though we have specified 4 columns, but still the 6 column grid is applied Step 10: Then, we have duplicated the rectangles and triangle on all 4 grids using the alt key and drag. One trick is to use align left or align right using design panel, which will put them in the corner, then press shift and arrow keys to move as shown. Make sure that the small square is 10 px inside from top, bottom, or left, right. Step 9: Now add another two rectangles as shown and a triangle by using a polygon tool.

Step 8: Then add a rectangle and change the fill to some yellowish color

Then add a 4-column layout with a margin of 30 and a gutter of 20 Step 7: Now, we will create a different layout in the middle of our frame for that, we need to change the layout grid so that it hides the current grid and from the layout grid in the design panel. Step 6: Hold the Alt key and drag the rectangle two more times to fix the grid as shown.

Figma ruler tool