figma-console-mcp 1.24.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/README.md +22 -18
  2. package/dist/apps/design-system-dashboard/mcp-app.html +521 -0
  3. package/dist/apps/design-system-dashboard/scoring/fix-generator.d.ts +15 -0
  4. package/dist/apps/design-system-dashboard/scoring/fix-generator.d.ts.map +1 -0
  5. package/dist/apps/design-system-dashboard/scoring/fix-generator.js +270 -0
  6. package/dist/apps/design-system-dashboard/scoring/fix-generator.js.map +1 -0
  7. package/dist/apps/design-system-dashboard/scoring/fix-types.d.ts +32 -0
  8. package/dist/apps/design-system-dashboard/scoring/fix-types.d.ts.map +1 -0
  9. package/dist/apps/design-system-dashboard/scoring/fix-types.js +8 -0
  10. package/dist/apps/design-system-dashboard/scoring/fix-types.js.map +1 -0
  11. package/dist/apps/token-browser/mcp-app.html +410 -0
  12. package/dist/apps/token-browser.d.ts +30 -0
  13. package/dist/apps/token-browser.d.ts.map +1 -0
  14. package/dist/apps/token-browser.js +680 -0
  15. package/dist/apps/token-browser.js.map +1 -0
  16. package/dist/cloudflare/apps/design-system-dashboard/scoring/fix-generator.js +269 -0
  17. package/dist/cloudflare/apps/design-system-dashboard/scoring/fix-types.js +7 -0
  18. package/dist/cloudflare/apps/hello-world/server.js +63 -0
  19. package/dist/cloudflare/apps/token-browser.js +679 -0
  20. package/dist/cloudflare/core/code-to-spec.js +1126 -0
  21. package/dist/cloudflare/core/figma-mcp-client.js +150 -0
  22. package/dist/cloudflare/core/version-tools.js +3 -40
  23. package/dist/cloudflare/index.js +3 -3
  24. package/dist/core/cdp-pipe-manager.d.ts +96 -0
  25. package/dist/core/cdp-pipe-manager.d.ts.map +1 -0
  26. package/dist/core/cdp-pipe-manager.js +429 -0
  27. package/dist/core/cdp-pipe-manager.js.map +1 -0
  28. package/dist/core/cloud-websocket-connector.d.ts +58 -0
  29. package/dist/core/cloud-websocket-connector.d.ts.map +1 -0
  30. package/dist/core/cloud-websocket-connector.js +247 -0
  31. package/dist/core/cloud-websocket-connector.js.map +1 -0
  32. package/dist/core/cloud-websocket-relay.d.ts +51 -0
  33. package/dist/core/cloud-websocket-relay.d.ts.map +1 -0
  34. package/dist/core/cloud-websocket-relay.js +171 -0
  35. package/dist/core/cloud-websocket-relay.js.map +1 -0
  36. package/dist/core/code-to-spec.d.ts +103 -0
  37. package/dist/core/code-to-spec.d.ts.map +1 -0
  38. package/dist/core/code-to-spec.js +1127 -0
  39. package/dist/core/code-to-spec.js.map +1 -0
  40. package/dist/core/config.d.ts.map +1 -1
  41. package/dist/core/config.js +0 -8
  42. package/dist/core/config.js.map +1 -1
  43. package/dist/core/console-monitor.d.ts +2 -2
  44. package/dist/core/console-monitor.d.ts.map +1 -1
  45. package/dist/core/console-monitor.js +3 -3
  46. package/dist/core/console-monitor.js.map +1 -1
  47. package/dist/core/diagnose-tool.d.ts +33 -0
  48. package/dist/core/diagnose-tool.d.ts.map +1 -0
  49. package/dist/core/diagnose-tool.js +97 -0
  50. package/dist/core/diagnose-tool.js.map +1 -0
  51. package/dist/core/diff/diff-engine.d.ts +14 -0
  52. package/dist/core/diff/diff-engine.d.ts.map +1 -1
  53. package/dist/core/diff/diff-engine.js.map +1 -1
  54. package/dist/core/figma-connector.d.ts +1 -1
  55. package/dist/core/figma-connector.d.ts.map +1 -1
  56. package/dist/core/figma-mcp-client.d.ts +61 -0
  57. package/dist/core/figma-mcp-client.d.ts.map +1 -0
  58. package/dist/core/figma-mcp-client.js +151 -0
  59. package/dist/core/figma-mcp-client.js.map +1 -0
  60. package/dist/core/figma-tools.d.ts +1 -2
  61. package/dist/core/figma-tools.d.ts.map +1 -1
  62. package/dist/core/figma-tools.js +69 -229
  63. package/dist/core/figma-tools.js.map +1 -1
  64. package/dist/core/identity.d.ts +41 -0
  65. package/dist/core/identity.d.ts.map +1 -0
  66. package/dist/core/identity.js +97 -0
  67. package/dist/core/identity.js.map +1 -0
  68. package/dist/core/types/index.d.ts +0 -8
  69. package/dist/core/types/index.d.ts.map +1 -1
  70. package/dist/core/version-tools.d.ts +30 -1
  71. package/dist/core/version-tools.d.ts.map +1 -1
  72. package/dist/core/version-tools.js +113 -6
  73. package/dist/core/version-tools.js.map +1 -1
  74. package/dist/core/websocket-connector.d.ts +1 -1
  75. package/dist/core/websocket-connector.d.ts.map +1 -1
  76. package/dist/core/websocket-server.d.ts +47 -3
  77. package/dist/core/websocket-server.d.ts.map +1 -1
  78. package/dist/core/websocket-server.js +77 -55
  79. package/dist/core/websocket-server.js.map +1 -1
  80. package/dist/local.d.ts +0 -12
  81. package/dist/local.d.ts.map +1 -1
  82. package/dist/local.js +957 -3407
  83. package/dist/local.js.map +1 -1
  84. package/figma-desktop-bridge/code.js +59 -63
  85. package/figma-desktop-bridge/ui.html +85 -11
  86. package/package.json +10 -9
  87. package/figma-desktop-bridge/ui-full.html +0 -1353
