TETRA2000/export-to-figma

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