figma-rust-mcp 2.8.5 → 2.9.6

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 (6) hide show
  1. package/README.md +101 -52
  2. package/bin/figma-mcp.js +1 -1
  3. package/package.json +1 -1
  4. package/plugin/code.js +481 -103
  5. package/plugin/ui.html +1116 -378
  6. package/scripts/test-rust-mcp.sh +4 -6
package/README.md CHANGED
@@ -1,40 +1,48 @@
1
- # figma-mcp
1
+ # figma-mcp (figma-rust-mcp)
2
2
 
3
3
  High-performance, bidirectional Model Context Protocol (MCP) server written in **Rust** connecting AI coding assistants directly to **Figma Desktop**.
4
4
 
5
- Enables AI agents (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) to **draw UI directly on the Figma canvas** and **read existing designs back** as structured JSON trees, design tokens, CSS, and screenshots — with zero external API keys needed.
5
+ Enables AI agents (Google Antigravity, Claude Code, Cursor, Windsurf, VS Code, Zed) to **compile Figma designs into production code**, **extract design tokens**, **draw UI directly on canvas**, and **inspect hierarchy, styles, and assets** — with zero external API keys needed.
6
6
 
7
7
  ---
8
8
 
9
9
  ## ⚡ Highlights
10
10
 
11
11
  - **Pure Rust Native Performance**: Starts in `< 1ms`, uses `~3MB RAM`, zero GC pauses.
12
- - **Bidirectional Bridge**: AI can both write UI (draw vectors, components, frames, autolayout) and read designs (extract hierarchy, compute styles, capture canvas).
13
- - **Sandboxed JS Runtime**: Powered by **Boa** (pure Rust ECMAScript engine) for safe execution of design scripts.
14
- - **Built-in Asset CDN**: Auto-fetches and normalizes SVG icons from 7 icon libraries (Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor).
12
+ - **In-Memory Deep Indexing (`figma_index`)**: Queries layers, components, styles, and tokens in `< 1ms` without slow canvas roundtrips.
13
+ - **Binary IPC & Chunk Streaming**: Powered by **MessagePack** (`rmp-serde`) and progressive subtree chunking for instant transfers of massive design files.
14
+ - **Incremental Diff Updates**: Sub-millisecond live document sync (`upsert_node`) keeps the server index fresh as you edit in Figma.
15
+ - **Instant Design-to-Code (`figma_to_code`)**: Compiles Figma frames into clean, semantic components (**React + Tailwind**, **React Native**, **Vue 3 + Tailwind**, **HTML**, **SwiftUI**).
16
+ - **Design Token Exporter (`figma_get_tokens`)**: Exports variables and styles to **Tailwind config**, **CSS custom properties** (`:root` & dark mode), **TypeScript consts**, or **W3C DTCG Token Studio JSON**.
17
+ - **Batch Asset Extractor (`figma_export_assets` / `figma_export_asset`)**: Extracts SVG icons and raster images directly to project folders (`outputPath`) with auto-generated TypeScript barrel exports (`index.ts`) — zero chat token bloating.
18
+ - **Sandboxed JS Drawing Engine (`figma_write`)**: Powered by **Boa** (pure Rust ECMAScript engine) with built-in asset resolvers and 7 icon packs (*Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor*).
15
19
  - **Multi-Tab / Multi-Session Support**: Seamlessly connects to multiple open Figma files simultaneously.
16
- - **100% Localhost Privacy**: All communication stays strictly on `127.0.0.1:38451` via HTTP long-polling.
20
+ - **100% Localhost Privacy**: All communication stays strictly on `127.0.0.1:38451`.
17
21
 
18
22
  ---
19
23
 
20
24
  ## 🏛️ Architecture
21
25
 
