# Pixel — Figma Integration Workflow

## The Vision

**Assaf's ideal workflow:**
1. Wake up
2. Get briefed on project + strategy + key insights
3. Receive deck that's 80% complete
4. Review, refine, deliver

---

## Two Paths to Get There

### Path A: Google Sheets + Figma Plugin (Ready Now)

**How it works:**
1. Spreadsheet with columns: `frame_name`, `headline`, `body`, `notes`
2. Figma plugin (Google Sheets Sync, Data Lab, or similar) pulls content
3. Template frames have text layers named to match columns
4. Click sync → text populates

**Setup required:**
1. Install Figma plugin: "Google Sheets Sync" or "Datahub"
2. Name text layers in template consistently:
   - `{{headline}}`
   - `{{body}}`
   - `{{notes}}`
3. Connect Google Sheet to plugin
4. Sync content

**Spreadsheet created:** `/projects/phat-foods/figma-content-sheet.csv`

**Pros:**
- Works today
- Easy to update content
- Reusable for all projects

**Cons:**
- Requires consistent layer naming in templates
- One-time template setup needed

---

### Path B: Custom Figma Plugin (Build Once, Use Forever)

**How it works:**
1. Plugin reads structured markdown or JSON
2. Duplicates appropriate template frames
3. Populates text automatically
4. Arranges slides in sequence

**Development required:**
- TypeScript/JavaScript
- Figma Plugin API
- ~2-4 hours to build v1

**Input format (from Echo):**
```json
{
  "slides": [
    {
      "template": "cover",
      "content": {
        "headline": "...",
        "body": "...",
        "client": "PHAT FoodTech"
      }
    }
  ]
}
```

**Pros:**
- Fully automated
- No manual layer matching
- Handles slide creation and ordering

**Cons:**
- Requires development time
- Plugin maintenance

---

## Recommended Approach

**Start with Path A** (spreadsheet + existing plugins)
1. Test the workflow on Phat Foods deck
2. Identify friction points
3. If used frequently, invest in Path B

---

## Immediate Next Steps

1. [ ] Upload CSV to Google Sheets
2. [ ] Install "Google Sheets Sync" plugin in Figma
3. [ ] Update template text layer names to match columns
4. [ ] Test sync on 3-5 slides
5. [ ] Iterate

---

## Daily Workflow (Once Set Up)

**Night before (automated):**
- Sage produces research
- Echo writes copy
- Spreadsheet auto-generated

**Morning (Assaf):**
1. Open Figma
2. Click "Sync from Sheet"
3. Review populated slides
4. Refine design details
5. Export and deliver

---

*Pixel — Ready to execute either path*