@atezer/figma-mcp-bridge 1.6.2 → 1.6.4
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/CHANGELOG.md +9 -0
- package/README.md +127 -295
- package/dist/core/plugin-bridge-server.js +1 -1
- package/dist/local-plugin-only.js +1 -1
- package/dist/local.js +1 -1
- package/f-mcp-plugin/README.md +8 -0
- package/f-mcp-plugin/manifest.json +4 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,15 @@ Bu dosya [Keep a Changelog](https://keepachangelog.com/tr/1.1.0/) bicimine uygun
|
|
|
12
12
|
|
|
13
13
|
Bu changelog'a ekleme oncesi surumlerin tam ayrintilari icin `git log` kullanilabilir.
|
|
14
14
|
|
|
15
|
+
## [1.6.3] - 2026-04-03
|
|
16
|
+
|
|
17
|
+
### Dokumantasyon temizligi
|
|
18
|
+
|
|
19
|
+
- **28→21 aktif dokuman:** 10 dosya arsivlendi (OAUTH_SETUP, SELF_HOSTING, DEPLOYMENT_COMPARISON, CLAUDE_DESKTOP_CONFIG, FIGMA_USE, FMCP_AGENT_CANVAS_COMPAT, RECONSTRUCTION_FORMAT, PUBLISH-PLUGIN, DEPENDENCY_LAYERS, RELEASE_NOTES_TEMPLATE + root: SECURITY_FIXES_ANALYSIS, HANDOFF_TEMPLATE)
|
|
20
|
+
- **Kirik link: 0** — tum referanslar guncellendi veya kaldirildi
|
|
21
|
+
- **README sadeleştirildi:** Dokuman tablosu kullanici odakli, gereksiz satirlar kaldirildi
|
|
22
|
+
- **TOOLS.md:** Agent Canvas referanslari v1.6 araclariyla guncellendi
|
|
23
|
+
|
|
15
24
|
## [1.6.2] - 2026-04-02
|
|
16
25
|
|
|
17
26
|
### Dokumantasyon duzeltmeleri
|
package/README.md
CHANGED
|
@@ -4,128 +4,38 @@
|
|
|
4
4
|
|
|
5
5
|
# F-MCP (Figma MCP Bridge)
|
|
6
6
|
|
|
7
|
-
Figma
|
|
7
|
+
Figma'daki tasarımlarınızı AI araçlarına (Claude, Cursor) bağlayan bir köprü. Figma'da bir plugin açarsınız, AI aracınız bu plugin üzerinden tasarımlarınızı okur, değiştirir ve export eder.
|
|
8
8
|
|
|
9
|
-
**
|
|
9
|
+
**Ne işe yarar?** AI'a "Bu dosyadaki Button bileşenini göster", "Yeni bir frame oluştur", "SVG olarak export et" gibi komutlar verirsiniz — AI Figma'daki tasarımınızla doğrudan çalışır.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## Nasıl çalışır?
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
figma-mcp-bridge, Figma'nın **REST API'sini kullanmıyor**. Akış:
|
|
18
|
-
|
|
19
|
-
**Claude (MCP) → figma-mcp-bridge → Plugin → Figma (Desktop veya Tarayıcı)**
|
|
20
|
-
|
|
21
|
-
Sorgular doğrudan Figma içinde çalışan plugin üzerinden gider — hem masaüstü uygulaması hem tarayıcı sürümü (figma.com) desteklenir. Bu sayede:
|
|
22
|
-
|
|
23
|
-
- Figma API token tüketimi **yok** (REST API hiç çağrılmıyor)
|
|
24
|
-
- Rate limit yok
|
|
25
|
-
- Figma tarafında ücretlendirme yok
|
|
26
|
-
- Desktop'ta internet bağlantısı gerekmez; tarayıcı Figma'da yalnızca figma.com erişimi yeterli
|
|
27
|
-
|
|
28
|
-
**Ne tüketiliyor?** Sadece AI tarafı: bu konuşmadaki context token'ları. Her tool call'ın request/response'u context penceresine girer. Büyük dosyalarda çok derin sorgular (örn. `depth: 3`, `verbosity: full`) Claude context'ini hızlı doldurabilir; Figma tarafında ek maliyet oluşmaz.
|
|
29
|
-
|
|
30
|
-
### Zero Trust
|
|
31
|
-
|
|
32
|
-
Veri **yalnızca sizin ortamınızda** kalır. Tasarım içeriği Figma bulutuna MCP üzerinden **gönderilmez**; akış Claude → MCP (yerel) → Plugin (yerel) → Figma (Desktop veya Tarayıcı).
|
|
33
|
-
|
|
34
|
-
REST API çağrısı ve Figma'ya tasarım verisi aktarımı yoktur. Bu sayede kurumsal güvenlik ve gizlilik politikalarına uyum kolaylaşır (Zero Trust: sunucuya güvenme, yerelde doğrula).
|
|
35
|
-
|
|
36
|
-
### Kurumlar için özet
|
|
37
|
-
|
|
38
|
-
- **Debug modu kapalı.** Figma'yı normal açarsınız; ekstra debug portu veya geliştirici ayarı gerekmez.
|
|
39
|
-
- **Kendi plugin story'nizde yayınlama.** Plugin'i Figma Organization (veya Enterprise) altında kendi plugin story'nize yayınladığınızda tüm kullanıcılar **Plugins** menüsünden tek tıkla erişir; "manifest import" zorunluluğu kalkar, merkezi ve erişilebilir bir mimari olur.
|
|
40
|
-
- **KVKK / GDPR uyumu.** Tasarım verisi yalnızca kullanıcının makinesinde (MCP + Plugin + Figma Desktop) kalır; Figma bulutuna veya üçüncü tarafa MCP üzerinden gönderilmez. Veri minimizasyonu ve yerelde işleme, hassas kurumsal ekipler ve denetim gereksinimleri için uygun bir model sunar.
|
|
41
|
-
|
|
42
|
-
## F-MCP yetenekleri
|
|
43
|
-
|
|
44
|
-
**46 araç** (config'te `dist/local-plugin-only.js` kullanıldığında tamamı aktif). Tam liste: [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md). Aşağıda rollerine göre özet.
|
|
45
|
-
|
|
46
|
-
### Ürün yöneticileri (analiz, kabul kriterleri, kurumsal süreçler)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
| Kullanım | Araçlar | Açıklama |
|
|
50
|
-
| --------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
51
|
-
| Tasarım envanteri ve analiz | `figma_get_design_system_summary`, `figma_get_file_data` | Özet, bileşen sayıları, token koleksiyonları; büyük dosyada varsayılan **currentPageOnly** (timeout önlemi) |
|
|
52
|
-
| Kabul kriterleri ve dokümantasyon | `figma_get_component_for_development`, `figma_capture_screenshot` | Bileşen spec + görsel; test ve kabul için referans |
|
|
53
|
-
| Design–code uyumu (gap analizi) | `figma_check_design_parity` | Figma token'ları ile kod token'larını karşılaştırır; kurumsal raporlama ve test kriterleri |
|
|
54
|
-
| Keşif ve durum | `figma_search_components`, `figma_get_status`, `figma_list_connected_files`, `figma_set_port` | Bileşen arama, bağlantı kontrolü, bağlı dosya listesi (multi-client), runtime port değişimi |
|
|
55
|
-
| Figma REST API (token ile) | `figma_set_rest_token`, `figma_rest_api`, `figma_get_rest_token_status`, `figma_clear_rest_token` | Token girişi, direkt REST API çağrıları (export, comments, versions), rate limit takibi, otomatik cevap kırpma (context koruması) |
|
|
56
|
-
| Tasarım oluşturma | `figma_create_frame`, `figma_create_text`, `figma_create_rectangle`, `figma_create_group` | Yeni frame, metin, dikdörtgen oluşturma ve gruplama |
|
|
57
|
-
| Görsel export | `figma_export_nodes`, `figma_capture_screenshot` | SVG/PNG/JPG/PDF batch export (1-50 node, vektörel), screenshot |
|
|
58
|
-
| Kütüphane ve tanılama | `figma_search_assets`, `figma_plugin_diagnostics` | Takım kütüphanesi arama, plugin sağlık kontrolü (uptime, bellek, bağlantı) |
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
### Geliştiriciler
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
| Kullanım | Araçlar | Açıklama |
|
|
65
|
-
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
66
|
-
| Bileşen ve implementasyon | `figma_get_component`, `figma_get_component_for_development`, `figma_get_component_image`, `figma_instantiate_component`, `figma_set_instance_properties` | Metadata, screenshot, instance oluşturma ve property güncelleme |
|
|
67
|
-
| Token ve stil kodu | `figma_get_variables`, `figma_get_styles` | Değişkenler ve stiller (CSS/Tailwind/TS export) |
|
|
68
|
-
| Dosya yapısı / design context | `figma_get_file_data`, `figma_get_design_context` | Yapı, metin, layout, renk, font; SUI bileşen/token adı, layoutSummary, colorHex, fillVariableNames; outputHint: react/tailwind |
|
|
69
|
-
| Çalıştırma ve doğrulama | `figma_execute`, `figma_capture_screenshot`, `figma_get_console_logs`, `figma_watch_console`, `figma_clear_console` | Plugin API'de JS, screenshot, console log okuma/izleme/temizleme |
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
### DesignOps ve tasarımcılar
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
| Kullanım | Araçlar | Açıklama |
|
|
76
|
-
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
|
|
77
|
-
| DesignOps (kritik) | `figma_check_design_parity`, `figma_setup_design_tokens`, `figma_batch_create_variables`, `figma_batch_update_variables` | Design–code gap, koleksiyon+modlar+variable (rollback), toplu token yönetimi |
|
|
78
|
-
| Değişken ve stil yönetimi | `figma_get_variables`, `figma_get_styles`, `figma_create_variable_collection`, `figma_create_variable`, `figma_update_variable`, `figma_delete_variable`, `figma_rename_variable`, `figma_add_mode`, `figma_rename_mode`, `figma_refresh_variables`, `figma_get_token_browser` | Tüm variable/stil CRUD ve Token Browser |
|
|
79
|
-
| Bileşen kütüphanesi | `figma_get_design_system_summary`, `figma_search_components`, `figma_arrange_component_set`, `figma_set_description` | Özet/arama (currentPageOnly varsayılan; SUI/büyük dosyada timeout önlemi), variant set, dokümantasyon |
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
Kurulum: **En basit (repo indirmeden):** aşağıdaki [En basit kurulum](#en-basit-kurulum-npx--repo-indirmeden) adımları. **Detaylı:** [Kurulum rehberi (Onboarding)](docs/ONBOARDING.md). **Windows:** [WINDOWS-INSTALLATION.md](docs/WINDOWS-INSTALLATION.md) (Node veya Python bridge).
|
|
83
|
-
|
|
84
|
-
### Çalışma modları (hangi binary?)
|
|
85
|
-
|
|
86
|
-
| Mod | NPM / `node` girişi | Ne zaman |
|
|
87
|
-
| --- | --- | --- |
|
|
88
|
-
| **Plugin-only (önerilen)** | `figma-mcp-bridge-plugin` veya `dist/local-plugin-only.js` | Figma’da **F-MCP ATezer Bridge** plugin’i ile çalışmak; REST token gerekmez; debug portu gerekmez. |
|
|
89
|
-
| **Tam (CDP + REST)** | `figma-mcp-bridge` veya `dist/local.js` | Console log, ekran görüntüsü CDP üzerinden, `FIGMA_ACCESS_TOKEN`, Figma `--remote-debugging-port=9222` vb. |
|
|
90
|
-
|
|
91
|
-
Varsayılan NPM `main` ve `figma-mcp-bridge` komutu **tam mod**dur; plugin ile yetiniyorsanız config’te **`figma-mcp-bridge-plugin`** kullanın (NPX örnekleri aşağıda).
|
|
92
|
-
|
|
93
|
-
## Sürüm ve güncellemeler
|
|
94
|
-
|
|
95
|
-
| Ne | Nerede |
|
|
96
|
-
| --- | --- |
|
|
97
|
-
| **Sürüm numarası** | [`package.json`](package.json) içindeki `version` (ör. **1.6.2**) |
|
|
98
|
-
| **Değişiklik özeti** | [CHANGELOG.md](CHANGELOG.md) |
|
|
99
|
-
| **Yayın bildirimi** | GitHub’da [Releases](https://github.com/atezer/FMCP/releases) — *Watch* → *Custom* → *Releases* ile e-posta bildirimi |
|
|
100
|
-
| **npm paketi** | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) — sürüm geçmişi npm sayfasında |
|
|
101
|
-
|
|
102
|
-
**Zaten kurulu yapıyı güncellemek (özet):**
|
|
103
|
-
|
|
104
|
-
- **Repo clone + `node …/dist/local-plugin-only.js`:** `git pull` → gerekirse `npm install` → `npm run build:local` → Cursor/Claude’u yeniden başlatın. Figma plugin kaynağı (`f-mcp-plugin/`) değiştiyse Development’tan manifest’i yeniden import edin veya plugin’i yeniden çalıştırın.
|
|
105
|
-
- **NPX:** Config’te `@latest` kullanıyorsanız yeni npm sürümü yayınlandıktan sonra bir sonraki MCP başlatmada indirilir; takılmada yukarıdaki önbellek notuna bakın. Sabit sürüm kullanıyorsanız `package.json`/CHANGELOG ile uyumlu sürüm numarasını elle güncelleyin.
|
|
106
|
-
|
|
107
|
-
Ayrıntılı adımlar: [KURULUM.md — Sürüm takibi ve güncelleme notları](KURULUM.md#sürüm-takibi-ve-güncelleme-notları).
|
|
108
|
-
|
|
109
|
-
## Hızlı başlangıç
|
|
13
|
+
```
|
|
14
|
+
Siz (Claude/Cursor) → F-MCP Bridge → Figma Plugin → Figma dosyanız
|
|
15
|
+
```
|
|
110
16
|
|
|
111
|
-
|
|
17
|
+
Her şey **bilgisayarınızda** kalır. Tasarım verileriniz internete gönderilmez.
|
|
112
18
|
|
|
113
|
-
|
|
19
|
+
## Öne çıkan özellikler
|
|
114
20
|
|
|
115
|
-
|
|
21
|
+
- **46 araç** — okuma, yazma, export, variable yönetimi, bileşen arama ve daha fazlası
|
|
22
|
+
- **Figma API token tüketmez** — Plugin üzerinden çalışır, Figma REST API kullanmaz
|
|
23
|
+
- **Veri güvenliği** — Tasarım verisi sadece kendi bilgisayarınızda kalır (Zero Trust)
|
|
24
|
+
- **Çoklu dosya** — Aynı anda birden fazla Figma/FigJam dosyası ile çalışabilirsiniz
|
|
25
|
+
- **Çoklu AI aracı** — Claude ve Cursor aynı anda kullanılabilir (farklı portlarda)
|
|
26
|
+
- **SVG/PNG export** — Vektörel veya bitmap, toplu export (1-50 node)
|
|
27
|
+
- **REST API desteği** — Token ile yorum okuma, versiyon geçmişi, görsel export
|
|
28
|
+
- **Figma Desktop + Tarayıcı** — Her ikisinde de çalışır
|
|
116
29
|
|
|
117
|
-
|
|
30
|
+
## Hızlı başlangıç (3 adım)
|
|
118
31
|
|
|
32
|
+
### 1. Node.js kurun
|
|
119
33
|
|
|
120
|
-
|
|
121
|
-
| ---- | ------------------------------------------------------------------------------------------------------------ |
|
|
122
|
-
| 1 | **Node.js kur** — [nodejs.org](https://nodejs.org) LTS. Terminalde `node -v` ile kontrol edin. |
|
|
123
|
-
| 2 | **MCP config ekle** — Aşağıdaki JSON bloğunu Cursor veya Claude config dosyasına ekleyin. |
|
|
124
|
-
| 3 | **Cursor veya Claude'u yeniden başlatın** — köprü varsayılan olarak **5454**’te dinler (meşgulse **5454–5470** arasında sabit port; port mesgulse acik hata mesaji verir). Farkli porta gecmek icin `FIGMA_PLUGIN_BRIDGE_PORT` env var kullanin. |
|
|
125
|
-
| 4 | **Figma'da plugini açın** — Plugins → **F-MCP ATezer Bridge** → **"ready (:5454)"** görünene kadar bekleyin. |
|
|
34
|
+
[nodejs.org](https://nodejs.org) adresinden LTS sürümünü indirip kurun.
|
|
126
35
|
|
|
36
|
+
### 2. AI aracınıza config ekleyin
|
|
127
37
|
|
|
128
|
-
**Cursor** — Proje kökünde
|
|
38
|
+
**Cursor** — Proje kökünde `.cursor/mcp.json` dosyası oluşturun:
|
|
129
39
|
|
|
130
40
|
```json
|
|
131
41
|
{
|
|
@@ -138,7 +48,7 @@ Repo klonlamadan, sadece Node.js ve tek bir config ile kurulum. **NPX güncellem
|
|
|
138
48
|
}
|
|
139
49
|
```
|
|
140
50
|
|
|
141
|
-
**Claude Desktop** — macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
51
|
+
**Claude Desktop** — Config dosyasını açın (macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`):
|
|
142
52
|
|
|
143
53
|
```json
|
|
144
54
|
{
|
|
@@ -151,225 +61,147 @@ Repo klonlamadan, sadece Node.js ve tek bir config ile kurulum. **NPX güncellem
|
|
|
151
61
|
}
|
|
152
62
|
```
|
|
153
63
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
- **Otomatik akış:** İlk araç 5454’ü alır → ikinci araçta `figma_get_status` “port meşgul” der → `figma_set_port(5456)` ile geçiş → plugin’de 5456 ayarla → bağlantı kurulur.
|
|
157
|
-
- **Manuel:** Config’te `”env”: { “FIGMA_PLUGIN_BRIDGE_PORT”: “5455” }` ekleyerek önceden ayrı port atayabilirsiniz.
|
|
158
|
-
|
|
159
|
-
```json
|
|
160
|
-
"figma-mcp-bridge": {
|
|
161
|
-
"command": "npx",
|
|
162
|
-
"args": ["-y", "@atezer/figma-mcp-bridge@latest", "figma-mcp-bridge-plugin"],
|
|
163
|
-
"env": {
|
|
164
|
-
"FIGMA_PLUGIN_BRIDGE_PORT": "5455"
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
Repo ile (clone + build) kullanıyorsanız: `"command": "node"`, `"args": ["<PROJE-YOLU>/dist/local-plugin-only.js"]` ile aynı `"env": { "FIGMA_PLUGIN_BRIDGE_PORT": "5455" }` ekleyin. Claude’u yeniden başlatın; Figma’da plugini açıp Port alanına **5455** yazın → **"ready (:5455)"** görünmeli.
|
|
170
|
-
|
|
171
|
-
İlk çalıştırmada `npx` paketi indirir; sonraki açılışlarda cache'den çalışır. **Plugin'i Figma'da ilk kez kullanıyorsanız** [Plugin'i Figma'ya yükleyin](#plugini-figmaya-yükleyin-ilk-seferde) adımına bakın.
|
|
172
|
-
|
|
173
|
-
### A) Clone + build ile (Cursor / Claude)
|
|
174
|
-
|
|
175
|
-
Repo'yu indirip kendi makinenizde build etmek isterseniz (ör. ağ erişimi kısıtlı ortam):
|
|
176
|
-
|
|
177
|
-
**1. Build (bir kez):**
|
|
178
|
-
|
|
179
|
-
```bash
|
|
180
|
-
cd <proje-yolu>
|
|
181
|
-
npm install
|
|
182
|
-
npm run build:local
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
**2. MCP config** — `command`: `"node"`, `args`: `["<PROJE-YOLU>/dist/local-plugin-only.js"]` (tam yolu yazın).
|
|
186
|
-
|
|
187
|
-
**Cursor** — `.cursor/mcp.json` | **Claude** — `claude_desktop_config.json` (yolu yukarıdaki gibi).
|
|
188
|
-
|
|
189
|
-
**3. Cursor/Claude'u yeniden başlatın.**
|
|
190
|
-
**4. Figma'da plugini çalıştırın** → **"ready (:5454)"** bekleyin.
|
|
191
|
-
|
|
192
|
-
> **Permission denied?** `"command": "bash"`, `"args": ["-c", "cd <PROJE-YOLU> && exec node dist/local-plugin-only.js"]` kullanın.
|
|
193
|
-
|
|
194
|
-
### B) Manuel geliştirme / debug
|
|
195
|
-
|
|
196
|
-
> **Bu yöntem sadece bridge/plugin geliştirmesi veya debug içindir.** Cursor/Claude Desktop ile aynı anda **kullanmayın**.
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
cd <proje-yolu>
|
|
200
|
-
npm install
|
|
201
|
-
npm run dev:local
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
Çıktıda `Plugin bridge server listening` geçen satırı görünce Figma'da plugin'i açın.
|
|
205
|
-
|
|
206
|
-
> **Port çatışması (v1.3.0+):** Aynı porta iki F-MCP bridge bağlanamaz. Port meşgulse bridge crash olmaz; `figma_set_port` ile runtime'da farklı porta geçebilirsiniz. Alternatif: `lsof -i :5454` (macOS/Linux) veya `netstat -ano | findstr :5454` (Windows) ile mevcut process'i bulun ve kapatın.
|
|
207
|
-
|
|
208
|
-
### Plugin'i Figma'ya yükleyin (ilk seferde)
|
|
209
|
-
|
|
210
|
-
1. Figma'yı açın.
|
|
211
|
-
2. **Plugins** → **Development** → **Import plugin from manifest…**
|
|
212
|
-
3. Bu repodaki `f-mcp-plugin/manifest.json` dosyasını seçin.
|
|
213
|
-
4. Plugin listede "F-MCP ATezer Bridge" olarak görünür.
|
|
64
|
+
### 3. Figma'da plugin'i açın
|
|
214
65
|
|
|
215
|
-
|
|
66
|
+
1. Cursor veya Claude Desktop'ı yeniden başlatın
|
|
67
|
+
2. Figma'yı açın → **Plugins** → **F-MCP ATezer Bridge**
|
|
68
|
+
3. Plugin'de **"ready (:5454)"** yazısını görene kadar bekleyin
|
|
69
|
+
4. Artık AI aracınız Figma'ya bağlı!
|
|
216
70
|
|
|
71
|
+
> **Plugin'i ilk kez mi yüklüyorsunuz?** Figma → Plugins → Development → Import plugin from manifest → Bu repodaki `f-mcp-plugin/manifest.json` dosyasını seçin.
|
|
217
72
|
|
|
218
|
-
|
|
219
|
-
| --------------- | ----------------------------------------------------------------------- |
|
|
220
|
-
| `connecting...` | WebSocket açıldı, sunucudan handshake bekleniyor |
|
|
221
|
-
| `ready (:5454)` | F-MCP bridge'e başarıyla bağlandı (port numarası gösterilir) |
|
|
222
|
-
| `wrong server` | Bağlantı kuruldu ama karşıdaki F-MCP bridge değil (eski/yanlış process) |
|
|
223
|
-
| `no server` | Sunucu kapalı veya erişilemiyor |
|
|
73
|
+
## 46 araçla neler yapabilirsiniz?
|
|
224
74
|
|
|
75
|
+
### Tasarımcılar için
|
|
225
76
|
|
|
226
|
-
|
|
77
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
78
|
+
|-------------------|---------|
|
|
79
|
+
| Dosya yapısını görme | `figma_get_file_data`, `figma_get_design_context` |
|
|
80
|
+
| Bileşen bulma ve inceleme | `figma_search_components`, `figma_get_component` |
|
|
81
|
+
| Screenshot alma | `figma_capture_screenshot` |
|
|
82
|
+
| SVG/PNG export | `figma_export_nodes` (toplu, vektörel) |
|
|
83
|
+
| Yeni tasarım elemanı oluşturma | `figma_create_frame`, `figma_create_text`, `figma_create_rectangle`, `figma_create_group` |
|
|
84
|
+
| Variable ve token yönetimi | `figma_get_variables`, `figma_create_variable`, `figma_update_variable` |
|
|
85
|
+
| Design system özeti | `figma_get_design_system_summary`, `figma_get_token_browser` |
|
|
86
|
+
| Takım kütüphanesi arama | `figma_search_assets` |
|
|
227
87
|
|
|
228
|
-
|
|
88
|
+
### Geliştiriciler için
|
|
229
89
|
|
|
230
|
-
|
|
90
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
91
|
+
|-------------------|---------|
|
|
92
|
+
| Bileşen detayı + görsel | `figma_get_component_for_development`, `figma_get_component_image` |
|
|
93
|
+
| Token ve stil çıkarma | `figma_get_variables`, `figma_get_styles` |
|
|
94
|
+
| Instance oluşturma | `figma_instantiate_component`, `figma_set_instance_properties` |
|
|
95
|
+
| Kod çalıştırma | `figma_execute` (Figma Plugin API ile doğrudan JS) |
|
|
96
|
+
| Konsol izleme | `figma_get_console_logs`, `figma_watch_console` |
|
|
231
97
|
|
|
232
|
-
|
|
98
|
+
### DesignOps için
|
|
233
99
|
|
|
234
|
-
|
|
100
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
101
|
+
|-------------------|---------|
|
|
102
|
+
| Design-code uyumu kontrolü | `figma_check_design_parity` |
|
|
103
|
+
| Toplu token oluşturma | `figma_setup_design_tokens`, `figma_batch_create_variables` |
|
|
104
|
+
| Variable CRUD (oluştur/güncelle/sil) | Tam variable yönetim seti (12 araç) |
|
|
105
|
+
| Bileşen variant yönetimi | `figma_arrange_component_set`, `figma_set_description` |
|
|
235
106
|
|
|
236
|
-
|
|
107
|
+
### REST API (isteğe bağlı, token gerektirir)
|
|
237
108
|
|
|
238
|
-
|
|
109
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
110
|
+
|-------------------|---------|
|
|
111
|
+
| Token girişi | `figma_set_rest_token` (plugin UI'dan veya AI aracından) |
|
|
112
|
+
| API çağrısı | `figma_rest_api` (yorumlar, versiyonlar, görsel export) |
|
|
113
|
+
| Limit takibi | `figma_get_rest_token_status` |
|
|
114
|
+
| Bağlantı durumu | `figma_plugin_diagnostics` |
|
|
239
115
|
|
|
240
|
-
|
|
116
|
+
Tam araç listesi: [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | Detaylı referans: [TOOLS.md](docs/TOOLS.md)
|
|
241
117
|
|
|
242
|
-
|
|
118
|
+
## Claude + Cursor aynı anda kullanma
|
|
243
119
|
|
|
244
|
-
|
|
120
|
+
Her iki araç da varsayılan 5454 portunu kullanır. İlk açılan portu alır, ikincisi için:
|
|
245
121
|
|
|
246
|
-
|
|
122
|
+
1. AI aracına "port 5456 kullan" deyin → `figma_set_port(5456)` çalışır
|
|
123
|
+
2. Figma plugin'de portu **5456** yapın
|
|
124
|
+
3. Her iki araç aynı anda bağımsız çalışır
|
|
247
125
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
1. MCP bridge sunucusunu başlatın (Cursor/Claude Desktop açın veya `npm run dev:local`).
|
|
251
|
-
2. Figma'yı tarayıcıda açın → Plugin'i çalıştırın.
|
|
252
|
-
3. Plugin UI'da Host: `localhost`, Port: `5454` → **"ready (:5454)"** göründüğünde hazır.
|
|
253
|
-
|
|
254
|
-
**Uzak makinede (tarayıcı bir bilgisayarda, MCP bridge başka bir makinede):**
|
|
255
|
-
|
|
256
|
-
1. MCP bridge makinesinde `FIGMA_BRIDGE_HOST=0.0.0.0` env var ile sunucuyu başlatın (tüm ağ arayüzlerinden erişim açılır).
|
|
257
|
-
2. Plugin UI'da Host alanına MCP bridge makinesinin IP adresini girin (örn. `192.168.1.50`), Port: `5454`.
|
|
258
|
-
3. **Manifest güncellemesi gerekir:** Uzak IP'yi `manifest.json` dosyasındaki `networkAccess.allowedDomains` dizisine ekleyin (örn. `"ws://192.168.1.50:5454"`). Organization plugin olarak dağıtıldığında admin bunu yapılandırır.
|
|
259
|
-
4. Firewall'da port 5454'ün açık olduğundan emin olun.
|
|
260
|
-
|
|
261
|
-
> **Güvenlik:** Default olarak sunucu yalnızca `127.0.0.1`'de dinler (Zero Trust). Uzak erişim için `FIGMA_BRIDGE_HOST=0.0.0.0` **bilinçli olarak** ayarlanmalı ve firewall ile korunmalıdır.
|
|
262
|
-
|
|
263
|
-
---
|
|
264
|
-
|
|
265
|
-
## Design / Dev Mode / FigJam
|
|
266
|
-
|
|
267
|
-
**Design seat olmayan, sadece Dev Mode erişimi olan kullanıcılar da bu MCP'yi kullanabilir.** Plugin Design, Dev Mode ve **FigJam** dahil tüm editör tiplerinde çalışır (`editorType: ["figma", "figjam", "dev"]`). MCP bağlantısı için mod farkı engel değildir.
|
|
268
|
-
|
|
269
|
-
- **Dev Mode kullanıcıları (SEM, PO, Dev):** Dosyayı Dev Mode'da açın → sağ panelde **Plugins** sekmesi → **F-MCP ATezer Bridge** ile çalıştırın.
|
|
270
|
-
- **FigJam kullanıcıları:** FigJam dosyasını açın → **Plugins** → **F-MCP ATezer Bridge** ile çalıştırın. FigJam'de brainstorm, flow ve diyagram verilerine MCP üzerinden erişebilirsiniz.
|
|
271
|
-
|
|
272
|
-
Detay: [ONBOARDING.md](docs/ONBOARDING.md) (Dev Mode bölümü).
|
|
273
|
-
|
|
274
|
-
### Multi-client: Aynı anda birden fazla dosya
|
|
275
|
-
|
|
276
|
-
F-MCP Bridge **aynı anda birden fazla Figma/FigJam plugin bağlantısını** destekler. Üç ortam birlikte kullanılabilir:
|
|
277
|
-
|
|
278
|
-
- **Figma Desktop** — bir veya daha fazla design dosyasında plugin açık
|
|
279
|
-
- **FigJam browser** — tarayıcıda FigJam board'unda plugin açık
|
|
280
|
-
- **Figma browser** — tarayıcıda figma.com design dosyasında plugin açık
|
|
281
|
-
|
|
282
|
-
Hangi **linki** verirseniz, istek o linkteki dosyaya yönlendirilir; diğer pencereler etkilenmez. **Çoklu ajan:** Farklı dosya linkleri kullanarak birden fazla ajan veya oturum aynı anda farklı dosyalarda çalışabilir.
|
|
283
|
-
|
|
284
|
-
**Link ile kullanım:** Verdiğiniz Figma veya FigJam linki, ilgili tool çağrılarında `figmaUrl` parametresi olarak verilebilir; bridge linkten dosyayı tespit edip o dosyadaki plugin'e yönlendirir. Örneğin: "Bu FigJam linkine bak: https://figma.com/board/XYZ/..." → AI `figma_get_design_context({ figmaUrl: "https://..." })` ile çağırır.
|
|
285
|
-
|
|
286
|
-
**Manuel fileKey:** Her plugin bağlantısı kendini `fileKey` ile tanıtır. `figma_list_connected_files` ile bağlı dosyaları listeleyip, diğer tool'larda `fileKey` parametresi ile hedef dosyayı belirtebilirsiniz. `fileKey` ve `figmaUrl` belirtilmezse en son bağlanan dosyaya gider (geriye uyumlu).
|
|
287
|
-
|
|
288
|
-
**Kullanım:**
|
|
289
|
-
|
|
290
|
-
1. Birden fazla Figma/FigJam dosyasında (Desktop veya tarayıcı) plugin'i açın → her biri **"ready (:5454)"** gösterir.
|
|
291
|
-
2. İstediğiniz dosyanın linkini Claude/Cursor'a verin veya `figma_list_connected_files` ile bağlı dosyaları listeleyin.
|
|
292
|
-
3. Tool çağrılarında `figmaUrl` (link) veya `fileKey` ile hedef dosyayı belirtin.
|
|
126
|
+
Ya da config'te önceden farklı port belirleyin:
|
|
293
127
|
|
|
128
|
+
```json
|
|
129
|
+
"env": { "FIGMA_PLUGIN_BRIDGE_PORT": "5455" }
|
|
294
130
|
```
|
|
295
|
-
// Bağlı dosyaları listele
|
|
296
|
-
figma_list_connected_files
|
|
297
131
|
|
|
298
|
-
|
|
299
|
-
figma_get_design_context { "figmaUrl": "https://www.figma.com/board/XYZ/...", "depth": 2 }
|
|
300
|
-
|
|
301
|
-
// veya fileKey ile
|
|
302
|
-
figma_get_design_context { "fileKey": "abc123...", "depth": 2 }
|
|
303
|
-
```
|
|
132
|
+
## Çoklu dosya desteği
|
|
304
133
|
|
|
305
|
-
|
|
134
|
+
Aynı anda birden fazla Figma/FigJam dosyasında plugin'i açabilirsiniz:
|
|
306
135
|
|
|
307
|
-
|
|
136
|
+
- **Figma Desktop** — tasarım dosyası
|
|
137
|
+
- **Figma Browser** — tarayıcıda figma.com
|
|
138
|
+
- **FigJam** — whiteboard/diyagram
|
|
308
139
|
|
|
309
|
-
|
|
140
|
+
Hangi linki verirseniz, AI o dosyaya yönlendirilir. `figma_list_connected_files` ile bağlı dosyaları görebilirsiniz.
|
|
310
141
|
|
|
311
|
-
|
|
312
|
-
- **[REST API Rehberi](docs/REST_API_GUIDE.md)** — Token kurulumu, örnekler, rate limit yönetimi
|
|
313
|
-
- **[Katkıda Bulunma](CONTRIBUTING.md)** — Geliştirici rehberi, test, tool ekleme
|
|
142
|
+
## Plugin durum göstergeleri
|
|
314
143
|
|
|
315
|
-
|
|
144
|
+
| Plugin'de ne görüyorsunuz | Anlamı |
|
|
145
|
+
|---------------------------|--------|
|
|
146
|
+
| `ready (:5454)` | Bağlantı kuruldu, kullanmaya hazır |
|
|
147
|
+
| `connecting...` | Bağlanmaya çalışıyor |
|
|
148
|
+
| `no server` | AI aracı çalışmıyor veya port uyuşmuyor |
|
|
149
|
+
| `wrong server` | Farklı bir sunucuya bağlandı |
|
|
316
150
|
|
|
317
|
-
|
|
318
|
-
- `docs/` – Kurulum, araç referansı, REST API rehberi, sorun giderme
|
|
319
|
-
- `src/` – MCP sunucusu (local, plugin-only, Cloudflare Worker)
|
|
320
|
-
- `python-bridge/` – **Python MCP bridge** (Node.js kurulumu olmayan ortamlar için); aynı WebSocket protokolü, port 5454
|
|
151
|
+
## Sorun mu yaşıyorsunuz?
|
|
321
152
|
|
|
322
|
-
|
|
153
|
+
| Sorun | Çözüm |
|
|
154
|
+
|-------|-------|
|
|
155
|
+
| Plugin "no server" diyor | AI aracınızı (Claude/Cursor) yeniden başlatın |
|
|
156
|
+
| Port çakışması | `figma_set_port` ile farklı porta geçin veya `lsof -i :5454` ile portu kontrol edin |
|
|
157
|
+
| "Server disconnected" | Config'deki node yolunu kontrol edin: `which node` ile tam yolu bulun |
|
|
158
|
+
| Plugin'de 0 bağlantı | Plugin'deki port ile AI aracının portu aynı olmalı |
|
|
323
159
|
|
|
160
|
+
Detaylı sorun giderme: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
|
|
324
161
|
|
|
325
|
-
|
|
326
|
-
| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
327
|
-
| [ONBOARDING.md](docs/ONBOARDING.md) | **Kurulum rehberi (Onboarding)** — Plugin yükle, Node.js, MCP başlat, Claude config |
|
|
328
|
-
| [WINDOWS-INSTALLATION.md](docs/WINDOWS-INSTALLATION.md) | **Windows kurulum** — Node veya Python bridge, Claude config (Windows yolu), port, sorun giderme |
|
|
329
|
-
| [SETUP.md](docs/SETUP.md) | Kurulum (Remote / Local) |
|
|
330
|
-
| [TOOLS.md](docs/TOOLS.md) | MCP araçları detaylı referansı |
|
|
331
|
-
| [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | **46 araç tam liste** (referans, Claude ile doğrulanmış) |
|
|
332
|
-
| [REST_API_GUIDE.md](docs/REST_API_GUIDE.md) | **REST API rehberi** — Token kurulumu, örnekler, rate limit |
|
|
333
|
-
| [CONTRIBUTING.md](CONTRIBUTING.md) | **Katkıda bulunma** — Yerel kurulum, test, tool ekleme, PR süreci |
|
|
334
|
-
| [DEVELOPER_FIGMA_CAPABILITIES.md](docs/DEVELOPER_FIGMA_CAPABILITIES.md) | **Cursor + F-MCP:** Neyi alır/almaz, birebir çıkartma, code-ready/SUI/token referansı, ileride |
|
|
335
|
-
| [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | Sorun giderme |
|
|
336
|
-
| [NPX-INSTALLATION.md](docs/NPX-INSTALLATION.md) | NPX ile kurulum |
|
|
337
|
-
| [CHANGELOG.md](CHANGELOG.md) | **Sürüm geçmişi** — npm/GitHub Releases ile birlikte referans |
|
|
338
|
-
| [RELEASE_NOTES_TEMPLATE.md](docs/RELEASE_NOTES_TEMPLATE.md) | **Yeni sürüm yayını** — GitHub Release gövdesi şablonu ve `gh release create` ipuçları |
|
|
339
|
-
| [OAUTH_SETUP.md](docs/OAUTH_SETUP.md) | OAuth (remote sunucu) |
|
|
340
|
-
| [SELF_HOSTING.md](docs/SELF_HOSTING.md) | Kendi sunucunda host |
|
|
341
|
-
| [DEPLOYMENT_COMPARISON.md](docs/DEPLOYMENT_COMPARISON.md) | Dağıtım karşılaştırma |
|
|
342
|
-
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
343
|
-
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
344
|
-
| [RECONSTRUCTION_FORMAT.md](docs/RECONSTRUCTION_FORMAT.md) | Reconstruction format |
|
|
345
|
-
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | **Paralel görevler & çoklu kullanıcı** — sabit port, paralel hatlar, Claude çoklu MCP |
|
|
346
|
-
| [CLAUDE_DESKTOP_CONFIG.md](docs/CLAUDE_DESKTOP_CONFIG.md) | Claude Desktop config örnekleri (tek ve çoklu MCP sunucusu) |
|
|
347
|
-
| [DEPENDENCY_LAYERS.md](docs/DEPENDENCY_LAYERS.md) | Bağımlılık katmanları (plugin-only / tam / Cloudflare) ve olası paket ayrımı taslağı |
|
|
348
|
-
| [ENTERPRISE.md](docs/ENTERPRISE.md) | **Enterprise** — Audit log, air-gap, Organization plugin |
|
|
349
|
-
| [SECURITY_AUDIT.md](docs/SECURITY_AUDIT.md) | **Güvenlik denetimi** — bulgular checklist ([FUTURE.md](FUTURE.md) §10) |
|
|
350
|
-
| [PUBLISH-PLUGIN.md](docs/PUBLISH-PLUGIN.md) | **Publish plugin** — Figma'da yayınlama: Data security cevapları, final details, Plugin ID |
|
|
351
|
-
| | |
|
|
162
|
+
## Sürüm bilgisi
|
|
352
163
|
|
|
164
|
+
| Bilgi | Kaynak |
|
|
165
|
+
|-------|--------|
|
|
166
|
+
| Güncel sürüm | **1.6.4** ([package.json](package.json)) |
|
|
167
|
+
| Değişiklik geçmişi | [CHANGELOG.md](CHANGELOG.md) |
|
|
168
|
+
| GitHub sürümleri | [Releases](https://github.com/atezer/FMCP/releases) |
|
|
169
|
+
| npm paketi | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |
|
|
353
170
|
|
|
354
|
-
|
|
171
|
+
**Güncelleme:** NPX ile `@latest` kullanıyorsanız otomatik güncellenir. Repo ile kurduysanız: `git pull` → `npm run build:local` → AI aracını yeniden başlatın.
|
|
355
172
|
|
|
356
|
-
|
|
173
|
+
## Dokümanlar
|
|
357
174
|
|
|
358
|
-
|
|
175
|
+
| Doküman | Açıklama |
|
|
176
|
+
|---------|----------|
|
|
177
|
+
| [ONBOARDING.md](docs/ONBOARDING.md) | Adım adım kurulum rehberi |
|
|
178
|
+
| [WINDOWS-INSTALLATION.md](docs/WINDOWS-INSTALLATION.md) | Windows kurulumu |
|
|
179
|
+
| [SETUP.md](docs/SETUP.md) | Detaylı kurulum (Local / Remote) |
|
|
180
|
+
| [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | **46 araç tam listesi** |
|
|
181
|
+
| [TOOLS.md](docs/TOOLS.md) | Araçların detaylı açıklamaları |
|
|
182
|
+
| [REST_API_GUIDE.md](docs/REST_API_GUIDE.md) | REST API kullanım rehberi |
|
|
183
|
+
| [CONTRIBUTING.md](CONTRIBUTING.md) | Projeye katkıda bulunma rehberi |
|
|
184
|
+
| [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | Sorun giderme |
|
|
185
|
+
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | Çoklu kullanıcı ve port yönetimi |
|
|
186
|
+
| [ENTERPRISE.md](docs/ENTERPRISE.md) | Kurumsal özellikler (audit log, air-gap) |
|
|
187
|
+
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
188
|
+
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
189
|
+
| [SECURITY_AUDIT.md](docs/SECURITY_AUDIT.md) | Güvenlik denetimi |
|
|
359
190
|
|
|
360
|
-
|
|
361
|
-
- Sadece **Plugins** menüsünden (veya Resources → Plugins) ekleyip çalıştırırlar; MCP bridge'i (Claude config) kendi makinede kurmaları yeterli.
|
|
362
|
-
- Review süreci yok (private plugin); yayınladıktan kısa süre sonra kullanılabilir.
|
|
191
|
+
## Güvenlik ve gizlilik
|
|
363
192
|
|
|
364
|
-
**
|
|
193
|
+
- Tasarım verileri **sadece bilgisayarınızda** kalır
|
|
194
|
+
- Figma bulutuna veya üçüncü taraflara veri **gönderilmez**
|
|
195
|
+
- REST API token'ı bellekte tutulur, diske **yazılmaz**
|
|
196
|
+
- **KVKK / GDPR uyumlu** mimari
|
|
197
|
+
- Detay: [PRIVACY.md](PRIVACY.md)
|
|
365
198
|
|
|
366
|
-
|
|
367
|
-
- Yayınlama: [Publish plugins](https://help.figma.com/hc/en-us/articles/360042293394) adımlarını izleyin; **Publish to** kısmında **organization**'ı seçin (Community değil).
|
|
199
|
+
## Kurumsal kullanım
|
|
368
200
|
|
|
369
|
-
|
|
201
|
+
Plugin'i Figma Organization altında **private plugin** olarak yayınlayabilirsiniz. Böylece ekip üyeleri Plugins menüsünden tek tıkla erişir. Detay: [ENTERPRISE.md](docs/ENTERPRISE.md)
|
|
370
202
|
|
|
371
|
-
## Lisans
|
|
203
|
+
## Lisans
|
|
372
204
|
|
|
373
|
-
|
|
374
|
-
- **Sorun bildirimi:** [GitHub Issues](https://github.com/atezer/FMCP/issues)
|
|
205
|
+
MIT tabanlı — kişisel kullanım için. Detay: [LICENSE](LICENSE)
|
|
375
206
|
|
|
207
|
+
**Sorun mu var?** [GitHub Issues](https://github.com/atezer/FMCP/issues)
|
|
@@ -247,7 +247,7 @@ export class PluginBridgeServer {
|
|
|
247
247
|
logger.info({ clientId, fileKey: incomingFileKey, fileName: incomingFileName }, "Plugin bridge: client registered (fileKey=%s, fileName=%s)", incomingFileKey, incomingFileName);
|
|
248
248
|
ws.send(JSON.stringify({
|
|
249
249
|
type: "welcome",
|
|
250
|
-
bridgeVersion: "1.6.
|
|
250
|
+
bridgeVersion: "1.6.4",
|
|
251
251
|
port: this.port,
|
|
252
252
|
clientId,
|
|
253
253
|
multiClient: true,
|
|
@@ -89,7 +89,7 @@ export async function main() {
|
|
|
89
89
|
bridge.start();
|
|
90
90
|
const server = new McpServer({
|
|
91
91
|
name: "F-MCP ATezer Bridge (Plugin-only)",
|
|
92
|
-
version: "1.6.
|
|
92
|
+
version: "1.6.4",
|
|
93
93
|
});
|
|
94
94
|
// ---- figma_list_connected_files (multi-client discovery) ----
|
|
95
95
|
server.registerTool("figma_list_connected_files", {
|
package/dist/local.js
CHANGED
package/f-mcp-plugin/README.md
CHANGED
|
@@ -51,6 +51,14 @@ You can use MCP **without** launching Figma with a debug port. When the plugin r
|
|
|
51
51
|
|
|
52
52
|
Port is configurable via `FIGMA_PLUGIN_BRIDGE_PORT` or config `local.pluginBridgePort` (default 5454).
|
|
53
53
|
|
|
54
|
+
#### Figma Desktop, FigJam, and browser Figma — same port
|
|
55
|
+
|
|
56
|
+
The bridge is **one** WebSocket server on **one** port (default **5454**). It supports **multiple simultaneous plugin connections** (`multiClient: true`): Desktop, FigJam, and Figma-in-browser can all connect to `ws://localhost:5454` at the same time. MCP tools route by `fileKey` / `figma_list_connected_files`.
|
|
57
|
+
|
|
58
|
+
**Do not** assign different ports per app (e.g. 5454 Desktop, 5455 FigJam, 5456 browser) unless you run **separate** Node bridge processes with different `FIGMA_PLUGIN_BRIDGE_PORT` values. If only one MCP server is running on 5454, plugins pointed at 5455 or 5456 will show **no server**.
|
|
59
|
+
|
|
60
|
+
**Recommended:** Use **localhost** and **5454** everywhere (or leave Advanced closed so auto-scan finds the live port).
|
|
61
|
+
|
|
54
62
|
### Plugin-only mode (recommended: no REST API, no token)
|
|
55
63
|
|
|
56
64
|
You can run **without** the full MCP server (figma-mcp-bridge) and **without** any Figma REST API token:
|
|
@@ -28,8 +28,10 @@
|
|
|
28
28
|
"http://localhost:5467", "ws://localhost:5467",
|
|
29
29
|
"http://localhost:5468", "ws://localhost:5468",
|
|
30
30
|
"http://localhost:5469", "ws://localhost:5469",
|
|
31
|
-
"http://localhost:5470", "ws://localhost:5470"
|
|
31
|
+
"http://localhost:5470", "ws://localhost:5470",
|
|
32
|
+
"https://figma-mcp-bridge.workers.dev",
|
|
33
|
+
"wss://figma-mcp-bridge.workers.dev"
|
|
32
34
|
],
|
|
33
|
-
"reasoning": "
|
|
35
|
+
"reasoning": "Local MCP WebSocket (5454–5470) and optional FMCP Cloud Mode (Workers); add your custom worker host here if different."
|
|
34
36
|
}
|
|
35
37
|
}
|
package/package.json
CHANGED