Week 4: The Shape Week 4

Interaction Question: What happens when I interact?

Learning Outcomes

  • Understand Figma's SVG Engine — Explain how Figma generates SVG code and what export settings affect output quality
  • Prepare Designs for Code — Structure Figma files with semantic layer naming, flattened groups, and outlined strokes for clean SVG export
  • Read SVG Structure — Identify SVG elements (`<svg>`, `<path>`, `<g>`, `<rect>`, `<circle>`) and understand XML syntax
  • Explain viewBox — Understand the viewBox coordinate system and how it differs from pixel dimensions
  • Optimize SVG Code — Use SVGO and manual cleanup to remove Figma metadata while preserving structure
  • Apply Design Tokens to SVG — Use CSS custom properties to theme SVG colors, connecting to Week 1-2 systems
  • Implement ARIA Basics — Add aria-label to icons and understand decorative vs. content SVG
  • Prepare for Keyboard Interaction — Make SVG focusable and plan for interactive states (expanded in Week 5)

Curriculum Activities

Engage

  • Engage 4-1: Icon Audit
    weeks/week-4/engage/engage-4-1-icon-audit.md

Learn

  • Learn 4-1: Figma's SVG Engine
    weeks/week-4/learn/learn-4-1-figmas-svg-engine.md
  • Learn 4-2: SVG Fundamentals
    weeks/week-4/learn/learn-4-2-svg-fundamentals.md
  • Learn 4-3: Optimization Workflow
    weeks/week-4/learn/learn-4-3-optimization-workflow.md

Practice

  • Practice 4-1: The Anatomy
    weeks/week-4/practice/practice-4-1-the-anatomy.md
  • Practice 4-2: The Interaction
    weeks/week-4/practice/practice-4-2-the-interaction.md

Build

  • Build 4-1: The Mark
    weeks/week-4/build/build-4-1-the-mark.md
  • Build 4-2: The Refinement
    weeks/week-4/build/build-4-2-the-refinement.md

Reflect

  • Reflect 4-1: Visual Notes
    weeks/week-4/reflect/reflect-4-1-visual-notes.md

Lectures

  • Lecture 4-1: SVG Structure & Figma's Engine
    weeks/week-4/lectures/lecture-4-1-svg-structure.md
  • Lecture 4-2: Interactive SVG
    weeks/week-4/lectures/lecture-4-2-interactive-svg.md

Resources

  • Week 4 Resources: The Shape (SVG)
    weeks/week-4/resources/week-4-resources.md

Canvas Alignment

Module: week 4 The Shape // SVG Structure, Figma's Engine, and Interactive Graphics

  • active Build 4-1 // symbols -- Theme Dropdown with Custom SVG Icons
  • active Engage 4-1 // Learning Log week-3
  • active Practice 4-1 / SVG Tutorial
  • active Reflect: week 4 -- Visual Notes
  • active Build 4 -2 // The Mark (Geometry & Primitives)
  • active Practice 4-1 // .svg Anatomy