figma-integration

# Figma Integration Skill

Transform Figma designs into implementation-ready specifications with CCPM's design-to-code workflow.

## When This Skill Activates

This skill auto-activates when:

- User mentions **"Figma"** or **"design"** in implementation context
- User asks about **"component"**, **"design system"**, or **"design tokens"**
- Running **`/ccpm:plan`** (starts design process)
- Running **`/ccpm:plan`** (refine designs)
- Running **`/ccpm:plan`** (generate specs)
- Running **`/ccpm:figma-refresh`** (refresh cached designs)
- User mentions **"design-to-code"**, **"design file"**, or **"Figma component"**

## The Figma Workflow

### Phase 1: Design Phase

**Command**: `/ccpm:plan ISSUE-ID`

Start the design process by attaching Figma links to your Linear issue:

```
1. Create/update Linear issue with task description
2. Attach Figma design link in issue description
3. Run /ccpm:plan TASK-123
4. CCPM extracts design metadata and creates options
```

**What happens**:
- Detects Figma links from issue and related documents
- Analyzes design file metadata (frames, components, assets)
- Extracts design tokens (colors, typography, spacing)
- Creates visual options or wireframes
- Caches design data for instant access

**Example**:
```
/ccpm:plan PSN-123

✅ Detected Figma link: https://figma.com/file/ABC123/UserDashboard
📦 Design Analysis:
   - 12 frames found
   - 15 components detected
   - Color palette: 8 colors
   - Typography: 4 font families
   - Spacing pattern: 4px, 8px, 16px grid

Ready for design review. Run: /ccpm:plan PSN-123
```

### Phase 2: Refinement Phase

**Command**: `/ccpm:plan ISSUE-ID [OPTION] [FEEDBACK]`

Iterate on designs based on feedback:

```
1. Review design options from Phase 1
2. Provide feedback or request changes
3. Run /ccpm:plan TASK-123 "feedback"
4. CCPM creates refined design options
```

**What happens**:
- Analyzes your feedback
- Generates refined design variations
- Adjusts colors, layout, or components
- Updates desig