22
26
  ```text
23
- ┌─────────────────────────────────────────────────────────┐
24
- │ Terminal (Standalone Server) │
25
- │ figma-mcp │
26
- │ • MCP SSE Transport (/sse, /message) │
27
- │ • Sandboxed JS Runtime (Boa) │
28
- │ • Built-in Asset & Icon Resolver │
29
- │ • Async WebSocket & HTTP Long-Polling Bridge (Axum) │
30
- └───────────────▲─────────────────────────▲───────────────┘
31
- │ (ws://127.0.0.1:38451) │ (http://127.0.0.1:38451/sse)
32
- │ │
33
- ┌─────────┴─────────┐ ┌─────────┴─────────┐
34
- │ Figma Desktop │ │ AI Assistant(s) │
35
- │ (Plugin Bridge) │ │ Antigravity/Cursor│
36
- └───────────────────┘ │ Claude Code / Zed │
37
- └───────────────────┘
27
+ ┌────────────────────────────────────────────────────────────────────────┐
28
+ │ Terminal / Standalone Service │
29
+ │ figma-mcp (Pure Rust Engine) │
30
+ │ • MCP SSE Transport (/sse, /message) & Direct HTTP (/mcp) │
31
+ │ • In-Memory Fast Index (<1ms Lookups & Incremental Diffs) │
32
+ │ • Design-to-Code Compiler (React/Tailwind, Vue, RN, SwiftUI) │
33
+ │ • Design Token Transformer (CSS, Tailwind, TypeScript, W3C DTCG) │
34
+ │ • Sandboxed JS Runtime (Boa ECMAScript Engine) │
35
+ │ • Binary MessagePack & Progressive Subtree Chunk Receiver │
36
+ └───────────────▲────────────────────────────────────────▲───────────────┘
37
+ │ (ws://127.0.0.1:38451) │ (http://127.0.0.1:38451/sse)
38
+ │ (MessagePack / JSON IPC) │
39
+ ┌─────────┴─────────┐ ┌─────────┴─────────┐
40
+ │ Figma Desktop │ │ AI Assistant(s) │
41
+ │ (Plugin Bridge) │ │ Google Antigravity│
42
+ │ │ │ Cursor / Windsurf │
43
+ │ • Canvas Tracker │ │ Claude Code / Zed │
44
+ │ • SVG/PNG Render │ └───────────────────┘
45
+ └───────────────────┘
38
46
  ```
39
47
 
40
48
  ---
@@ -43,34 +51,37 @@ Enables AI agents (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) to
43
51
 
44
52
  ### 1. One-Line Launch with NPX (No Rust toolchain needed)
45
53
 
46
- You can launch `figma-rust-mcp` on any Mac, Linux, or Windows machine with zero setup:
54
+ Launch `figma-rust-mcp` on macOS, Linux, or Windows with zero manual setup:
47
55
 
48
56
  ```bash
49
57
  npx figma-rust-mcp
50
58
  ```
51
59
 
52
- This automatically downloads the prebuilt native binary for your architecture and starts the server.
60
+ This automatically downloads the prebuilt native binary for your OS and architecture and starts the server.
53
61
 
54
62
  ---
55
63
 
56
64
  ### 2. Auto-Start as Background Service (Recommended for SSE)
57
65
 
58
- If you use SSE transport across multiple AI IDEs (Antigravity, Claude, Cursor, Windsurf) and want `figma-rust-mcp` to **automatically start on OS login and keep running in the background**:
66
+ To make `figma-rust-mcp` start automatically upon OS login and run in the background across all your AI IDEs:
59
67
 
60
68
  ```bash
61
69
  # Install and start auto-start background service (macOS LaunchAgent, Linux systemd, Windows Task Scheduler)
62
70
  npx figma-rust-mcp --install-service
63
71
 
64
- # Check background service status
72
+ # Update/Upgrade to the latest version and hot-reload background service
73
+ npx -y figma-rust-mcp@latest --install-service
74
+
75
+ # Check service status
65
76
  npx figma-rust-mcp --service-status
66
77
 
67
- # Uninstall service
78
+ # Uninstall background service
68
79
  npx figma-rust-mcp --uninstall-service
69
80
  ```
70
81
 
71
82
  ---
72
83
 
73
- ### 3. Or Build from Source (Rust)
84
+ ### 3. Build from Source (Rust)
74
85
 