package/README.md CHANGED
@@ -51,9 +51,9 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
51
51
  | Real-time monitoring (console, selection) | ✅ | ❌ | ❌ |
52
52
  | Desktop Bridge plugin | ✅ | ✅ | ❌ |
53
53
  | Requires Node.js | Yes | **No** | No |
54
- | **Total tools available** | **100+** | **83** | **9** |
54
+ | **Total tools available** | **101** | **93** | **9** |
55
55
 
56
- > **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 100+ tools with real-time monitoring.
56
+ > **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 101 tools with real-time monitoring.
57
57
 
58
58
  ---
59
59
 
@@ -61,7 +61,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
61
61
 
62
62
  **Best for:** Designers who want full AI-assisted design capabilities.
63
63
 
64
- **What you get:** All 100+ tools including design creation, variable management, and component instantiation.
64
+ **What you get:** All 101 tools including design creation, variable management, and component instantiation.
65
65
 
66
66
  #### Prerequisites
67
67
 
@@ -126,11 +126,11 @@ If you're not sure where to put the JSON configuration above, here's where each
126
126
  1. Open Figma Desktop normally (no special flags needed) and open a file
127
127
  2. Go to **Plugins → Development → Import plugin from manifest...**
128
128
  3. Select `~/.figma-console-mcp/plugin/manifest.json` (stable path, auto-created by the MCP server)
129
- 4. Run the plugin in your Figma file — the bootloader finds the MCP server and loads the latest UI automatically
129
+ 4. Run the plugin in your Figma file — it scans ports 9223–9232 and connects automatically to your running MCP server
130
130
 
131
- > One-time setup. The plugin uses a bootloader that dynamically loads fresh code from the MCP server — no need to re-import when the server updates.
132
-
133
- > **Upgrading from v1.14 or earlier?** Your existing plugin still works, but to get the bootloader benefits (no more re-importing), do one final re-import from `~/.figma-console-mcp/plugin/manifest.json`. The path is created automatically when the MCP server starts. Run `npx figma-console-mcp@latest --print-path` to see it. After this one-time upgrade, you're done forever.
131
+ > **Heads-up on plugin updates.** Figma caches plugin files (`code.js` and `ui.html`) at the application level. When the MCP server publishes a plugin update typically a `npm update` / new `npx` cache pull — re-import the manifest at `~/.figma-console-mcp/plugin/manifest.json` (Plugins → Manage plugins → re-import) to refresh the cached code. The stable path never changes, so re-importing is a quick one-click step.
132
+ >
133
+ > The MCP server refreshes the files at the stable path on every startup; re-importing in Figma is what makes Figma pick them up.
134
134
 
135
135
  #### Step 4: Restart Your MCP Client
136
136
 
@@ -156,7 +156,7 @@ Create a simple frame with a blue background
156
156
 
157
157
  **Best for:** Developers who want to modify source code or contribute to the project.
158
158
 
159
- **What you get:** Same 100+ tools as NPX, plus full source code access.
159
+ **What you get:** Same 101 tools as NPX, plus full source code access.
160
160
 
