Design Handoff — Annotation & Spec Export

Annotate Figma designs with implementation specs (spacing, colors, typography, component properties) for developer handoff. Uses annotations to add structured notes directly on design nodes.

Skill Boundaries

• Use this skill to annotate and prepare designs for developer handoff.
• If the task is implementing code from Figma, switch to figcraft-implement-design.
• If the task is reviewing design quality, switch to design-review.
• If the task is connecting components to code, switch to figcraft-code-connect.

Workflow

Step 1: Connect and Load Tools

ping                                          → verify plugin connection
load_toolset("annotations")                   → enable annotation tools

If `ping` fails (plugin not connected): STOP. Do not fall back to other MCP servers. Tell user: open Figma → Plugins → FigCraft → wait for connection, then retry.

Step 2: Inspect the Design

get_current_page(maxDepth: 2)                 → overview of page structure
nodes(method: "get", nodeId: "...")            → detailed properties of target nodes

For each key element, extract:

• Spacing: padding, itemSpacing, gaps
• Colors: fill hex values, variable bindings
• Typography: fontFamily, fontSize, fontWeight, lineHeight
• Dimensions: width, height, cornerRadius
• Layout: layoutMode, sizing, alignment

Step 3: Annotate Key Elements

Add structured annotations to important nodes:

set_annotation(nodeId: "...", label: "**Spacing**: padding 16px, gap 12px\n**Fill**: var(--color-bg-primary) #FFFFFF\n**Radius**: 8px")

For batch annotation:

set_multiple_annotations(items: [
  { nodeId: "1:23", label: "**Button**: height 44px, padding 0 16px, radius 8px, fill var(--color-primary)" },
  { nodeId: "4:56", label: "**Input**: height 48px, padding 12px 16px, stroke 1px var(--color-border)" },
  { nodeId: "7:89", label: "**Heading**: Inter 24px/32px Semibold, fill var(--color-text-primary)" }
])

Annotations support Markdown formatting for readability.

Step 4: Export Visual Reference

export_image(nodeId: "...", scale: 2)         → high-res screenshot of annotated design

Step 5: Generate Spec Summary

Compile a structured handoff document:

## Screen: [Name]

### Colors
- Background: var(--color-bg-primary) → #FFFFFF
- Primary text: var(--color-text-primary) → #111827
- Accent: var(--color-primary) → #3B82F6

### Typography
- Heading: Inter 24px/32px Semibold
- Body: Inter 16px/24px Regular
- Caption: Inter 12px/16px Regular

### Spacing
- Section padding: 24px
- Card gap: 16px
- Button padding: 0 16px

### Components
- Button: height 44px, radius 8px, primary/secondary/ghost variants
- Input: height 48px, radius 8px, stroke 1px

Step 6: Clean Up (Optional)

To remove annotations after handoff:

clear_annotations                             → remove all annotations from page
clear_annotations(nodeIds: ["1:23"])          → remove from specific nodes

Available Annotation Tools

What to Annotate

Focus annotations on information developers need most:

• Spacing values (especially non-obvious padding and gaps)
• Color tokens and their resolved values
• Typography specs (font, size, weight, line-height)
• Interactive states (hover, active, disabled — if not obvious)
• Responsive behavior notes (how elements adapt across breakpoints)
• Component property mappings (which props control what)

Integration

figma-create-ui → design-review → design-handoff → figcraft-implement-design
(create)          (review)         (this skill)      (implement)

After review and approval, annotate the design for handoff, then use figcraft-implement-design to generate code.