A side-by-side look at the Figma MCP Bridge and UI Design to Code MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Figma MCP Bridge for architecture & design work as a local process; choose UI Design to Code for architecture & design as a local process. You can also run both side by side in one mcpServers block.
figma_execute_code, figma_inspect, figma_read_canvas.get_run_modes, create_design_run, ingest_image_source.Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 56/100 · Good | 52/100 · Good |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | Not declared | Not declared |
| Pricing | Not declared | Not declared |
| Required env vars | None listed | None listed |
| Verified owner | Community listing | Community listing |
| GitHub stars | 2 | 0 |
| Directory activity | 1 views 0 installs 0 upvotes | 0 views 0 installs 0 upvotes |
| Tools | 18 | 14 |
| Full listing | View Figma MCP Bridge | View UI Design to Code |
figma_execute_codeRun JS in the Figma sandbox. Injects `figma`, `ensureFont`, `getFreePosition`, `progress`, `bridge`. Supports `capture`, `capture_node_ids`, `diff`, `max_px`, `max_output_bytes`, `async`, `target`.figma_inspectRead many live nodes in one call: compact outline (or `view: "map"` canvas map), exact `props` (incl. `reactions`, `connector`), name `find` / text `find_text`, `context` (ancestor sections, breakpoints, component variants), `offset` paging, or `check` expectations (mismatches only). Changes nothin…figma_read_canvasToken-optimized read of the **live** document (`jsx` / `tree` / `json`) with `budget_tokens` (default: the server's byte budget).figma_screenshotPNG of specific `node_ids` or the current selection, sized by `max_px`.figma_find_componentsCached, tokenized, fuzzy component search — variants, properties, keys.figma_insert_component_instanceInstantiate a component/variant, apply text overrides, place into AutoLayout.figma_insert_svgInsert raw SVG with proportional scaling, recoloring, optional component wrapping.figma_get_variablesVariable collections, modes, and token values.figma_rollbackUndo a previous write call's checkpoint.figma_get_selectionGeometry, compact hex fills, parent/page, AutoLayout context of the selection.figma_get_canvas_layoutArtboard bounds + a safe `suggestedNextPosition`. `layout:"grid"` shelf-packs.figma_set_variables_modeSwitch theme mode (Dark/Light/Brand) on a frame or page.get_run_modesReturns supported modes, target platforms, trigger examples, and the mode-selection prompt.create_design_runCreates the run directory and `artifact-run-manifest.json`.ingest_image_sourceRegisters a screenshot or image into:ingest_figma_sourceRegisters Figma MCP node JSON, an optional screenshot, or both.slice_image_assetsCrops bitmap/icon assets from a source image using a `layers.manifest.json` with `source_bbox` entries.build_reference_analysisRegisters model-generated Reference Image Analysis before Vision IR. This captures the original pixel size, root frame, semantic top-level groups, text/media/icon/material inventory, bottom navigation, strict extraction settings, high-risk zones, and the audit plan used for later decoding.build_semantic_irRegisters model-generated Platform-neutral Semantic UI IR.build_cross_platform_nodesRegisters Cross-platform Node Data.build_target_irRegisters target-platform layout IR for a selected target.run_codegenRecords implementation output and validation summary without enforcing visual review.run_codegen_with_auto_reviewRecords implementation output plus visual review evidence.validate_pipelineValidates an existing run by checking required artifacts and traceability links between vision, compression, semantic, cross-platform, and target planning artifacts.Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
{
"mcpServers": {
"figma-mcp-bridge": {
"command": "npx",
"args": [
"-y",
"@kolganovr/figma-mcp-bridge"
]
}
}
}
{
"mcpServers": {
"ui-design-to-code": {
"command": "npx",
"args": [
"-y",
"ui-design-to-code-mcp@latest"
]
}
}
}