---
name: export-to-figma
description: Push React components and pages to Figma using the Figma MCP server. Use when user says "export to Figma", "push to Figma", "create Figma design", "send to Figma", or wants to create a Figma design from code.
allowed-tools: Bash, Read, Write, Edit, Glob, Grep, mcp__figma__generate_figma_design, mcp__figma__add_code_connect_map, mcp__figma__get_screenshot, mcp__figma__get_code_connect_map
---

# Export to Figma Skill

## Parameters

- **target** (required): Component name or page route to export
- **outputMode** (optional): `newFile`, `existingFile`, or `clipboard` (default: ask user)
- **figmaFileKey** (optional): Required when outputMode is `existingFile`

## Prerequisites

This skill requires the Figma MCP server (`figma@claude-plugins-official`).
If unavailable, report: "Figma MCP server not connected. Enable `figma@claude-plugins-official` in `.claude/settings.json` or check your Figma authentication."

## Workflow

### 1. Identify Target

- Determine if target is a component or page
- Read the component/page source files
- Verify the files exist

### 2. Start Dev Server

- Start the Vite dev server: `npm run dev`
- Wait for it to be ready
- Verify the target renders correctly at the expected URL:
  - Component: Use Storybook URL (`http://localhost:6006`)
  - Page: Use dev server URL (`http://localhost:5173/{route}`)

### 3. Generate Figma Design

- Call `generate_figma_design` with:
  - The URL of the rendered component/page
  - Description of the design
  - Output mode (new file, existing file, or clipboard)
- Poll for completion using the returned captureId (check every 5 seconds)

### 4. Establish Code Connect

After successful design generation:
- Call `add_code_connect_map` to link the Figma node to the React component
- Map the component file path and props

### 5. Update Indexes

- Update `docs/components.md` or `docs/pages.md` with the Figma URL and node ID
- Update the component registry with the Figma link

## Output

Report:
1. Figma design created (URL)
2. Code Connect mapping established
3. Index documents updated

## Error Handling

- **Figma MCP unavailable**: Report error with setup instructions, do not proceed
- **Dev server fails**: Report Vite error, suggest `npm run dev` manually
- **Design generation fails**: Report the error from the MCP server