Figbridge

Return history entries captured after the given timestamp (milliseconds since epoch). Each entry includes a 12-char SHA-1 fingerprint of the payload so you can detect real content changes vs re-selections.

Exact structured diff between a rendered design URL and app URL, or captured JSON specs from a native Electron/Playwright state. Provide exactly one URL or spec path per side; mixed URL/spec inputs work. Use anchors when Figma and app layer trees differ: each explicit Figma node id or name pairs with one app data-testid. Missing/ambiguous pairs and explicitly requested fields missing from either spec remain non-PASS and appear in coverage. Reports copy, color, typography, spacing, size and viewport x/y drift. Pass sourceDir to resolve app nodes through data-testid and figbridge.connect.json, i…

Compare an imported Figma frame against the freshly-extracted source URL spec and report per-text-node field-level differences: characters, fontSize, fontFamily, color, plus presence (nodes that exist on one side but not the other). Use after the designer edited a frame to see exactly what diverged from source — the input to generate_patch. Pure deterministic measurement, no LLM.

Export every page's top-level frames in one call. Returns { pageCount, pages: [{ pageId, pageName, frameCount, html, css, tailwindHtml, tokens, cssVars }] }. Use for whole-file handoff; prefer get_agent_bundle for agent-ready output.

Return a complete JSON catalog of the currently open Figma file: every screen, every component (with variants), design tokens, CSS variables, Tailwind config, screens grouped by category, and a per-page flow ordering. Drop this into an agent's context as the authoritative spec for the app.

Read an entire Figma frame into a structured FigBridge spec with node IDs, viewport bounds, paint, typography, layout, and text. Hidden subtrees are omitted; unsupported or mixed authored values are listed in _capture.warnings. Save the returned JSON as mockupSpecPath for diff_specs against a matched app DOM capture. Requires the Figbridge plugin with Live bridge on.

Export a Figma frame as PNG. With `outPath`: writes to disk, returns path. Without: returns base64. Use to pull a rendered version of an imported frame back out for visual diff.

Trigger the plugin to export a specific node (by id) without requiring the user to click. Returns the same payload shape as get_current_selection.

Audit a URL's CSS-feature usage in one call — returns counts of flexbox/grid/gradients/shadows/filters/blends/transforms/pseudo-elements/iframes/etc, plus tag mix and color/font palette. Run BEFORE bigger fidelity pushes to know where the actual coverage gaps are. Returns { totalElements, topTags, displays, positions, features, colors[], fonts[] }.

Turn a diff_to_source result into a minimal patch plan against a local source directory. For text-content changes, finds the exact old string in HTML/JSX/TSX/etc and emits a before/after edit. For color / fontSize / fontFamily changes, surfaces a structured note pointing at candidate CSS files (style swaps usually want a token edit, not a literal replacement). No files are written — the caller decides whether to apply. Returns { edits[], notes[], unifiedDiff }.

Build an LLM-ready handoff bundle from the currently selected frames (or current page if nothing selected). Returns a list of files: hierarchy.md, components.json, tokens.json, tokens.css, DESIGN.md, AGENTS.md, ISSUES.md, issues.json, snapshot.json, manifest.json, optional CHANGES.md (if prior snapshot exists), optional responsive.md/json, optional flow.mmd, per-variant .tsx + .stories.tsx, optional screenshots (base64 PNG), and tailwind.config.js. Text files are returned verbatim; binary files (screenshots) are base64. Requires the Figbridge plugin open with Live bridge on.

