@atezer/figma-mcp-bridge 1.1.1 → 1.2.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 +164 -119
- package/dist/cloudflare/core/figma-desktop-connector.js +28 -16
- package/dist/cloudflare/core/figma-tools.js +290 -254
- package/dist/cloudflare/core/plugin-bridge-connector.js +38 -4
- package/dist/cloudflare/core/plugin-bridge-server.js +106 -29
- package/dist/core/figma-desktop-connector.d.ts +6 -2
- package/dist/core/figma-desktop-connector.d.ts.map +1 -1
- package/dist/core/figma-desktop-connector.js +28 -16
- package/dist/core/figma-desktop-connector.js.map +1 -1
- package/dist/core/figma-tools.d.ts.map +1 -1
- package/dist/core/figma-tools.js +290 -254
- package/dist/core/figma-tools.js.map +1 -1
- package/dist/core/plugin-bridge-connector.d.ts +18 -2
- package/dist/core/plugin-bridge-connector.d.ts.map +1 -1
- package/dist/core/plugin-bridge-connector.js +38 -4
- package/dist/core/plugin-bridge-connector.js.map +1 -1
- package/dist/core/plugin-bridge-server.d.ts +7 -2
- package/dist/core/plugin-bridge-server.d.ts.map +1 -1
- package/dist/core/plugin-bridge-server.js +106 -29
- package/dist/core/plugin-bridge-server.js.map +1 -1
- package/dist/local-plugin-only.d.ts.map +1 -1
- package/dist/local-plugin-only.js +289 -95
- package/dist/local-plugin-only.js.map +1 -1
- package/dist/local.js +323 -183
- package/dist/local.js.map +1 -1
- package/f-mcp-plugin/code.js +341 -53
- package/f-mcp-plugin/manifest.json +22 -3
- package/f-mcp-plugin/ui.html +226 -43
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,179 +1,219 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="../lmcp.png" alt="F-MCP Bridge Logo" width="280" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
# F-MCP (Figma MCP Bridge)
|
|
2
6
|
|
|
3
|
-
Figma tasarım verilerini ve işlemlerini Model Context Protocol (MCP) ile AI asistanlarına (Claude, Cursor vb.) açan MCP sunucusu ve Figma plugin
|
|
7
|
+
Figma tasarım verilerini ve işlemlerini Model Context Protocol (MCP) ile AI asistanlarına (Claude, Cursor vb.) açan MCP sunucusu ve Figma plugin'i. Bu repo MCP sunucusu ve **F-MCP Bridge** Figma plugin kaynağını içerir.
|
|
4
8
|
|
|
5
9
|
### Figma API token tüketmiyor
|
|
6
10
|
|
|
7
11
|
figma-mcp-bridge, Figma'nın **REST API'sini kullanmıyor**. Akış:
|
|
8
12
|
|
|
9
|
-
**Claude (MCP) → figma-mcp-bridge → Plugin → Figma Desktop
|
|
13
|
+
**Claude (MCP) → figma-mcp-bridge → Plugin → Figma (Desktop veya Tarayıcı)**
|
|
10
14
|
|
|
11
|
-
Sorgular doğrudan Figma
|
|
15
|
+
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:
|
|
12
16
|
|
|
13
17
|
- Figma API token tüketimi **yok** (REST API hiç çağrılmıyor)
|
|
14
18
|
- Rate limit yok
|
|
15
19
|
- Figma tarafında ücretlendirme yok
|
|
16
|
-
-
|
|
20
|
+
- Desktop'ta internet bağlantısı gerekmez; tarayıcı Figma'da yalnızca figma.com erişimi yeterli
|
|
17
21
|
|
|
18
22
|
**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.
|
|
19
23
|
|
|
20
24
|
### Zero Trust
|
|
21
25
|
|
|
22
|
-
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
|
|
26
|
+
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ı).
|
|
27
|
+
|
|
28
|
+
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).
|
|
23
29
|
|
|
24
|
-
### Kurumlar için özet
|
|
30
|
+
### Kurumlar için özet
|
|
25
31
|
|
|
26
|
-
- **Debug modu kapalı.** Figma
|
|
27
|
-
- **Kendi plugin story
|
|
32
|
+
- **Debug modu kapalı.** Figma'yı normal açarsınız; ekstra debug portu veya geliştirici ayarı gerekmez.
|
|
33
|
+
- **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.
|
|
28
34
|
- **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.
|
|
29
35
|
|
|
30
36
|
## F-MCP yetenekleri
|
|
31
37
|
|
|
32
|
-
**
|
|
38
|
+
**33 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.
|
|
33
39
|
|
|
34
40
|
### Ürün yöneticileri (analiz, kabul kriterleri, kurumsal süreçler)
|
|
35
41
|
|
|
36
42
|
|
|
37
|
-
| Kullanım | Araçlar | Açıklama
|
|
38
|
-
| --------------------------------- | ----------------------------------------------------------------- |
|
|
39
|
-
| Tasarım envanteri ve analiz | `figma_get_design_system_summary`, `figma_get_file_data` |
|
|
40
|
-
| Kabul kriterleri ve dokümantasyon | `figma_get_component_for_development`, `figma_capture_screenshot` | Bileşen spec + görsel; test ve kabul için referans
|
|
41
|
-
| 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
|
|
42
|
-
| Keşif ve durum | `figma_search_components`, `figma_get_status` | Bileşen arama, bağlantı kontrolü
|
|
43
|
+
| Kullanım | Araçlar | Açıklama |
|
|
44
|
+
| --------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| 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) |
|
|
46
|
+
| Kabul kriterleri ve dokümantasyon | `figma_get_component_for_development`, `figma_capture_screenshot` | Bileşen spec + görsel; test ve kabul için referans |
|
|
47
|
+
| 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 |
|
|
48
|
+
| Keşif ve durum | `figma_search_components`, `figma_get_status` | Bileşen arama (varsayılan currentPageOnly), bağlantı kontrolü |
|
|
43
49
|
|
|
44
50
|
|
|
45
51
|
### Geliştiriciler
|
|
46
52
|
|
|
47
53
|
|
|
48
|
-
| Kullanım
|
|
49
|
-
|
|
|
50
|
-
| Bileşen ve implementasyon
|
|
51
|
-
| Token ve stil kodu
|
|
52
|
-
| Dosya yapısı
|
|
53
|
-
| Çalıştırma ve doğrulama
|
|
54
|
+
| Kullanım | Araçlar | Açıklama |
|
|
55
|
+
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
56
|
+
| 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 |
|
|
57
|
+
| Token ve stil kodu | `figma_get_variables`, `figma_get_styles` | Değişkenler ve stiller (CSS/Tailwind/TS export) |
|
|
58
|
+
| 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 |
|
|
59
|
+
| Ç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 |
|
|
54
60
|
|
|
55
61
|
|
|
56
62
|
### DesignOps ve tasarımcılar
|
|
57
63
|
|
|
58
64
|
|
|
59
|
-
| Kullanım | Araçlar | Açıklama
|
|
60
|
-
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
61
|
-
| 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
|
|
62
|
-
| 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
|
|
63
|
-
| Bileşen kütüphanesi | `figma_get_design_system_summary`, `figma_search_components`, `figma_arrange_component_set`, `figma_set_description` | Özet
|
|
65
|
+
| Kullanım | Araçlar | Açıklama |
|
|
66
|
+
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
|
|
67
|
+
| 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 |
|
|
68
|
+
| 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 |
|
|
69
|
+
| 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 |
|
|
64
70
|
|
|
65
71
|
|
|
66
|
-
Kurulum: **[Kurulum rehberi (Onboarding)](docs/ONBOARDING.md)
|
|
72
|
+
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).
|
|
67
73
|
|
|
68
74
|
## Hızlı başlangıç
|
|
69
75
|
|
|
70
|
-
Plugin'in "ready" olması için **önce** MCP bridge sunucusu
|
|
76
|
+
Plugin'in **"ready (:5454)"** olması için **önce** MCP bridge sunucusu çalışıyor olmalı; **sonra** Figma'da plugin'i açarsınız.
|
|
71
77
|
|
|
72
|
-
|
|
78
|
+
> **⚠️ Önemli:** Cursor veya Claude Desktop kullanıyorsanız `npm run dev:local` **çalıştırMAYIN**. MCP sunucusu bu uygulamalar tarafından otomatik başlatılır. İki sunucu aynı anda çalışırsa port çatışması oluşur ve plugin yanlış sunucuya bağlanabilir.
|
|
73
79
|
|
|
74
|
-
|
|
80
|
+
### En basit kurulum (NPX — repo indirmeden)
|
|
75
81
|
|
|
76
|
-
|
|
77
|
-
cd <proje-yolu> # clone ettiğiniz proje klasörü (örn. f-mcp-bridge)
|
|
78
|
-
npm install
|
|
79
|
-
npm run dev:local
|
|
80
|
-
```
|
|
82
|
+
Repo klonlamadan, sadece Node.js ve tek bir config ile kurulum. Güncellemek için paket otomatik güncellenir (`@latest`).
|
|
81
83
|
|
|
82
|
-
Çıktıda `Plugin bridge server listening` veya `5454` geçen bir satır görünene kadar bekleyin. Bu, plugin'in bağlanacağı sunucudur.
|
|
83
84
|
|
|
84
|
-
|
|
85
|
+
| Adım | Yapılacak |
|
|
86
|
+
| ---- | ------------------------------------------------------------------------------------------------------------ |
|
|
87
|
+
| 1 | **Node.js kur** — [nodejs.org](https://nodejs.org) LTS. Terminalde `node -v` ile kontrol edin. |
|
|
88
|
+
| 2 | **MCP config ekle** — Aşağıdaki JSON bloğunu Cursor veya Claude config dosyasına ekleyin. |
|
|
89
|
+
| 3 | **Cursor veya Claude'u yeniden başlatın** — MCP sunucusu port 5454'te otomatik başlar. |
|
|
90
|
+
| 4 | **Figma'da plugini açın** — Plugins → **F-MCP ATezer Bridge** → **"ready (:5454)"** görünene kadar bekleyin. |
|
|
85
91
|
|
|
86
|
-
1. Figma'yı açın.
|
|
87
|
-
2. **Plugins** → **Development** → **Import plugin from manifest…**
|
|
88
|
-
3. Bu repodaki `f-mcp-plugin/manifest.json` dosyasını seçin
|
|
89
|
-
4. Plugin listede "F-MCP ATezer Bridge" olarak görünür.
|
|
90
92
|
|
|
91
|
-
|
|
93
|
+
**Cursor** — Proje kökünde veya kullanıcı dizininde `.cursor/mcp.json`:
|
|
92
94
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
```json
|
|
96
|
+
{
|
|
97
|
+
"mcpServers": {
|
|
98
|
+
"figma-mcp-bridge": {
|
|
99
|
+
"command": "npx",
|
|
100
|
+
"args": ["-y", "@atezer/figma-mcp-bridge@latest"]
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
```
|
|
97
105
|
|
|
106
|
+
**Claude Desktop** — macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` | Windows: `%APPDATA%\Claude\claude_desktop_config.json`:
|
|
98
107
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
108
|
+
```json
|
|
109
|
+
{
|
|
110
|
+
"mcpServers": {
|
|
111
|
+
"figma-mcp-bridge": {
|
|
112
|
+
"command": "npx",
|
|
113
|
+
"args": ["-y", "@atezer/figma-mcp-bridge@latest"]
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
104
118
|
|
|
119
|
+
İ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.
|
|
105
120
|
|
|
106
|
-
|
|
121
|
+
### A) Clone + build ile (Cursor / Claude)
|
|
107
122
|
|
|
108
|
-
|
|
123
|
+
Repo'yu indirip kendi makinenizde build etmek isterseniz (ör. ağ erişimi kısıtlı ortam):
|
|
109
124
|
|
|
110
|
-
|
|
125
|
+
**1. Build (bir kez):**
|
|
111
126
|
|
|
112
127
|
```bash
|
|
128
|
+
cd <proje-yolu>
|
|
129
|
+
npm install
|
|
113
130
|
npm run build:local
|
|
114
131
|
```
|
|
115
132
|
|
|
116
|
-
|
|
133
|
+
**2. MCP config** — `command`: `"node"`, `args`: `["<PROJE-YOLU>/dist/local-plugin-only.js"]` (tam yolu yazın).
|
|
117
134
|
|
|
118
|
-
|
|
135
|
+
**Cursor** — `.cursor/mcp.json` | **Claude** — `claude_desktop_config.json` (yolu yukarıdaki gibi).
|
|
119
136
|
|
|
120
|
-
**
|
|
137
|
+
**3. Cursor/Claude'u yeniden başlatın.**
|
|
138
|
+
**4. Figma'da plugini çalıştırın** → **"ready (:5454)"** bekleyin.
|
|
121
139
|
|
|
122
|
-
|
|
123
|
-
{
|
|
124
|
-
"mcpServers": {
|
|
125
|
-
"figma-mcp-bridge": {
|
|
126
|
-
"command": "node",
|
|
127
|
-
"args": ["<BU-REPONUN-TAM-YOLU>/dist/local-plugin-only.js"]
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
```
|
|
140
|
+
> **Permission denied?** `"command": "bash"`, `"args": ["-c", "cd <PROJE-YOLU> && exec node dist/local-plugin-only.js"]` kullanın.
|
|
132
141
|
|
|
133
|
-
|
|
142
|
+
### B) Manuel geliştirme / debug
|
|
134
143
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
144
|
+
> **Bu yöntem sadece bridge/plugin geliştirmesi veya debug içindir.** Cursor/Claude Desktop ile aynı anda **kullanmayın**.
|
|
145
|
+
|
|
146
|
+
```bash
|
|
147
|
+
cd <proje-yolu>
|
|
148
|
+
npm install
|
|
149
|
+
npm run dev:local
|
|
140
150
|
```
|
|
141
151
|
|
|
142
|
-
|
|
152
|
+
Çıktıda `Plugin bridge server listening` geçen satırı görünce Figma'da plugin'i açın.
|
|
143
153
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
154
|
+
> **Port çatışması:** Aynı porta iki F-MCP bridge bağlanamaz. Port meşgulse sunucu açık hata mesajı verir ve durur (sessiz port değiştirme yoktur). `lsof -i :5454` (macOS/Linux) veya `netstat -ano | findstr :5454` (Windows) ile mevcut process'i bulun ve kapatın.
|
|
155
|
+
|
|
156
|
+
### Plugin'i Figma'ya yükleyin (ilk seferde)
|
|
157
|
+
|
|
158
|
+
1. Figma'yı açın.
|
|
159
|
+
2. **Plugins** → **Development** → **Import plugin from manifest…**
|
|
160
|
+
3. Bu repodaki `f-mcp-plugin/manifest.json` dosyasını seçin.
|
|
161
|
+
4. Plugin listede "F-MCP ATezer Bridge" olarak görünür.
|
|
162
|
+
|
|
163
|
+
### Plugin durum göstergeleri
|
|
150
164
|
|
|
151
|
-
`<BU-REPONUN-TAM-YOLU>` yerine proje klasörünün tam yolunu yazın (örn. `/Users/.../f-mcp-bridge`).
|
|
152
165
|
|
|
153
|
-
|
|
166
|
+
| Durum | Anlam |
|
|
167
|
+
| --------------- | ----------------------------------------------------------------------- |
|
|
168
|
+
| `connecting...` | WebSocket açıldı, sunucudan handshake bekleniyor |
|
|
169
|
+
| `ready (:5454)` | F-MCP bridge'e başarıyla bağlandı (port numarası gösterilir) |
|
|
170
|
+
| `wrong server` | Bağlantı kuruldu ama karşıdaki F-MCP bridge değil (eski/yanlış process) |
|
|
171
|
+
| `no server` | Sunucu kapalı veya erişilemiyor |
|
|
154
172
|
|
|
155
|
-
### 3. Sıra
|
|
156
173
|
|
|
174
|
+
---
|
|
157
175
|
|
|
158
|
-
|
|
159
|
-
| ------------------------------------------------------------------ | --------------------------------------------------- |
|
|
160
|
-
| 1. Claude’u başlatın (MCP sunucusu 5454’ü açar) | 1. Terminalde `npm run dev:local` (açık kalsın) |
|
|
161
|
-
| 2. Figma’yı normal açın | 2. Figma’yı `--remote-debugging-port=9222` ile açın |
|
|
162
|
-
| 3. Figma’da Plugins → Development → **F-MCP ATezer Bridge** | 3. Figma’da plugini çalıştırın |
|
|
163
|
-
| 4. Plugin’de “ready” görününce Claude’da Figma araçlarını kullanın | 4. Claude’u başlatın; araçları kullanın |
|
|
176
|
+
## Claude / Cursor ile bağlama (detay)
|
|
164
177
|
|
|
178
|
+
**NPX:** Paket npm'de **@atezer/figma-mcp-bridge** adıyla yayınlı. `npx @atezer/figma-mcp-bridge@latest` ile clone yapmadan kullanılabilir. Bkz. [NPX-INSTALLATION.md](docs/NPX-INSTALLATION.md).
|
|
165
179
|
|
|
166
|
-
**
|
|
180
|
+
**Tam mod (console/screenshot):** Config'te `dist/local-plugin-only.js` yerine `dist/local.js` kullanın; Figma'yı `--remote-debugging-port=9222` ile açın.
|
|
167
181
|
|
|
168
|
-
**Çoklu kullanıcı (multi-instance):** Aynı anda birden fazla kişi kullanacaksa her kullanıcı farklı port (5454, 5455, … 5470)
|
|
182
|
+
**Çoklu kullanıcı (multi-instance):** Aynı anda birden fazla kişi kullanacaksa her kullanıcı farklı port (5454, 5455, … 5470) seçer; MCP config'e `"env": { "FIGMA_PLUGIN_BRIDGE_PORT": "5455" }` ekleyin, plugin'de aynı portu girin. Detay: [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md).
|
|
169
183
|
|
|
170
184
|
**Enterprise:** Audit log (`FIGMA_MCP_AUDIT_LOG_PATH`), air-gap kurulum ve Organization plugin: [ENTERPRISE.md](docs/ENTERPRISE.md).
|
|
171
185
|
|
|
186
|
+
**"Server disconnected" / "wrong server"?** (1) Port 5454'te başka bir process var mı kontrol edin: `lsof -i :5454`. (2) Cursor/Claude Desktop kullanıyorsanız `npm run dev:local` çalışmıyor olmalı. (3) Build güncel mi: `npm run build:local`.
|
|
187
|
+
|
|
188
|
+
### Browser Figma desteği
|
|
189
|
+
|
|
190
|
+
Plugin, Figma'nın **tarayıcı sürümünde** de (figma.com) çalışır. Desktop uygulaması zorunlu değildir.
|
|
191
|
+
|
|
192
|
+
**Aynı makinede (tarayıcı + MCP bridge aynı bilgisayarda):**
|
|
193
|
+
|
|
194
|
+
1. MCP bridge sunucusunu başlatın (Cursor/Claude Desktop açın veya `npm run dev:local`).
|
|
195
|
+
2. Figma'yı tarayıcıda açın → Plugin'i çalıştırın.
|
|
196
|
+
3. Plugin UI'da Host: `localhost`, Port: `5454` → **"ready (:5454)"** göründüğünde hazır.
|
|
197
|
+
|
|
198
|
+
**Uzak makinede (tarayıcı bir bilgisayarda, MCP bridge başka bir makinede):**
|
|
199
|
+
|
|
200
|
+
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).
|
|
201
|
+
2. Plugin UI'da Host alanına MCP bridge makinesinin IP adresini girin (örn. `192.168.1.50`), Port: `5454`.
|
|
202
|
+
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.
|
|
203
|
+
4. Firewall'da port 5454'ün açık olduğundan emin olun.
|
|
204
|
+
|
|
205
|
+
> **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.
|
|
206
|
+
|
|
172
207
|
---
|
|
173
208
|
|
|
174
|
-
## Design / Dev Mode
|
|
209
|
+
## Design / Dev Mode / FigJam
|
|
210
|
+
|
|
211
|
+
**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.
|
|
212
|
+
|
|
213
|
+
- **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.
|
|
214
|
+
- **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.
|
|
175
215
|
|
|
176
|
-
|
|
216
|
+
Detay: [ONBOARDING.md](docs/ONBOARDING.md) (Dev Mode bölümü).
|
|
177
217
|
|
|
178
218
|
**Plugin–MCP bağlantı özeti:** İki mod var; debug portu zorunlu değil. **Plugin-only (önerilen):** Config'te `dist/local-plugin-only.js`, Figma normal açılır, token yok. **Tam mod:** Config'te `dist/local.js`, Figma `--remote-debugging-port=9222` ile açılır (console/screenshot için). Ayrıntı: [PLUGIN-MCP-BAGLANTI.md](docs/PLUGIN-MCP-BAGLANTI.md).
|
|
179
219
|
|
|
@@ -181,6 +221,7 @@ Config (macOS): `**~/Library/Application Support/Claude/claude_desktop_config.js
|
|
|
181
221
|
|
|
182
222
|
Plugin'in MCP ile nasıl konuştuğu, veri akışı, Design/Dev mode ve sorun giderme için:
|
|
183
223
|
|
|
224
|
+
- **[Windows kurulum rehberi](docs/WINDOWS-INSTALLATION.md)** — Windows 10/11, Node veya Python bridge, Claude config, port, sorun giderme
|
|
184
225
|
- **[Plugin–MCP Bağlantı Rehberi](docs/PLUGIN-MCP-BAGLANTI.md)** (mimari, kurulum, sözleşmeler)
|
|
185
226
|
- **[Plugin Nasıl Çalışır?](docs/PLUGIN-NASIL-CALISIR.md)** (Worker/UI akışı, WebSocket vs CDP)
|
|
186
227
|
|
|
@@ -189,32 +230,36 @@ Plugin'in MCP ile nasıl konuştuğu, veri akışı, Design/Dev mode ve sorun gi
|
|
|
189
230
|
- `f-mcp-plugin/` – F-MCP ATezer Bridge plugin kaynağı (manifest, code.js, ui.html)
|
|
190
231
|
- `docs/` – Kurulum, mod karşılaştırma, [Plugin nasıl çalışır](docs/PLUGIN-NASIL-CALISIR.md), sorun giderme
|
|
191
232
|
- `src/` – MCP sunucusu (local, plugin-only, Cloudflare Worker)
|
|
233
|
+
- `python-bridge/` – **Python MCP bridge** (Node.js kurulumu olmayan ortamlar için); aynı WebSocket protokolü, port 5454
|
|
192
234
|
|
|
193
235
|
### Tüm dokümanlar (docs/)
|
|
194
236
|
|
|
195
237
|
|
|
196
|
-
| Dosya
|
|
197
|
-
|
|
|
198
|
-
| [ONBOARDING.md](docs/ONBOARDING.md)
|
|
199
|
-
| [
|
|
200
|
-
| [
|
|
201
|
-
| [PLUGIN-
|
|
202
|
-
| [
|
|
203
|
-
| [
|
|
204
|
-
| [
|
|
205
|
-
| [
|
|
206
|
-
| [
|
|
207
|
-
| [
|
|
208
|
-
| [
|
|
209
|
-
| [
|
|
210
|
-
| [
|
|
211
|
-
| [
|
|
212
|
-
| [
|
|
213
|
-
| [
|
|
214
|
-
| [
|
|
215
|
-
| [
|
|
216
|
-
| [
|
|
217
|
-
|
|
|
238
|
+
| Dosya | Açıklama |
|
|
239
|
+
| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
240
|
+
| [ONBOARDING.md](docs/ONBOARDING.md) | **Kurulum rehberi (Onboarding)** — Plugin yükle, Node.js, MCP başlat, Claude config |
|
|
241
|
+
| [WINDOWS-INSTALLATION.md](docs/WINDOWS-INSTALLATION.md) | **Windows kurulum** — Node veya Python bridge, Claude config (Windows yolu), port, sorun giderme |
|
|
242
|
+
| [SETUP.md](docs/SETUP.md) | Kurulum (Remote / Local) |
|
|
243
|
+
| [PLUGIN-MCP-BAGLANTI.md](docs/PLUGIN-MCP-BAGLANTI.md) | Plugin–MCP mimari ve kurulum |
|
|
244
|
+
| [PLUGIN-NASIL-CALISIR.md](docs/PLUGIN-NASIL-CALISIR.md) | Plugin Worker/UI akışı |
|
|
245
|
+
| [MODE_COMPARISON.md](docs/MODE_COMPARISON.md) | Mod karşılaştırma |
|
|
246
|
+
| [TOOLS.md](docs/TOOLS.md) | MCP araçları referansı |
|
|
247
|
+
| [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | **33 araç tam liste** (referans, Claude ile doğrulanmış) |
|
|
248
|
+
| [DEVELOPER_FIGMA_CAPABILITIES.md](docs/DEVELOPER_FIGMA_CAPABILITIES.md) | **Cursor + F-MCP:** Neyi alır/almaz, birebir çıkartma, code-ready/SUI/token referansı, ileride |
|
|
249
|
+
| [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | Sorun giderme |
|
|
250
|
+
| [NPX-INSTALLATION.md](docs/NPX-INSTALLATION.md) | NPX ile kurulum |
|
|
251
|
+
| [OAUTH_SETUP.md](docs/OAUTH_SETUP.md) | OAuth (remote sunucu) |
|
|
252
|
+
| [SELF_HOSTING.md](docs/SELF_HOSTING.md) | Kendi sunucunda host |
|
|
253
|
+
| [DEPLOYMENT_COMPARISON.md](docs/DEPLOYMENT_COMPARISON.md) | Dağıtım karşılaştırma |
|
|
254
|
+
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
255
|
+
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
256
|
+
| [RECONSTRUCTION_FORMAT.md](docs/RECONSTRUCTION_FORMAT.md) | Reconstruction format |
|
|
257
|
+
| [BITBUCKET-README.md](docs/BITBUCKET-README.md) | Bitbucket README şablonu |
|
|
258
|
+
| [PORT-5454-KAPALI.md](docs/PORT-5454-KAPALI.md) | Port 5454 kapalı sorun giderme |
|
|
259
|
+
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | **Çoklu kullanıcı** — Aynı anda birden fazla kişi (port 5454–5470) |
|
|
260
|
+
| [ENTERPRISE.md](docs/ENTERPRISE.md) | **Enterprise** — Audit log, air-gap, Organization plugin |
|
|
261
|
+
| [PUBLISH-PLUGIN.md](docs/PUBLISH-PLUGIN.md) | **Publish plugin** — Figma'da yayınlama: Data security cevapları, final details, Plugin ID |
|
|
262
|
+
| | |
|
|
218
263
|
|
|
219
264
|
|
|
220
265
|
## Yaygınlaştırma: Organization (private) plugin
|
|
@@ -224,18 +269,18 @@ Plugin'in MCP ile nasıl konuştuğu, veri akışı, Design/Dev mode ve sorun gi
|
|
|
224
269
|
**Avantajlar:**
|
|
225
270
|
|
|
226
271
|
- Herkesin "Import plugin from manifest" yapması gerekmez; plugin organizasyonun plugin listesinde görünür.
|
|
227
|
-
- Sadece **Plugins** menüsünden (veya Resources → Plugins) ekleyip çalıştırırlar; MCP bridge
|
|
272
|
+
- Sadece **Plugins** menüsünden (veya Resources → Plugins) ekleyip çalıştırırlar; MCP bridge'i (Claude config) kendi makinede kurmaları yeterli.
|
|
228
273
|
- Review süreci yok (private plugin); yayınladıktan kısa süre sonra kullanılabilir.
|
|
229
274
|
|
|
230
275
|
**Gereksinimler:**
|
|
231
276
|
|
|
232
277
|
- Figma **Organization** veya **Enterprise** planı ([Figma: Create private organization plugins](https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-organization-plugins)).
|
|
233
|
-
- Yayınlama: [Publish plugins](https://help.figma.com/hc/en-us/articles/360042293394) adımlarını izleyin; **Publish to** kısmında **organization
|
|
278
|
+
- 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).
|
|
234
279
|
|
|
235
|
-
**Özet:** Önce organization private plugin yapmak, "plugin
|
|
280
|
+
**Özet:** Önce organization private plugin yapmak, "plugin'i herkese tek tıkla ulaştırma" adımını çözer; MCP tarafında (Claude config, build, port) kurulum aynı kalır. Sonrasında isteğe bağlı olarak Community'e açmak veya self-host MCP ile tam entegrasyon düşünülebilir.
|
|
236
281
|
|
|
237
282
|
## Lisans ve Destek
|
|
238
283
|
|
|
239
|
-
- **Lisans:** MIT (bkz. [LICENSE](LICENSE))
|
|
284
|
+
- **Lisans:** MIT tabanlı, ek kısıt: ticari amaçlı kullanılmaz; sadece kişisel kullanım içindir (bkz. [LICENSE](LICENSE))
|
|
240
285
|
- **Sorun bildirimi:** [GitHub Issues](https://github.com/atezer/FMCP/issues)
|
|
241
286
|
|
|
@@ -105,18 +105,27 @@ export class FigmaDesktopConnector {
|
|
|
105
105
|
await this.page.evaluate((url) => {
|
|
106
106
|
console.log(`[DESKTOP_CONNECTOR] Checking frame: ${url}`);
|
|
107
107
|
}, frameUrl);
|
|
108
|
-
// Check if this frame
|
|
108
|
+
// Check if this frame is our plugin UI (cached data or refreshVariables for dynamic-page)
|
|
109
109
|
const hasData = await frame.evaluate('typeof window.__figmaVariablesData !== "undefined" && window.__figmaVariablesReady === true');
|
|
110
|
-
await
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
const hasRefresh = await frame.evaluate('typeof window.refreshVariables === "function"');
|
|
111
|
+
await this.page.evaluate((url, has, hasRef) => {
|
|
112
|
+
console.log(`[DESKTOP_CONNECTOR] Frame ${url} has variables data: ${has}, refreshVariables: ${hasRef}`);
|
|
113
|
+
}, frameUrl, hasData, hasRefresh);
|
|
114
|
+
if (hasData || hasRefresh) {
|
|
114
115
|
logger.info({ frameUrl }, 'Found frame with variables data');
|
|
115
116
|
await this.page.evaluate((url) => {
|
|
116
117
|
console.log(`[DESKTOP_CONNECTOR] ✅ SUCCESS! Found plugin UI with variables data: ${url}`);
|
|
117
118
|
}, frameUrl);
|
|
118
|
-
//
|
|
119
|
-
const result = await frame.evaluate(
|
|
119
|
+
// Refresh first (async API in plugin) so variables work in dynamic-page context, then get data
|
|
120
|
+
const result = (await frame.evaluate(() => new Promise((resolve, reject) => {
|
|
121
|
+
const win = globalThis;
|
|
122
|
+
if (typeof win.refreshVariables === 'function') {
|
|
123
|
+
win.refreshVariables().then(() => resolve(win.__figmaVariablesData)).catch(reject);
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
resolve(win.__figmaVariablesData);
|
|
127
|
+
}
|
|
128
|
+
})));
|
|
120
129
|
logger.info({
|
|
121
130
|
variableCount: result.variables?.length,
|
|
122
131
|
collectionCount: result.variableCollections?.length
|
|
@@ -135,8 +144,7 @@ export class FigmaDesktopConnector {
|
|
|
135
144
|
continue;
|
|
136
145
|
}
|
|
137
146
|
}
|
|
138
|
-
|
|
139
|
-
throw new Error('No plugin UI found with variables data. Make sure the Variables Exporter (Persistent) plugin is running.');
|
|
147
|
+
throw new Error('No plugin UI found with variables data. Make sure the F-MCP ATezer Bridge plugin is running.');
|
|
140
148
|
}
|
|
141
149
|
catch (error) {
|
|
142
150
|
logger.error({ error }, 'Failed to get variables from plugin UI');
|
|
@@ -702,16 +710,20 @@ export class FigmaDesktopConnector {
|
|
|
702
710
|
}
|
|
703
711
|
}
|
|
704
712
|
/**
|
|
705
|
-
* Get all local components for design system manifest generation
|
|
713
|
+
* Get all local components for design system manifest generation.
|
|
714
|
+
* Defaults to currentPageOnly: true to avoid timeout on large files (dynamic-page).
|
|
706
715
|
*/
|
|
707
|
-
async getLocalComponents() {
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
716
|
+
async getLocalComponents(opts) {
|
|
717
|
+
const currentPageOnly = opts?.currentPageOnly !== false;
|
|
718
|
+
const limit = opts?.limit ?? 0;
|
|
719
|
+
await this.page.evaluate((cp, lim) => {
|
|
720
|
+
console.log('[DESKTOP_CONNECTOR] getLocalComponents() called, currentPageOnly:', cp, 'limit:', lim);
|
|
721
|
+
}, currentPageOnly, limit);
|
|
722
|
+
logger.info({ currentPageOnly, limit }, 'Getting local components via plugin UI');
|
|
712
723
|
const frame = await this.findPluginUIFrame();
|
|
713
724
|
try {
|
|
714
|
-
|
|
725
|
+
// Runs in browser iframe; globalThis is the window there
|
|
726
|
+
const result = await frame.evaluate((cp, lim) => globalThis.getLocalComponents(cp, lim), currentPageOnly, limit);
|
|
715
727
|
logger.info({
|
|
716
728
|
success: result.success,
|
|
717
729
|
componentCount: result.data?.totalComponents,
|