Figma for EDU Monthly Workshop - Layout Grids

Introduction

• Presenter: Miggi
• Topic: Using layout grids in Figma
• Key Points:
  • Grids organize layouts, improve consistency, and demonstrate design intent.
  • Grids reduce decision-making by providing structure.

Getting Started

• Follow Along: Duplicate the file at figma.com/at/education.
• Shortcut: Press Shift + G to toggle grid visibility.

Layout Grid Basics

• Purpose:
  • Establish rules for layout similar to design systems.
  • Enhance consistency and intent in design.

Creating Columns

• Tool: Press F for the frame tool.
• Steps:
  • Select frame, view properties panel for layout grid settings.
  • Default grid: vertical and horizontal at 8 pixels.
  • Adjust grid size, margins, and gutters for alignment.
  • Components:
    • Columns: Set count and type (stretched, centered, etc.).
    • Margins: White space around design; important for readability.
    • Gutters: Space between columns; can be set to zero for flush lines.
• Fun Fact: Gutters were originally called alleyways.

Creating Rows

• Importance: Helps establish vertical rhythm.
• Steps:
  • Similar approach as columns.
  • Set row count, margins, and gutters.
  • Rows can be set to a specific height value or stretch.

Baseline Grids

• Concept: Visual aid to keep text alignment consistent.
• Steps:
  • Create a frame, set layout grid to rows.
  • Set row height and gutter, baseline grid auto value.
  • Text Alignment: Line height must be divisible by baseline grid height.
• Applications: Useful for presentations or establishing typographic scales.

Modular Grids

• Purpose: Useful for bento layouts or complex designs.
• Steps:
  • Stack grids; create columns and rows with matching gutters and margins.
  • Ensure text aligns with modular grid lines.

Device-Specific Grids

• Applications:
  • Phone: 1 or 4 column layout with specific margins and gutters.
  • Tablet and Web: Use 8 and 12 column layouts, respectively.
  • Example: Stripe’s website illustrates grid alignment effectively.

Advanced Concepts

• Nested Frames: Apply grid to frames within frames for complex layouts.
• Resources:
  • Material Design Guide
  • Stripe’s Website
  • Layout Grid Visualizer

Conclusion

• Key Takeaways:
  • Grids are essential for consistency and scalability in design.
  • Start with presentations, then apply to broader design systems.
• Resources and Documentation: Available for further exploration.