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.
- package/README.md +22 -18
- package/dist/apps/design-system-dashboard/mcp-app.html +521 -0
- package/dist/apps/design-system-dashboard/scoring/fix-generator.d.ts +15 -0
- package/dist/apps/design-system-dashboard/scoring/fix-generator.d.ts.map +1 -0
- package/dist/apps/design-system-dashboard/scoring/fix-generator.js +270 -0
- package/dist/apps/design-system-dashboard/scoring/fix-generator.js.map +1 -0
- package/dist/apps/design-system-dashboard/scoring/fix-types.d.ts +32 -0
- package/dist/apps/design-system-dashboard/scoring/fix-types.d.ts.map +1 -0
- package/dist/apps/design-system-dashboard/scoring/fix-types.js +8 -0
- package/dist/apps/design-system-dashboard/scoring/fix-types.js.map +1 -0
- package/dist/apps/token-browser/mcp-app.html +410 -0
- package/dist/apps/token-browser.d.ts +30 -0
- package/dist/apps/token-browser.d.ts.map +1 -0
- package/dist/apps/token-browser.js +680 -0
- package/dist/apps/token-browser.js.map +1 -0
- package/dist/cloudflare/apps/design-system-dashboard/scoring/fix-generator.js +269 -0
- package/dist/cloudflare/apps/design-system-dashboard/scoring/fix-types.js +7 -0
- package/dist/cloudflare/apps/hello-world/server.js +63 -0
- package/dist/cloudflare/apps/token-browser.js +679 -0
- package/dist/cloudflare/core/code-to-spec.js +1126 -0
- package/dist/cloudflare/core/figma-mcp-client.js +150 -0
- package/dist/cloudflare/core/version-tools.js +3 -40
- package/dist/cloudflare/index.js +3 -3
- package/dist/core/cdp-pipe-manager.d.ts +96 -0
- package/dist/core/cdp-pipe-manager.d.ts.map +1 -0
- package/dist/core/cdp-pipe-manager.js +429 -0
- package/dist/core/cdp-pipe-manager.js.map +1 -0
- package/dist/core/cloud-websocket-connector.d.ts +58 -0
- package/dist/core/cloud-websocket-connector.d.ts.map +1 -0
- package/dist/core/cloud-websocket-connector.js +247 -0
- package/dist/core/cloud-websocket-connector.js.map +1 -0
- package/dist/core/cloud-websocket-relay.d.ts +51 -0
- package/dist/core/cloud-websocket-relay.d.ts.map +1 -0
- package/dist/core/cloud-websocket-relay.js +171 -0
- package/dist/core/cloud-websocket-relay.js.map +1 -0
- package/dist/core/code-to-spec.d.ts +103 -0
- package/dist/core/code-to-spec.d.ts.map +1 -0
- package/dist/core/code-to-spec.js +1127 -0
- package/dist/core/code-to-spec.js.map +1 -0
- package/dist/core/config.d.ts.map +1 -1
- package/dist/core/config.js +0 -8
- package/dist/core/config.js.map +1 -1
- package/dist/core/console-monitor.d.ts +2 -2
- package/dist/core/console-monitor.d.ts.map +1 -1
- package/dist/core/console-monitor.js +3 -3
- package/dist/core/console-monitor.js.map +1 -1
- package/dist/core/diagnose-tool.d.ts +33 -0
- package/dist/core/diagnose-tool.d.ts.map +1 -0
- package/dist/core/diagnose-tool.js +97 -0
- package/dist/core/diagnose-tool.js.map +1 -0
- package/dist/core/diff/diff-engine.d.ts +14 -0
- package/dist/core/diff/diff-engine.d.ts.map +1 -1
- package/dist/core/diff/diff-engine.js.map +1 -1
- package/dist/core/figma-connector.d.ts +1 -1
- package/dist/core/figma-connector.d.ts.map +1 -1
- package/dist/core/figma-mcp-client.d.ts +61 -0
- package/dist/core/figma-mcp-client.d.ts.map +1 -0
- package/dist/core/figma-mcp-client.js +151 -0
- package/dist/core/figma-mcp-client.js.map +1 -0
- package/dist/core/figma-tools.d.ts +1 -2
- package/dist/core/figma-tools.d.ts.map +1 -1
- package/dist/core/figma-tools.js +69 -229
- package/dist/core/figma-tools.js.map +1 -1
- package/dist/core/identity.d.ts +41 -0
- package/dist/core/identity.d.ts.map +1 -0
- package/dist/core/identity.js +97 -0
- package/dist/core/identity.js.map +1 -0
- package/dist/core/types/index.d.ts +0 -8
- package/dist/core/types/index.d.ts.map +1 -1
- package/dist/core/version-tools.d.ts +30 -1
- package/dist/core/version-tools.d.ts.map +1 -1
- package/dist/core/version-tools.js +113 -6
- package/dist/core/version-tools.js.map +1 -1
- package/dist/core/websocket-connector.d.ts +1 -1
- package/dist/core/websocket-connector.d.ts.map +1 -1
- package/dist/core/websocket-server.d.ts +47 -3
- package/dist/core/websocket-server.d.ts.map +1 -1
- package/dist/core/websocket-server.js +77 -55
- package/dist/core/websocket-server.js.map +1 -1
- package/dist/local.d.ts +0 -12
- package/dist/local.d.ts.map +1 -1
- package/dist/local.js +957 -3407
- package/dist/local.js.map +1 -1
- package/figma-desktop-bridge/code.js +59 -63
- package/figma-desktop-bridge/ui.html +85 -11
- package/package.json +10 -9
- 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** | **
|
|
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
|
|
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
|
|
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 —
|
|
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
|
-
>
|
|
132
|
-
|
|
133
|
-
>
|
|
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
|
|
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:**
|
|
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** | **
|
|
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
|
|
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
|
-
###
|
|
374
|
-
- `
|
|
375
|
-
- `
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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).
|