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