161
161
  #### Quick Setup
162
162
 
@@ -245,7 +245,7 @@ Ready for design creation? Follow the [NPX Setup](#-npx-setup-recommended) guide
245
245
 
246
246
  **Best for:** Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no Node.js required.
247
247
 
248
- **What you get:** 83 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
248
+ **What you get:** 93 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
249
249
 
250
250
  #### Prerequisites
251
251
 
@@ -302,7 +302,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
302
302
  | Feature | NPX (Recommended) | Cloud Mode | Local Git | Remote SSE |
303
303
  |---------|-------------------|------------|-----------|------------|
304
304
  | **Setup time** | ~10 minutes | ~5 minutes | ~15 minutes | ~2 minutes |
305
- | **Total tools** | **100+** | **83** | **100+** | **9** (read-only) |
305
+ | **Total tools** | **101** | **93** | **101** | **9** (read-only) |
306
306
  | **Design creation** | ✅ | ✅ | ✅ | ❌ |
307
307
  | **Variable management** | ✅ | ✅ | ✅ | ❌ |
308
308
  | **Component instantiation** | ✅ | ✅ | ✅ | ❌ |
@@ -317,7 +317,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
317
317
  | **Automatic updates** | ✅ (`@latest`) | ✅ | Manual (`git pull`) | ✅ |
318
318
  | **Source code access** | ❌ | ❌ | ✅ | ❌ |
319
319
 
320
- > **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 100+ tools.
320
+ > **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 101 tools.
321
321
 
322
322
  **📖 [Complete Feature Comparison](docs/mode-comparison.md)**
323
323
 
@@ -370,9 +370,11 @@ When you first use design system tools:
370
370
 
371
371
  ## 🛠️ Available Tools
372
372
 
373
- ### Navigation & Status
374
- - `figma_navigate` - Open Figma URLs
375
- - `figma_get_status` - Check connection status
373
+ ### Status & Diagnostics
374
+ - `figma_get_status` - Check WebSocket bridge connection and file context
375
+ - `figma_diagnose` - Designer-readable health check + setup guidance
376
+ - `figma_reconnect` - Force reconnect to the Desktop Bridge plugin
377
+ - `figma_navigate` - Switch the active file target among connected plugins (Local), or navigate the cloud headless browser (Remote/Cloud)
376
378
 
377
379
  ### Console Debugging
378
380
  - `figma_get_console_logs` - Retrieve console logs
@@ -651,7 +653,7 @@ The **Figma Desktop Bridge** plugin is the recommended way to connect Figma to t
651
653
  - The MCP server communicates via **WebSocket** through the Desktop Bridge plugin
652
654
  - The server tries port 9223 first, then automatically falls back through ports 9224–9232 if needed
653
655
  - The plugin scans all ports in the range and connects to every active server it finds
654
- - All 100+ tools work through the WebSocket transport
656
+ - All 101 tools work through the WebSocket transport
655
657
 
656
658
  **Multiple files:** The WebSocket server supports multiple simultaneous plugin connections — one per open Figma file. Each connection is tracked by file key with independent state (selection, document changes, console logs).
657
659
 
@@ -693,9 +695,11 @@ When two processes tried to start the MCP server (e.g., Claude Desktop's Chat ta
693
695
 
694
696
  **Nothing.** Multi-instance support is fully automatic:
695
697
  - Each MCP server claims the next available port in the range
696
- - The bootloader plugin scans all ports and connects to every active server
698
+ - The Desktop Bridge plugin scans all ports and connects to every active server
697
699
  - Orphaned processes from closed tabs are automatically cleaned up on startup
698
- - No re-importing, no manual port management
700
+ - No manual port management — the plugin already scans the whole range
701
+
702
+ (Re-importing the manifest is only required when the plugin code itself changes — e.g. after a package update. Port-range scanning is already in the shipped plugin.)
699
703
 
700
704
  ---
701
705
 
@@ -788,7 +792,7 @@ The architecture supports adding new apps with minimal boilerplate — each app
788
792
 
789
793
  ## 🛤️ Roadmap
790
794
 
791
- **Current Status:** v1.23.0 (Stable) - Production-ready with version history & time-series awareness, FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 100+ tools, Comments API, and MCP Apps
795
+ **Current Status:** v1.23.0 (Stable) - Production-ready with version history & time-series awareness, FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 101 tools, Comments API, and MCP Apps
792
796
 
793
797
  **Recent Releases:**
794
798
  - [x] **v1.17.0** - Figma Slides Support: 15 new tools for managing presentations — slides, transitions, content, reordering, and navigation. Inspired by Toni Haidamous (PR #11).