# Pixel — Figma Integration Research

## Options for AI-Driven Figma Editing

### Option 1: Figma REST API (Direct)
**How it works:**
- Figma has a REST API for reading and writing to files
- Can programmatically update text, colors, component properties
- Requires Personal Access Token or OAuth

**Capabilities:**
- ✅ Read file structure, components, text
- ✅ Update text content in frames
- ✅ Modify component properties
- ✅ Export images/PDFs
- ⚠️ Limited: Can't create new complex layouts easily
- ❌ No direct "design" capability — works with existing templates

**Best for:** Template-based workflows where structure exists, just filling in content

**Setup:**
1. Generate Figma Personal Access Token
2. Identify template file IDs
3. Map text layers to content slots
4. API calls to update text per slot

---

### Option 2: Figma Plugins (Custom Plugin)
**How it works:**
- Build a Figma plugin that accepts structured input
- Plugin runs inside Figma and manipulates the canvas
- Can be triggered via API or manually

**Capabilities:**
- ✅ Full canvas manipulation
- ✅ Create new frames and layouts
- ✅ Apply styles, components, auto-layout
- ✅ More powerful than REST API alone

**Best for:** More complex design automation

**Setup:**
1. Build plugin with TypeScript
2. Define input schema (JSON from Echo)
3. Plugin parses and creates/updates slides

---

### Option 3: Figma + Make/Zapier Integration
**How it works:**
- Use automation platforms to bridge
- Trigger updates from external systems
- Limited but simpler setup

**Capabilities:**
- ✅ Basic text updates
- ✅ Easy to set up
- ❌ Limited design control

---

### Option 4: AI Design Tools (Galileo AI, Figma AI, etc.)
**How it works:**
- Newer tools that generate Figma designs from prompts
- Figma's own AI features (in beta)
- Third-party tools like Galileo AI

**Capabilities:**
- ✅ Generate layouts from descriptions
- ⚠️ Quality varies
- ⚠️ May not match brand templates exactly

---

## Recommended Approach for Pixel

### Phase 1: Template-Based (Start Here)
1. **Create master templates** in Figma for each slide type
   - Cover slide
   - Section divider
   - Content slide (headline + body)
   - Competitor card
   - Audience persona
   - Brand pillar
   - Visual direction
   
2. **Map text layers** to named slots
   - `{{headline}}`
   - `{{body}}`
   - `{{source}}`
   
3. **Pixel uses API** to:
   - Duplicate template frames
   - Fill in text from Echo's copy deck
   - Export final PDF

### Phase 2: Smart Layout (Later)
- Add plugin for more dynamic layouts
- Auto-adjust based on content length
- Component swapping based on content type

---

## Technical Requirements

### Figma Access Needed
- Personal Access Token (Settings → Account → Personal access tokens)
- File IDs for template files
- Node IDs for text layers to update

### API Endpoints
```
GET /v1/files/:file_key — Read file structure
GET /v1/files/:file_key/nodes — Get specific nodes
POST /v1/files/:file_key/variables — Update variables
GET /v1/images/:file_key — Export images
```

### Python Library
```bash
pip install figma-py
```

---

## Workflow for Pixel

```
Echo delivers copy deck (markdown)
    ↓
Pixel parses into structured JSON
    ↓
Pixel calls Figma API:
    1. Duplicate template file
    2. For each slide:
       - Find text layer by name
       - Update text content
    3. Export to PDF
    ↓
Final deck ready for review
```

---

## Next Steps

1. [ ] Get Figma Personal Access Token from Assaf
2. [ ] Identify/create template file in Figma
3. [ ] Map all text layers with consistent naming
4. [ ] Build Pixel agent with API integration
5. [ ] Test with one slide type first

---

*Research compiled for Pixel agent development*