# Comment Positioning System
## 🎯 **How Comments Map to Elements**
This guide explains how Figma design comments are precisely mapped to specific UI elements using coordinate-based positioning.
## 🔧 **The Problem (Before Fix)**
**❌ OLD BROKEN BEHAVIOR:**
```json
{
"data": {
"id": "1530:166",
"name": "feature/3",
"children": [
{
"id": "1530:168",
"name": "SysIQ Commerce",
"type": "IMAGE"
}
]
},
"instructions": [
{
"type": "interaction",
"instruction": "Jumping animation on hover.",
"confidence": 1
}
]
}
```
**ISSUES:**
- Instructions dumped at **end of response**
- No connection to **specific element** they belong to
- AI can't tell **which element** needs the hover animation
- Instructions attached to **parent container** instead of specific child
## ✅ **The Solution (After Fix)**
**✅ NEW CORRECT BEHAVIOR:**
```json
{
"data": {
"id": "1530:166",
"name": "feature/3",
"children": [
{
"id": "1530:168",
"name": "SysIQ Commerce",
"type": "IMAGE",
"instructions": [
{
"type": "interaction",
"instruction": "Jumping animation on hover.",
"confidence": 1
}
],
"bounds": {
"x": 50,
"y": 20,
"width": 100,
"height": 50
}
}
]
}
}
```
**BENEFITS:**
- Instructions attached **directly to specific element**
- Clear connection between **comment and element**
- AI knows **exactly which element** needs the hover animation
- Perfect for **component generation**
## 🧠 **How It Works**
### **1. Bottom-Up Processing**
```
Root Container (400x300)
├── Frame (200x150)
│ ├── Button (100x50) ← Comment at (64, 29) belongs HERE
│ └── Text (80x20)
└── Image (120x80)
```
**Process:**
1. **Start with leaf elements** (Button, Text, Image)
2. **Check coordinates** - does (64, 29) fall within Button bounds?
3. **YES** → Attach comment to Button
4. **Mark as used** → Don't attach to parent Frame or Root
### **2. Coordinate Matching**
```typescript
// Comment coordinates: (64, 29)
Button bounds: { x: 50, y: 20, width: 100, height: 50 }
- Contains (64, 29)? YES ✅
- x: 64 >= 50 && 64 <= 150 ✅
- y: 29 >= 20 && 29 <= 70 ✅
Parent Frame bounds: { x: 0, y: 0, width: 200, height: 150 }
- Contains (64, 29)? YES, but Button already claimed it ❌
```
### **3. Most Specific Element Wins**
- **Multiple matches** → Choose **smallest/most specific**
- **Child before parent** → Child elements get priority
- **Direct node ID** → Highest priority if comment has specific node ID
## 📍 **Real Example**
### **Before Fix:**
```json
{
"name": "Login Form",
"children": [
{ "name": "Username Input" },
{ "name": "Password Input" },
{ "name": "Submit Button" }
],
"instructions": [
{ "instruction": "Shake animation on error" }
]
}
```
**❌ Problem:** Which element should shake? Unclear!
### **After Fix:**
```json
{
"name": "Login Form",
"children": [
{ "name": "Username Input" },
{
"name": "Password Input",
"instructions": [
{ "instruction": "Shake animation on error" }
]
},
{ "name": "Submit Button" }
]
}
```
**✅ Solution:** Password Input specifically shakes on error!
## 🎨 **Designer Workflow**
### **1. Add Comment in Figma**
- **Click on specific element** (button, input, image)
- **Add comment:** "Jumping animation on hover"
- **Figma stores coordinates** automatically
### **2. MCP Processing**
- **Extract coordinates** from comment metadata
- **Find most specific element** containing those coordinates
- **Attach instruction** directly to that element
### **3. AI Code Generation**
```typescript
// AI can now generate:
<button
className="sysiq-commerce-btn"
onMouseEnter={() => setIsJumping(true)}
onMouseLeave={() => setIsJumping(false)}
>
SysIQ Commerce
</button>
```
## 🚀 **Benefits for Developers**
✅ **Precise targeting**: Instructions attached to exact elements
✅ **Clear intent**: No guessing which element needs what behavior
✅ **Better code generation**: AI knows exactly what to implement
✅ **Designer-developer communication**: Direct connection between design comments and code
✅ **Component generation**: Perfect for creating React/Vue/Angular components
**The days of instructions getting lost at the end of responses are over! 🎉**
