Summary of Web Design on Figma | Full UX Design Course for Beginners by Cutting Edge School
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:
- 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.
Notable Quotes
— 00:08 — « It doesn't matter what softwares you know today because with time every technical skill gets outdated. What truly stays with you are the core principles, your mindset and the way you think about your subject. »
— 02:10 — « Spacing and layout is something that is not very visible when you go through a UI, you can't really see the grid system or the column layouts, but it's there. »
— 05:38 — « A lot of people believe that this column structure, these parent containers define the boundary of your UI element which is not the case. »
— 15:11 — « In a soft grid you don't care if there are any bricks or not, you say that this name is probably 8 pixels away or this is probably 4 pixels away or this is probably 32 pixels away. So it's all relative to one element to another. »
— 15:50 — « A lot of developers say that soft grid is a better approach but you know this is something that you have to sit with your developer and understand what are they comfortable with. »
Category
Educational