Summary of "Web Design on Figma | Full UX Design Course for Beginners by Cutting Edge School"

This video is part of a 15-episode UX design foundational series by Anshmera, a self-taught product designer and storyteller at zuttle.com. The focus of this particular lecture (#8) is on layouts, spacing, and grids in UX/UI design, especially as applied in Figma. The session aims to clarify common misconceptions beginners have about these concepts and provide practical guidance and resources for deeper learning.

Main Ideas and Concepts

1. Importance of Core Principles Over Tools

Technical skills and software knowledge become outdated over time.
The enduring value lies in understanding core UX principles, mindset, and problem-solving approaches.

2. Layouts, Spacing, and Grids Fundamentals

These are foundational yet often overlooked concepts by beginners.
The session covers:
- Core fundamentals of layouts and grids.
- Common misconceptions and confusions.
- Recommended resources for further reading.

3. Column Layouts in Design

Screens are divided into columns with fixed widths (commonly 60-80 pixels; 65px recommended).
Number of columns varies by device (e.g., 12 on desktop, 8 on tablet, 4 on mobile).
Columns have gutters (spaces between columns) and side margins (outer gutters).
Parent containers can span multiple columns and contain nested elements with internal padding.
Visual edges of UI elements do not necessarily align exactly with column edges due to internal padding and nesting.

4. Practical Use of Grids in Figma

Figma allows setting column counts, widths, gutter sizes, and overlay colors.
Collaboration with developers is crucial to agree on grid systems.

5. Spatial Systems and Spacing

Spacing systems are often based on multiples of 2, 4, or 8 pixels depending on UI density.
Two approaches to padding:
- Content-first padding: Content size dictates container size; padding adapts.
- Element-first padding: Fixed container size; content may be truncated to maintain uniformity.
Prioritize accommodating content before applying padding.

6. Points vs Pixels and Screen Resolution

"Point" is a unit dependent on screen resolution:
- At 1x resolution, 1 point = 1 pixel.
- At 2x resolution, 1 point = 4 pixels (2x2).
- At 3x resolution, 1 point = 9 pixels (3x3).
This affects image export sizes and clarity, especially for raster images (e.g., PNG, JPEG).

7. Hard Grids vs Soft Grids

Hard grids: Strict alignment where elements snap exactly to grid boundaries (like bricks).
Soft grids: Relative positioning of elements with flexible spacing, not constrained to strict boxes.
Many developers prefer soft grids as they better reflect how elements are positioned in code.

8. Recommended Reading and Resources

Articles by Christy Tang on responsive grids (Medium).
Elliot Dahl’s article on space grids and layouts (designsystems.com).
Medium article: "Everything you need to know as a UI designer about spacing and layout grids."
Spec.fm article on the eight-point grid system.
All links will be provided in the video description.

Additional Notes and Offers

The presenter encourages learners to study the recommended articles independently and make notes.
Premium capsule sessions are available on graphic.ly covering:
- Interface design.
- Documentation techniques using Notion.
- Learning quickly and monetizing design skills.
- How to get well-paying design jobs.
- Using Figma for social media content creation.
Weekly cohort sessions on Friday nights for Q&A and note sharing.
All premium sessions have unlimited replays.
The presenter invites viewers to engage by liking, subscribing, commenting, and sharing on social media (Instagram and Twitter).

Methodology / Key Instructions for Beginners

Understand and apply fixed column widths and gutters in layouts.
Adjust the number of columns based on device type.
Use parent containers spanning multiple columns with internal padding.
Choose a spacing system (2, 4, or 8-point grid) depending on UI density.
Decide between content-first or element-first padding approaches based on project needs.
Learn the difference between points and pixels relative to screen resolution.
Decide with developers whether to use hard or soft grids.
Study recommended articles to deepen understanding.
Collaborate closely with developers to ensure grid and spacing decisions are feasible in code.

Speakers / Sources Featured

Anshmera (Presenter): Product designer and storyteller at zuttle.com, self-taught UX designer, creator of the UX Design Course.
Christy Tang: Author of an article on responsive grids (Medium).
Elliot Dahl: Author of an article on space grids and layouts.