Code Connect for a Figma node, like Dev Mode's Code Connect panel: resolves an instance to its main component and component set, finds the entry in figbridge.connect.json, maps the instance's current variant / boolean / text / instance-swap values to props, and returns a ready-to-paste JSX snippet with its import. Target: `nodeId`, or the current selection (from the last plugin push, else asked live). Offline: pass `node` as JSON { nodeId, name, componentSet: { id, name }, mainComponent: { id, name }, properties: { 'Style': { type: 'VARIANT', value: 'Primary' }, 'Label#59:128': { type: 'TEXT',…

Get the most recent Figma selection pushed from the Figbridge plugin, in the requested format.

Alias for get_current_selection. Returns the last pushed Figbridge payload.

Get only the design-token payload (color + number variables, plus CSS variable file and Tailwind config).

Create a real Figma frame (auto-layout, text, fills, radii — editable layers, not a flattened image) directly from code. Provide ONE of: `spec` (deterministic JSON tree — preferred), `html` (raw HTML string — best-effort element→frame mapping), or `htmlPath` (read file from disk, then parse as html). Top-level spec shape: { name, width?, height?, fill?, layout: 'VERTICAL'|'HORIZONTAL'|'NONE', padding?, spacing?, children: Node[] } where Node = { type: 'frame'|'text'|'rect', ...style }. The new frame is placed to the right of any existing top-level frame on the current page and selected. Return…

Import a URL at multiple viewport widths and optional light/dark color schemes in one call. Creates one Figma frame per width/theme combination, or returns telemetry only with dryRun. This is the multi-viewport capture path for desktop/tablet/mobile and theme sets. Default widths: 1280, 768, 375. Returns { frames: [{ width, colorScheme, nodeId, name, createdCount, telemetry }] }.

Render a URL in headless Chrome (figbridge-managed), walk the DOM with computed styles, and create the resulting frame tree in Figma. The single highest-fidelity path from web → Figma. Returns { nodeId, name, createdCount, warnings }.

Bulk-import multiple URLs using the same website-to-Figma pipeline as import_url/import_responsive_set. Each URL can be imported at one or more widths and optional light/dark themes. Use dryRun first for large batches. Returns { results: [{ url, frames: [...] }] }.

Verify figbridge.connect.json cannot rot: every entry's source file and export exist, every mapped prop exists on the component (TS/TSX props are read, including interfaces, extends, Omit, forwardRef and imported literal unions), every mapped enum value is still in the prop's string-literal union, and every mapped Figma property / variant value is still in the entry's Figma snapshot. Returns { ok, checked, errors, warnings }. `figbridge-mcp call lint_connect` exits non-zero when ok is false, so it can gate CI.

Lint the file for design-system violations: unbound colors (SOLID fills not using a variable), non-grid spacing (padding/gap not divisible by 4), orphan components (defined but never instanced), and duplicate names. Returns findings grouped by rule.

Export bulk assets from the file as base64. kind='icon' scans small vector frames + names like ic-* and exports SVG. kind='image' finds IMAGE-fill nodes and exports PNG@2x. kind='illustration' finds large vectors on 'Illustrations' pages and exports SVG. limit caps the number of assets returned (default 40).

List local components and component sets (with variants) in the currently open Figma file. Returns [{ nodeId, name, kind: 'COMPONENT' | 'COMPONENT_SET', variantCount?, variants? }].

List the top-level layers on a specific page (or the current page). Returns [{ id, name, type, width, height, hasChildren }]. Use this to walk the file without exporting.

List recent Figma selections that have been pushed (metadata only, newest first).

List every page in the currently open Figma file: { id, name, frameCount, isCurrent }. Cheap — use this before list_screens / list_frames to orient.

List every top-level frame (screen) across pages in the currently open Figma file. Each result has { nodeId, name, pageName, width, height, category, orderHint }. Category is inferred from name: splash | onboarding | auth | home | detail | settings | overlay | editor | search | state | commerce | error | other. Requires the Figbridge plugin to be open with Live bridge on.

Index app source to resolve data-testid and figbridge.connect.json component names to files, plus CSS and checked-in generated design tokens. Reports dimension-token drift when Figma-exported tokens.json disagrees with generated v2Tokens.json. Pass sourceDir to match_mockup or diff_specs to use these maps automatically.

Compare a rendered design HTML reference with the live app at matched viewport widths. Returns pixel/SSIM evidence plus copy, style, size and viewport x/y deltas. With sourceDir, uses data-testid and figbridge.connect.json to locate app code, quotes the nearby authored JSX class, suggests a codeChange only when one literal matches the computed dimension, and reports checked-in Figma vs generated dimension-token drift. Dynamic flex/calc dimensions remain unresolved instead of receiving guessed edits. Requires matching content and UI state for a whole-screen verdict; screenshot-only references u…

Phase 6 — compute pixel-similarity score between the live URL and a Figma frame export. Returns { score (0-100), diffPercent, regions[] }. The diff regions are the top spots where the import diverges from the live page — feed these back into the extractor for targeted fixes.

Mathematical layout metrics for a URL — numbers an agent can reason over directly (more actionable than a screenshot). Returns the inferred GRID (column/row count, column pitch, gutter, cell size, size-regularity) from the dominant repeated component; ALIGNMENT (count of shared vertical/horizontal edge lines + a snap score); SPACING (detected base unit e.g. 8px, the spacing scale, % off-grid); the repeated-COMPONENT groups with instance counts; and an XY-CUT block segmentation (depth, leaf count, and the largest whitespace seams = the structural splits like sidebar|content|inspector). Determin…

Check a URL for common website-to-Figma import risks before spending time on a full import: bot-protection/captcha pages, HTTP errors, missing-font risk, low-resolution images, SVG-heavy pages, deep wrapper nesting/auto-layout noise, horizontal scroll, and very tall pages. Run this before import_url/import_responsive_set/import_url_batch.

Render a URL in headless Chrome and run an arbitrary JS snippet inside the page. Use to inspect the live DOM / computed styles when planning an extraction. Replaces external chrome-devtools-mcp.evaluate_script. Snippet is the async-function body; use `return` for the result. Returns { ok, result }.

Swap SOLID fill/stroke colors across a scope. Scope is 'selection' (default), 'page', 'file', or a specific nodeId. Mapping maps old hex → new hex (case-insensitive, 3- or 6-digit hex, with or without #). Returns { changes, nodesVisited }.

Escape hatch: evaluate an arbitrary JavaScript async-body inside the Figma plugin sandbox. The `figma` plugin API is in scope. Use this when no purpose-built tool exists for what you want — e.g. one-off queries, exotic node manipulations, prototyping a future tool. Body must return a JSON-serializable value (or undefined). Returns { ok, result, error? }. Trust model: bridge binds 127.0.0.1 only, same as recolor/clone_screen. Example script: `const sel = figma.currentPage.selection[0]; return { id: sel?.id, type: sel?.type, name: sel?.name };`

Render a URL in headless Chrome and capture a PNG. If `outPath` is given, writes the PNG to disk and returns the path (cheap on agent context). Otherwise returns the base64 bytes. Use for visual diffs against Figma exports.

Select a node in Figma and scroll the viewport to it. Provide either a nodeId (e.g. '1:2') or a name substring. Requires the Figbridge plugin to be open with Live bridge enabled.

Update an existing Figma frame in place from a new spec or HTML — finds the frame by `nodeId` or by exact `name`, removes its children, and rebuilds them from `spec` / `html`. The root frame id stays stable so anything that references it survives the update. If no match found, falls back to creating a fresh frame. Returns { nodeId, name, replacedCount, warnings[] }. Use this for iterative re-imports instead of `import_from_code` to avoid duplicate frames.

After importing a URL, verify that every visible text string from the live page also exists in the Figma frame. Returns { liveCount, specCount, missing[], matchedPct }. Use as a fast sanity check that the extractor didn't drop content.

One-call visual reference: take a live Chrome screenshot of `url` AND export the Figma frame at `nodeId`, write both PNGs to `outDir` (default: OS temp dir), and return their paths. Hand the paths to the Read tool to view side-by-side. Replaces the chrome-devtools-mcp + python-decode + manual-write dance.