io.github.rudraptpsingh/figbridge

Bind loose SOLID color fills to matching local color variables (matched by exact hex). Scope is a nodeId or the current selection. Returns { bound, unboundRemaining, availableColorVariables }.

Audit accessibility of an imported Figma frame. Returns WCAG contrast pass/fail counts (AA 4.5 normal / 3.0 large), per-failure list with measured ratio and node text, landmark coverage, and image nodes without descriptive names. Pure deterministic measurement — no LLM.

Discover hover/focus-capable elements on a URL before attempting prototype variant capture. Returns interactive elements plus CSS :hover/:focus selector counts and examples. Use this to decide which components need hover variants.

Render a URL across mobile (375) / tablet (768) / desktop (1280) viewports and report responsive issues: horizontal page scroll, elements overflowing the viewport, touch targets < 44×44 (Fitts), text < 12px (unreadable on phone), and fixed-position traps taller than 50% of viewport. Pure deterministic measurement — no LLM. Run after audit_palette / audit_typography / audit_a11y for the full Pillar 2 review.

Audit color usage in an imported Figma frame. Returns total distinct colors, top-10 by frequency, coverage curve (how many of top-N cover X% of usage), and near-duplicate merge suggestions for consolidation. Pure deterministic measurement — no LLM.

Compare a baseline URL and candidate URL to find frontend/UI regressions. Runs deterministic screenshot pixel diffs across desktop/tablet/mobile, visible-text disappearance checks, responsive issue deltas, and CSS-feature drift. Use before/after a frontend change, in CI, or before syncing updated UI into Figma.

Audit typography in an imported Figma frame. Returns distinct font sizes / families / styles, the (family, style, size) triplet frequency, and which standard modular scale (1.25 / 1.333 / golden ratio / etc.) the existing sizes best fit. Surfaces a suggested clean scale from the base size.

Audit spacing rhythm of an imported Figma frame. Returns padding / gap distributions, percentage divisible by 4 / 8 (grid conformance), and off-grid stragglers that break the spacing system.

Health check for the Figbridge HTTP bridge and the stored payload. Also reports whether a plugin is currently connected (pluginConnected).

Duplicate a frame (screen) inside Figma, optionally renaming it and applying text replacements to every TEXT child. Places the clone to the right of the source. Returns { nodeId, name, textReplacements }.

Delete a Figma node by id, a list of ids, or by exact name. Returns { deleted, errors }. Use this to clean up junk frames between imports.

Demarcate a page's components — numerically AND visually. Returns the same mathematical layout metrics as measure_layout, plus writes a PNG with every repeated-component group boxed in its own colour (so the component boundaries and the grid are unmistakable). Use to SEE and MEASURE the structure of a mockup or a rendered app in one call.

Return a semantic description of a single screen: size, background color, all text content, components used, inferred category, and a one-paragraph natural-language summary. Useful for agents that want to reason about a screen without fetching its full HTML.

Compare two image files (any PNGs — Figma exports, mockup screenshots, rendered pages). Returns a raw-pixel score (0-100), a perceptual SSIM score (0-1, tolerant of anti-aliasing / sub-pixel shifts), hotspot diff regions, and writes three legible artifacts to disk that you Read() to SEE the difference: `overlay` (onion-skin — image B with image A at 50% on top), `montage` (A | B | overlay side-by-side, colour-coded), `boxed` (B with red boxes on the diff regions). The general-purpose visual comparator — use when you have two images and no DOM.

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.

Fast structured-only diff between two rendered URLs (no screenshots). Extracts a computed-style spec from each and reports a categorized, severity-sorted punch-list of exact field-level differences: copy (text), color (fill/text/stroke), typography (font family/size/weight/…), spacing (layout/gap/padding/align/radius/size), and structure (nodes present on one side only). Use for tight refine loops where you only need the 'what differs' list and not pixels — match_mockup wraps this plus a pixel diff. Returns { ok, summary, deltas }.

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.

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.

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. Returns { nodeId, name, createdCount, warnings[] }.

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: [...] }] }.

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 an app's source tree so figbridge understands the codebase it's generating against. Returns the maps that let a mockup-vs-app diff name the file to edit: data-testid / data-component → { file, line }, component-name → file, and :root design tokens (value ↔ var name). Run once to inspect the mapping, or just pass `sourceDir` to match_mockup which builds it internally. Returns { ok, fileCount, byTestid, byComponent, tokens }.

Closed visual-diff loop — the grounded feedback signal for making a running app match an HTML mockup. Renders BOTH the mockup and the app, returns (a) per-viewport pixel similarity + hotspot regions and (b) a prioritized, categorized punch-list of exact field-level differences (copy/color/typography/spacing/elevation/icon/structure) with the node path for each. Pass `sourceDir` to make it codebase-aware: each punch-list item then carries the `sourceFile` to edit (resolved via the app's data-testid → source) and a `tokenHint` when a literal value should become a design token. Also returns a perceptual SSIM score per viewport (tolerant of anti-aliasing) and writes three legible diff artifacts per viewport you Read() to SEE the drift: `overlayPng` (onion-skin), `montagePng` (mockup | app | overlay), `boxedPng` (app with red diff boxes). Color deltas are gated on perceptual ΔE so imperceptible shifts don't show as noise. The mockup is the ground truth — no Figma round-trip. WORKFLOW: implement → match_mockup → fix the highest-severity punchList items in their named sourceFile → rebuild → match_mockup again. Repeat until `pass` is true (worst visual score ≥ minScore AND punchList empty). Serve the mockup over file:// or a local static server; point appUrl at the dev build.

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). Deterministic, no model.

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.