figma-canvas-layout

Figma Canvas Layout

When to use

You are the UI/UX Designer authoring or revising Figma content via MCP. The kit requires a reviewable canvas arrangement before handoff because two consumers see your canvas directly:

• The Designated Design Approver opens the Figma file at confirmation time (design lifecycle Step 4, .claude/rules/parallel-execution.md §4). Visual chaos on the canvas — long-scroll screens bleeding over neighbors, frames jumbled without grouping — produces false unqualified BA Phase 3 verdicts and slower approval cycles.
• QA-Author generates docs/uiux/visual-specs/<task-id>.md and may export page-level Figma snapshots. Overlapping frames muddy page exports; frame-level exports stay clean, but the operator reviewing the visual spec sees both.

FE Dev consumes frame data via MCP node-by-node and is less sensitive to canvas layout, but the design lifecycle still treats canvas readability as a handoff quality gate. A clean frame export is not enough; the scoped Figma page must also be usable for human review.

Inputs and outputs

• Inputs: SRS UI surfaces (SRS §3.4.1 Design References), the Figma file you're writing to via MCP, the current ## Design References state.
• Outputs: A Figma file whose frames satisfy the layout rules below and pass the pre-handoff overlap lint; frame names that map 1:1 to handoff-doc anchors; an updated handoff doc with the lint result recorded.

Layout rules

The kit prescribes deterministic placement + lint. Choose the reading direction that fits the flow, but always compute explicit coordinates before writing or moving frames. Do not rely on Figma's default origin placement; stacked frames at (0, 0) or visually overlapping long-scroll screens fail handoff.

Placement contract

Use the resolved Figma-Design-Page-Node-ID from ui-ux-page-scoping as the only screen canvas for the dispatch.

1. Group screens by US-ID or bounded feature flow.
2. Create one Figma Section per group when the page has more than five frames.
3. Place each section in a predictable grid:
   • Start at CANVAS_ORIGIN_X = 0, CANVAS_ORIGIN_Y = 0 unless existing scoped frames already occupy that region.
   • Use SECTION_GAP_X = 1200px and SECTION_GAP_Y = 1200px between sections.
   • Within a section, use FRAME_GAP_X = max(240px, 0.15 * widest-frame-width-in-row).
   • Within a section, use FRAME_GAP_Y = max(320px, 0.25 * tallest-frame-height-in-row).
   • Long-scroll frames define the row height; never let a short neighbor's height determine the vertical step.
4. Set x and y explicitly for every newly created or revised top-level screen frame.
5. After writing frames, re-enumerate bounding boxes and run the overlap lint. If any frame moved because of a collision, record it in the handoff ## Canvas Layout Lint notes.