# CC Fig MCP Plugin Installation

## What This Is
Advanced Figma plugin for Claude MCP integration with:
- Full document manipulation 
- WebSocket bidirectional communication
- Real-time change notifications
- Comprehensive Figma API access

## Installation Steps

### 1. Download Plugin Files
You need these 3 files:
- `manifest.json` (plugin metadata)
- `code.js` (main plugin code - 129KB)
- `ui.html` (plugin UI - 52KB)

### 2. Install in Figma Desktop
1. Open Figma Desktop (not web version)
2. Go to **Menu → Plugins → Development → Import plugin from manifest**
3. Select the `manifest.json` file 
4. Plugin will install as "CC Fig MCP Plugin"

### 3. Test Installation
1. Run plugin: **Menu → Plugins → Development → CC Fig MCP Plugin**
2. Plugin UI should open with connection settings
3. Default WebSocket: `ws://localhost:3055`

## Connection Setup

### Option A: Use Existing Relay (Recommended)
If the Phat Foods relay is still running:
1. Set WebSocket URL: `ws://localhost:3055`
2. Set Channel: Whatever channel name you want
3. Click "Connect"

### Option B: Start New MCP Server
From `/home/clawd/cc-fig-mcp/`:
```bash
npm run socket
```
Then connect plugin to `ws://localhost:3055`

## Key Differences vs Phat Foods Plugin

| Feature | Phat Foods Plugin | CC Fig MCP |
|---------|------------------|------------|
| **Purpose** | Slide deck automation | Full Figma API access |
| **Commands** | ~20 slide-specific | 50+ comprehensive |
| **UI** | Simple channel join | Full settings panel |
| **Notifications** | None | Real-time change events |
| **Scope** | Template population | Complete design automation |

## Ready to Test?
Once installed, we can:
1. Connect plugin to WebSocket
2. Run test commands from Claude
3. Start building real functionality

Let me know when you have it installed!