Figma MCP PRO

# 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! 🎉**