etanhey/figma-loop

Figma Loop - Iterative Design Verification

Drill on Figma designs until pixel-perfect. Compare screenshots, fix one thing at a time, repeat until 3 consecutive checks pass with no changes needed.

When to Use

• Implementing UI from Figma designs
• Refining existing UI to match Figma
• Verifying a component matches its design spec
• User says "make it match Figma" or "pixel-perfect"

Prerequisites

At least one of these Figma MCP tools must be available:

| Tool | When Available | |------|---------------| | mcp__figma__get_screenshot | Figma desktop app is open | | mcp__figma-remote__get_screenshot | Always (uses API with fileKey) |

Plus browser automation for implementation screenshots:

| Tool | Purpose | |------|---------| | mcp__claude-in-chrome__computer | Screenshot of running app | | mcp__claude-in-chrome__navigate | Navigate to the right page | | mcp__claude-in-chrome__resize_window | Match Figma viewport size |

Or for React Native:

| Tool | Purpose | |------|---------| | Simulator screenshot | xcrun simctl io booted screenshot /tmp/screen.png | | Device build | npx expo run:ios --device |

---

CLI Helper

Track iteration progress with check.sh:

SCRIPT="~/.claude/commands/golem-powers/figma-loop/scripts/check.sh"

$SCRIPT init "WelcomeScreen" "95:72"   # Start session
$SCRIPT pass                            # Record passing check (increments counter)
$SCRIPT fail "spacing off by 8px"       # Record fail (resets counter to 0)
$SCRIPT status                          # Show progress (X/3 passes)

---

Quick Actions

| What you want to do | Workflow | |---------------------|----------| | Full iteration loop (start to finish) | workflows/iterate.md | | Set up tracking file | workflows/setup.md | | Just do a single comparison check | workflows/check.md |

---

The 3-Check Rule

A component is only "done" when 3 consecutive checks pass with zero changes needed.

Check 1: Fix spacing  → FAIL (made change) → counter resets to 0
Check 2: Fix color    → FAIL (made change) → counter resets to 0
Check 3: All good     → PASS → counter = 1
Check 4: All good     → PASS → counter = 2
Check 5: All good     → PASS → counter = 3 → DONE

Why 3? One pass could be lucky. Two could miss something. Three consecutive passes with fresh eyes each time gives confidence.

---

Check Criteria

For each element, verify ALL of these:

| Category | What to Check | |----------|--------------| | Position | Top, left, right, bottom, center alignment | | Size | Width, height, padding, margin | | Colors | Background, text, border, shadow | | Typography | Font size, weight, line height, letter spacing | | Spacing | Gaps between elements, internal padding | | Order | RTL consideration (first in DOM = RIGHT visually) | | Icons | Which icon, size, color, position relative to text | | States | Default, hover, pressed, disabled, focused | | Radius | Border radius on all corners |

---

Common Figma-to-Tailwind Mappings

gap-[16px] → gap-4
p-[8px]    → p-2
p-[12px]   → p-3
p-[16px]   → p-4
p-[24px]   → p-6

rounded-[8px]  → rounded-lg
rounded-[12px] → rounded-xl
rounded-[16px] → rounded-2xl
rounded-[24px] → rounded-3xl

text-[14px] → text-sm
text-[16px] → text-base
text-[18px] → text-lg
text-[20px] → text-xl
text-[24px] → text-2xl
text-[28px] → text-3xl

---

RTL Quick Reference for Figma

| Visual Position (RTL) | DOM Order | Tailwind | |----------------------|-----------|----------| | RIGHT | First | items-start, justify-start | | LEFT | Last | items-end, justify-end |

Button icons in RTL:

// Icon on LEFT visually (after text in RTL)
<Button rightIcon={<Phone />}>Call</Button>

// Icon on RIGHT visually (before text in RTL)
<Button leftIcon={<Phone />}>Call</Button>

---

Anti-Patterns

| Don't | Do Instead | |-------|------------| | Fix 5 things at once | Fix ONE thing, re-screenshot, verify | | Skip checks when "it looks close" | Always do formal screenshot comparison | | Hardcode pixel values | Use Tailwind scale or CSS vars | | Ignore RTL | Verify element order matches RTL expectations | | Guess colors | Use exact hex from Figma design context | | Stop after 1 passing check | Need 3 CONSECUTIVE passes |