Week 4: The Shape

week-4/

"What happens when I interact?"

Curriculum content for this week is coming soon.

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)

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)