Phase 4: Prototype

Purpose

The prototype phase takes the chosen design from ideation and builds it as a Figma component using the Figma MCP server.

Usage

/design:prototype <component-name>

Prerequisites

• .metapowers/design/<component-name>/component-contract.md (hard gate — enforced by hook)
• .metapowers/design/<component-name>/ideation-options.md (soft gate)
• FIGMA_ACCESS_TOKEN environment variable set

What It Does

1. Reads the component contract and chosen ideation option
2. Creates the component structure with figma_create_component and figma_create_frame
3. Adds text layers with figma_create_text and shapes with figma_create_shape
4. Configures layout with figma_set_auto_layout and applies styles with figma_apply_styles
5. Arranges variant sets with figma_arrange_component_set
6. Exports preview images with figma_export_image
7. Writes notes to .metapowers/design/<component-name>/prototype-notes.md

Figma MCP Integration

The Design plugin uses @anthropic-ai/figma-mcp to write directly to your Figma canvas. The hook at hooks/check-define-exists.sh ensures a component contract exists before any Figma write operations.

Output

• Figma component created on your canvas
• .metapowers/design/<component-name>/prototype-notes.md with implementation notes

MCP Tools Used

• figma_create_component — Create a new Figma component
• figma_create_frame — Create a frame or container node
• figma_create_text — Create a text layer with content and styling
• figma_create_shape — Create a rectangle, ellipse, or other shape
• figma_set_auto_layout — Configure auto-layout on a frame or component
• figma_apply_styles — Apply fill, stroke, and effect styles to a node
• figma_arrange_component_set — Arrange variants in a component set grid
• figma_export_image — Export a node as PNG, SVG, or PDF

Next Phase

After prototype, proceed to Test to validate the implementation.