09

    Layout Basics for UI Design

    By Nitin Khatri (Senior UI/UX Designer & Educator)
    Reviewed by Sarah Miller (Principal Product Designer (Reviewer))
    Updated
    Video Lesson: 07:00
    Level: Beginner
    Official References:
    Figma Help CenterFigma YouTube Channel

    A great UI relies on a solid structural foundation. This lesson explores alignment markers, layout grids, and spacing rules to help you create clean and balanced designs.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Apply layout grids to frames for consistent alignment
    • •Understand the 8-pixel spacing rule for modern UI
    • •Use smart selection and tidying tools to manage element spacing
    • •Identify visual hierarchy through proper positioning and grouping

    What You'll Learn

    1. Configuring columns, rows, and grids
    2. Using alignment tools for precise element placement
    3. The importance of vertical rhythm and white space
    4. Smart selection and multi-element spacing adjustments

    Key Concepts

    Layout Grids
    Alignment Tools
    Visual Hierarchy
    Spacing Systems

    Key Takeaways

    • ✓Layout grids provide a framework for placing content consistently.
    • ✓Alignment tools allow you to distribute space evenly between elements.
    • ✓The 8pt grid system is a standard for scalable UI design.
    • ✓Consistency in layout improves the overall user experience.

    Practice Tasks

    Grid Layout Setup

    Create a structured layout using columns and rows to guide element placement.

    • Apply a 12-column layout grid to a desktop frame
    • Set the column margin to 80px and gutter to 20px
    • Place three rectangles that span exactly 4 columns each
    • Use the 'Tidy Up' tool to equalize spacing between three random objects
    • Toggle grid visibility using the keyboard shortcut or eyeball icon

    Knowledge Check

    Pass with 70% or higher

    1. What is the main benefit of using a Layout Grid on a parent Frame?

    2. In a column-based layout grid, what is the 'Gutter'?

    3. Why is the 8pt grid system widely used in modern UI design?

    Lesson FAQ

    Q: How can I practice what I learned in this lesson?

    We highly recommend opening your own Figma workspace in a side window and repeating the steps shown in the video. Utilize the tasks checklist above for specific practice targets.

    Q: What should I do if my layout behaves differently from the walkthrough?

    Double-check parent-child constraints and resizing values (e.g. Hug vs Fill). Ensure Auto Layout direction is correct and check the related guidebooks below for step-by-step visual references.

    Lesson Resources & Connections

    Prerequisites

    No prerequisites required. This is a foundational starter lesson.

    Related Guidebook

    How to use layout grids for UI design in Figma

    Read Guidebook →

    Relevant Design Tool

    Image Compressor

    Reduce asset size before export.

    Open Companion Tool →

    Next Lesson

    Auto Layout Fundamentals