Playwright Figma Compare

Takes a Figma design URL and a live site, walks both, and reports where the implementation matches the design and where it deviates — with severity, evidence screenshots, and a clear separation between "defect," "implementation is right and the mock is stale," and "can't be verified from a mock."

Relationship to the other skills

• visual-regression pixel-diffs two runs of the same site. This skill never pixel-diffs against Figma exports — a mock and a DOM render will never match at the pixel level, and pretending they should produces noise. The comparison here is structural and semantic, checked by eye and by accessibility snapshot.
• Confirmed functional defects found along the way (not just design deviations) deserve their own writeup — hand them to bug-triage for reproduction rigor or draft a ticket directly (severity, steps, expected/actual, evidence), optionally filing via jira-connector.
• The final report can feed report-generator alongside other testing artifacts.

Prerequisites

• Figma MCP server (get_screenshot, get_metadata, use_figma) — the remote server (browser OAuth sign-in to your Figma account; no desktop app needed) or the local server inside the Figma desktop app with the file open. Load the figma-use skill before any use_figma call.
• Browser automation — Playwright MCP server or @playwright/cli.
• Site access — if the project has a target config (e.g. targets/*.yaml with login steps, credentials source, safe-to-mutate tenants, known noise), read it first and follow it. If none exists and the site needs login, ask the user for the path to credentials rather than guessing.

Core principles (and why)

The linked node is often not the screen. Figma "copy link" URLs frequently point at whatever leaf node the designer had selected — a dropdown item, a single input — not the screen or section under discussion. Resolve the real scope before capturing anything: walk up the parent chain to the enclosing frame/section, then enumerate its children. Sections typically hold several screen frames (state variants: different country, toggle on/off, error state) plus small detail frames that spec dropdown contents. Compare against all of them, not just the first screen you find.