75
86
  Prerequisites: [Rust toolchain](https://rustup.rs/) (`cargo >= 1.80`).
76
87
 
@@ -87,9 +98,9 @@ cargo build --release
87
98
 
88
99
  1. Open **Figma Desktop**.
89
100
  2. Go to **Plugins** → **Development** → **Import plugin from manifest...**
90
- 3. Select the file: `plugin/manifest.json` from this repository.
101
+ 3. Select `plugin/manifest.json` from this repository.
91
102
  4. Run the plugin (**Plugins** → **Development** → **Figma MCP Bridge**).
92
- 5. The plugin UI will show a green dot (**Connected**).
103
+ 5. The plugin UI will display a green dot (**Connected**).
93
104
 
94
105
  ---
95
106
 
@@ -107,10 +118,9 @@ Add to your `~/.gemini/config/mcp_config.json` or project `.agents/mcp_config.js
107
118
  }
108
119
  ```
109
120
 
110
- #### Claude Code / Cursor / Windsurf / VS Code
111
- You can connect via SSE or stdio:
121
+ #### Claude Code / Cursor / Windsurf / VS Code / Zed
112
122
 
113
- **Option A: SSE Transport (Recommended)**
123
+ **Option A: SSE Transport (Recommended for background service)**
114
124
  ```json
115
125
  {
116
126
  "mcpServers": {
@@ -137,46 +147,85 @@ You can connect via SSE or stdio:
137
147
 
138
148
  ## 🛠️ MCP Tools Reference
139
149
 
140
- `figma-mcp` exposes 7 first-class MCP tools:
150
+ `figma-mcp` provides **12 first-class MCP tools**:
141
151
 
142
- ### `figma_get_selection`
143
- Ultra-fast, token-compressed inspection of currently selected layers/frames on the Figma canvas. Returns compacted layout and typography hierarchy with 60-80% fewer tokens.
152
+ ### 1. `figma_status`
153
+ Checks live bridge connection status, connected Figma tabs/files, in-memory index health, queue length, and latency statistics.
144
154
 
145
- ### `figma_inspect_node`
146
- Inspects a specific node by ID or name, returning complete design context, CSS, auto-layout rules, and typography.
155
+ ### 2. `figma_inspect_node`
156
+ Inspects a specific node by ID or name, returning CSS styles, flex layout rules, tokens, typography, and fills in a clean format (served in `< 1ms` via in-memory index or direct bridge).
147
157
 
148
- ### `figma_export_asset`
149
- Exports any Figma node/layer directly into PNG, JPG, or SVG.
150
- - `outputPath`: When specified (e.g. `src/assets/logo.png`), saves directly to disk and returns minimal JSON metadata instead of filling context window with large base64 strings!
158
+ ### 3. `figma_to_code`
159
+ Compiles any Figma node (Frame, Component, Section, or selection) directly into clean, production-ready component code.
160
+ - **`framework`**: `"react-tailwind"` (default), `"react-native"`, `"vue-tailwind"`, `"html"`, `"swiftui"`.
161
+ - **`outputPath`**: Directly saves the generated component to your codebase (e.g. `src/components/UserProfileCard.tsx`).
162
+ - **`componentName`**: Custom component name override.
163
+
164
+ ### 4. `figma_get_tokens`
165
+ Exports Figma Variables (Design Tokens), Color Styles, Typography Styles, and Elevation/Shadow Styles directly into frontend code.
166
+ - **`format`**: `"tailwind"` (`tailwind.config.js` theme.extend), `"css"` (`:root` CSS custom properties with light/dark theme modes), `"typescript"` (`tokens.ts`), `"w3c"` (W3C DTCG Token Studio JSON), or `"json"`.
167
+ - **`outputPath`**: Writes directly to disk (e.g. `src/styles/tokens.css` or `tailwind.config.js`).
168
+ - **`collection`** / **`mode`** / **`prefix`**: Optional filters and naming prefixes.
151
169
 
152
- ### `figma_status`
153
- Checks live bridge connection status, connected Figma tabs, active file name, and latency statistics.
170
+ ### 5. `figma_get_selection`
171
+ Token-compressed inspection of currently selected layers/frames on the Figma canvas. Returns compacted layout and typography hierarchy with **60–80% fewer tokens**.
172
+ - **`detail`**: `"compact"` (recommended), `"minimal"`, `"full"`.
173
+ - **`depth`**: Tree depth limit or `"full"`.
154
174
 
155
- ### `figma_write`
175
+ ### 6. `figma_export_asset`
176
+ Exports any Figma node/layer directly into PNG, JPG, or SVG.
177
+ - **`outputPath`**: When specified (e.g. `src/assets/logo.png`), saves directly to disk and returns minimal JSON metadata instead of bloating context with large base64 strings.
178
+ - **`format`**: `"png"` (default), `"jpg"`, `"svg"`.
179
+ - **`scale`**: Scaling factor (default `2` for high-res).
180
+
181
+ ### 7. `figma_export_assets`
182
+ Batch extracts all SVG icons and PNG images from a Figma frame/page directly into project directories.
183
+ - **`iconDir`**: Directory path for SVG icons (e.g. `src/assets/icons`).
184
+ - **`imageDir`**: Directory path for raster images (e.g. `public/images`).
185
+ - **`createBarrel`**: Automatically creates an `index.ts` barrel export file in `iconDir`.
186
+
187
+ ### 8. `figma_index`
188
+ Instant `< 1ms` in-memory queries against pre-indexed Figma file structures.
189
+ - **`operation`**:
190
+ - `"status"`: View index health and node counts.
191
+ - `"search_nodes"`: Search nodes by text name, query, and type (`FRAME`, `TEXT`, `COMPONENT`, `INSTANCE`).
192
+ - `"get_node"`: Instant node lookup by ID.
193
+ - `"search_components"`: Find component sets and variants.
194
+ - `"search_styles"`: Find paint, text, and effect styles.
195
+ - `"search_variables"`: Find design token variables by name or collection.
196
+ - `"refresh"`: Trigger full background re-indexing of the canvas.
197
+
198
+ ### 9. `figma_read`
199
+ Universal reader for advanced queries:
200
+ - **Design-to-code**: `get_design_context`, `get_css`, `get_component_map`, `get_unmapped_components`.
201
+ - **Inspection & Hierarchy**: `get_selection`, `get_design`, `get_page_nodes`, `get_node_detail`, `scan_design`, `search_nodes`.
202
+ - **Design Systems**: `get_styles`, `get_variables`, `get_local_components`, `get_tokens`.
203
+ - **Visuals & Canvas**: `screenshot`, `export_svg`, `export_image`, `get_viewport`.
204
+
205
+ ### 10. `figma_write`
156
206
  Executes JavaScript draw commands inside the sandboxed VM to build or modify designs on the Figma canvas.
157
207
  - Supports Auto-layout (`layoutMode`, `itemSpacing`, `padding`), typography, fills, strokes, corner radius, drop shadows, and component creation.
158
208
  - Supports icon loading: `figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" })`.
159
209
  - Supports image insertion: `figma.loadImage(url, { width: 300, height: 200 })`.
210
+ - Supports Design Tokens: `createVariableCollection`, `createVariable`, `addVariableMode`, `applyVariable`.
211
+ - Supports Prototyping & Reactions: `setReactions`, `getReactions`, `setScrollBehavior`.
160
212
 
161
- ### `figma_read`
162
- Universal reader for advanced queries: `get_design`, `scan_design`, `screenshot`, `export_svg`, `get_variables`, `get_styles`, `search_nodes`. Supports `outputPath` for file exports.
213
+ ### 11. `figma_rules`
214
+ Audits the current Figma document and generates a complete design system rule sheet (color tokens, typography styles, variables, component catalog) in `< 1ms` from cache.
163
215
 
164
- ### `figma_docs`
216
+ ### 12. `figma_docs`
165
217
  Fetches built-in documentation, design rules, layout guidelines, and code examples for `figma_write`.
166
- - `section`: `"all"` | `"rules"` | `"layout"` | `"api"` | `"tokens"` | `"icons"`
167
-
168
- ### `figma_rules`
169
- Audits the current Figma document and generates consistency rules and token definitions to guide AI generation.
218
+ - **`section`**: `"rules"` | `"layout"` | `"api"` | `"tokens"` | `"icons"`
170
219
 
171
220
  ---
172
221
 
173
222
  ## 💻 Development & Testing
174
223
 
175
224
  ```bash
176
- # Run server directly in debug mode
225
+ # Run server in debug mode
177
226
  cargo run
178
227
 
179
- # Build release binary
228
+ # Build optimized release binary
180
229
  cargo build --release
181
230
 
182
231
  # Run automated MCP test suite
package/bin/figma-mcp.js CHANGED
@@ -19,7 +19,7 @@ const __dirname = path.dirname(__filename);
19
19
 
20
20
  // Read package.json version
21
21
  const pkgPath = path.resolve(__dirname, '../package.json');
22
- let pkgVersion = '2.8.4';
22
+ let pkgVersion = '2.9.5';
23
23
  let repoOwner = 'BuiHung1612';
24
24
  let repoName = 'figma-mcp';
25
25
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "figma-rust-mcp",
3
- "version": "2.8.5",
3
+ "version": "2.9.6",
4
4
  "description": "Claude Code to Figma — Bidirectional MCP bridge. AI draws UI on Figma canvas, reads designs back. Works with Claude, Cursor, VS Code, Windsurf, Antigravity. No API key needed.",
5
5
  "mcpName": "io.github.BuiHung1612/figma-mcp",
6
6
  "type": "module",