Grid Layouts for Web Designers (Figma Tutorial)

Key Concepts

• Responsive grid-based layouts
• Grid systems in design (manuscript, column, modular)
• Auto layout in Figma
• Grid tool in Figma
• Responsive design principles
• Breakpoints
• Gutters
• Free form layout vs. Grid layout

Grid Systems and Their Applications

The video begins by emphasizing the importance of grid systems in design, extending beyond graphic design to architecture and industrial design.

• Architecture: Grids inform the design of modern buildings and city blocks.
• Industrial Design: Grids bring order to interfaces of physical products like calculators and synthesizers, making them user-friendly and trustworthy.
• Graphic Design: Different types of grids are used:
  • Manuscript Grids: Single-column grids used in books to determine line length, page numbers, and titles.
  • Column Grids: Two-column grids for religious texts and multi-column grids for newspapers.
  • Modular Grids: Grids with both rows and columns, creating rectangles with or without gutters (spaces between rows and columns). Magazines and coffee table books often use modular grids.

The speaker highlights that a well-designed magazine demonstrates the principles of layout, scale, contrast, hierarchy, imagery, and visual weight balance, where the grid itself can be an aesthetic element.

Figma's New Grid Auto Layout Tool: A Practical Demonstration

The video transitions to a practical demonstration of Figma's new grid auto layout tool.

Setting Up the Grid

1. Create a Frame: Start with a desktop frame (e.g., 1440x1024).
2. Add a Nested Frame: Create a frame inside the desktop frame and give it a fill color.
3. Enable Auto Layout: Convert the desktop frame to an auto layout frame using Shift + A.
4. Configure Auto Layout: Set alignment to center-center, gap between objects to zero, and horizontal/vertical padding to 48 pixels.
5. Set Frame Width: Set the nested frame's width to "fill container."
6. Apply Grid Layout: Select the nested frame and change the layout option from "free form" to "grid." Figma creates a default 2x2 grid.

Manipulating the Grid

• Adjusting Grid Dimensions: Change the number of columns and rows in the layout panel (e.g., to a 6x3 grid).
• Adding Frames to Cells:
  • Click within a cell to create a frame that automatically fills the cell.
  • Duplicate frames using Cmd + D to populate adjacent cells.
  • Drag existing frames from outside the grid into specific cells.
• Customizing Cell Content: Adjust the width and height of frames within cells, and use alignment tools (Option + H/V/S) to position them.
• Spanning Cells: Drag frames beyond the bounds of their initial cells to span multiple cells. Use [ and ] keys to move frames forward or backward.

The speaker emphasizes that using the grid tool avoids excessive nesting of frames, resulting in a cleaner file structure compared to using only auto layout.

Applying the Grid Tool to an Existing Design

The video demonstrates how to convert a free-form layout to a grid-based layout using an existing design as an example.

1. Duplicate the Design: Create a copy of the existing free-form design.
2. Convert to Grid Layout: Select the main content frame and change its layout from "free form" to "grid."
3. Configure Grid Settings: Adjust the number of columns and rows to match the original design's grid structure (e.g., 12 columns, 5 rows, 24px gutter).
4. Reposition Elements: Drag and align elements to their corresponding cells within the grid. Use alignment shortcuts (Option + S, etc.) for precise positioning.
5. Convert Buttons to Auto Layout: Select multiple buttons and use Shift + A to create an auto layout frame for them, adjusting the gap between the buttons as needed.

The speaker notes that using the grid layout tool prepares the design for development and Figma sites, offering better responsiveness compared to a free-form layout.

Responsive Design Considerations

The video briefly touches on responsive design, suggesting that a mobile version would likely use a single-column layout.

1. Mobile Layout: Create a one-column layout for mobile, stacking the cards on top of each other.
2. Desktop Responsiveness: Convert the grid layout to an auto layout (Shift + A) to enable horizontal stretching.
3. Breakpoints: Introduce breakpoints (e.g., for tablets) to adjust the layout as the screen size changes.

The speaker demonstrates how the grid cells widen as the screen expands, maintaining the card sizes until they get too close, at which point a breakpoint would be necessary.

Conclusion

The video concludes by emphasizing that grids are a tool, and their effectiveness depends on how they are used. Mastering grids requires understanding layout principles, studying great design, practicing, and seeking expert feedback.

Notable Quote: "Grids are simply a tool so like anything in design it's not simply if you use them but how you use them that determines whether your composition is successful."