@atezer/figma-mcp-bridge 1.1.1
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/LICENSE +21 -0
- package/README.md +241 -0
- package/dist/browser/base.d.ts +50 -0
- package/dist/browser/base.d.ts.map +1 -0
- package/dist/browser/base.js +6 -0
- package/dist/browser/base.js.map +1 -0
- package/dist/browser/local.d.ts +81 -0
- package/dist/browser/local.d.ts.map +1 -0
- package/dist/browser/local.js +283 -0
- package/dist/browser/local.js.map +1 -0
- package/dist/cloudflare/browser/base.js +5 -0
- package/dist/cloudflare/browser/cloudflare.js +156 -0
- package/dist/cloudflare/browser-manager.js +157 -0
- package/dist/cloudflare/core/audit-log.js +62 -0
- package/dist/cloudflare/core/config.js +163 -0
- package/dist/cloudflare/core/console-monitor.js +427 -0
- package/dist/cloudflare/core/design-system-manifest.js +260 -0
- package/dist/cloudflare/core/enrichment/enrichment-service.js +272 -0
- package/dist/cloudflare/core/enrichment/index.js +7 -0
- package/dist/cloudflare/core/enrichment/relationship-mapper.js +351 -0
- package/dist/cloudflare/core/enrichment/style-resolver.js +326 -0
- package/dist/cloudflare/core/figma-api.js +273 -0
- package/dist/cloudflare/core/figma-desktop-connector.js +1029 -0
- package/dist/cloudflare/core/figma-reconstruction-spec.js +402 -0
- package/dist/cloudflare/core/figma-style-extractor.js +311 -0
- package/dist/cloudflare/core/figma-tools.js +2883 -0
- package/dist/cloudflare/core/logger.js +53 -0
- package/dist/cloudflare/core/plugin-bridge-connector.js +154 -0
- package/dist/cloudflare/core/plugin-bridge-server.js +174 -0
- package/dist/cloudflare/core/snippet-injector.js +96 -0
- package/dist/cloudflare/core/types/enriched.js +5 -0
- package/dist/cloudflare/core/types/index.js +4 -0
- package/dist/cloudflare/index.js +1061 -0
- package/dist/cloudflare/test-browser.js +88 -0
- package/dist/core/audit-log.d.ts +26 -0
- package/dist/core/audit-log.d.ts.map +1 -0
- package/dist/core/audit-log.js +63 -0
- package/dist/core/audit-log.js.map +1 -0
- package/dist/core/config.d.ts +17 -0
- package/dist/core/config.d.ts.map +1 -0
- package/dist/core/config.js +164 -0
- package/dist/core/config.js.map +1 -0
- package/dist/core/console-monitor.d.ts +82 -0
- package/dist/core/console-monitor.d.ts.map +1 -0
- package/dist/core/console-monitor.js +428 -0
- package/dist/core/console-monitor.js.map +1 -0
- package/dist/core/design-system-manifest.d.ts +272 -0
- package/dist/core/design-system-manifest.d.ts.map +1 -0
- package/dist/core/design-system-manifest.js +261 -0
- package/dist/core/design-system-manifest.js.map +1 -0
- package/dist/core/enrichment/enrichment-service.d.ts +52 -0
- package/dist/core/enrichment/enrichment-service.d.ts.map +1 -0
- package/dist/core/enrichment/enrichment-service.js +273 -0
- package/dist/core/enrichment/enrichment-service.js.map +1 -0
- package/dist/core/enrichment/index.d.ts +8 -0
- package/dist/core/enrichment/index.d.ts.map +1 -0
- package/dist/core/enrichment/index.js +8 -0
- package/dist/core/enrichment/index.js.map +1 -0
- package/dist/core/enrichment/relationship-mapper.d.ts +106 -0
- package/dist/core/enrichment/relationship-mapper.d.ts.map +1 -0
- package/dist/core/enrichment/relationship-mapper.js +352 -0
- package/dist/core/enrichment/relationship-mapper.js.map +1 -0
- package/dist/core/enrichment/style-resolver.d.ts +80 -0
- package/dist/core/enrichment/style-resolver.d.ts.map +1 -0
- package/dist/core/enrichment/style-resolver.js +327 -0
- package/dist/core/enrichment/style-resolver.js.map +1 -0
- package/dist/core/figma-api.d.ts +137 -0
- package/dist/core/figma-api.d.ts.map +1 -0
- package/dist/core/figma-api.js +274 -0
- package/dist/core/figma-api.js.map +1 -0
- package/dist/core/figma-desktop-connector.d.ts +238 -0
- package/dist/core/figma-desktop-connector.d.ts.map +1 -0
- package/dist/core/figma-desktop-connector.js +1030 -0
- package/dist/core/figma-desktop-connector.js.map +1 -0
- package/dist/core/figma-reconstruction-spec.d.ts +166 -0
- package/dist/core/figma-reconstruction-spec.d.ts.map +1 -0
- package/dist/core/figma-reconstruction-spec.js +403 -0
- package/dist/core/figma-reconstruction-spec.js.map +1 -0
- package/dist/core/figma-style-extractor.d.ts +76 -0
- package/dist/core/figma-style-extractor.d.ts.map +1 -0
- package/dist/core/figma-style-extractor.js +312 -0
- package/dist/core/figma-style-extractor.js.map +1 -0
- package/dist/core/figma-tools.d.ts +21 -0
- package/dist/core/figma-tools.d.ts.map +1 -0
- package/dist/core/figma-tools.js +2884 -0
- package/dist/core/figma-tools.js.map +1 -0
- package/dist/core/logger.d.ts +22 -0
- package/dist/core/logger.d.ts.map +1 -0
- package/dist/core/logger.js +54 -0
- package/dist/core/logger.js.map +1 -0
- package/dist/core/plugin-bridge-connector.d.ts +133 -0
- package/dist/core/plugin-bridge-connector.d.ts.map +1 -0
- package/dist/core/plugin-bridge-connector.js +155 -0
- package/dist/core/plugin-bridge-connector.js.map +1 -0
- package/dist/core/plugin-bridge-server.d.ts +42 -0
- package/dist/core/plugin-bridge-server.d.ts.map +1 -0
- package/dist/core/plugin-bridge-server.js +175 -0
- package/dist/core/plugin-bridge-server.js.map +1 -0
- package/dist/core/snippet-injector.d.ts +24 -0
- package/dist/core/snippet-injector.d.ts.map +1 -0
- package/dist/core/snippet-injector.js +97 -0
- package/dist/core/snippet-injector.js.map +1 -0
- package/dist/core/types/enriched.d.ts +213 -0
- package/dist/core/types/enriched.d.ts.map +1 -0
- package/dist/core/types/enriched.js +6 -0
- package/dist/core/types/enriched.js.map +1 -0
- package/dist/core/types/index.d.ts +116 -0
- package/dist/core/types/index.d.ts.map +1 -0
- package/dist/core/types/index.js +5 -0
- package/dist/core/types/index.js.map +1 -0
- package/dist/local-plugin-only.d.ts +13 -0
- package/dist/local-plugin-only.d.ts.map +1 -0
- package/dist/local-plugin-only.js +567 -0
- package/dist/local-plugin-only.js.map +1 -0
- package/dist/local.d.ts +73 -0
- package/dist/local.d.ts.map +1 -0
- package/dist/local.js +2466 -0
- package/dist/local.js.map +1 -0
- package/f-mcp-plugin/README.md +280 -0
- package/f-mcp-plugin/code.js +2222 -0
- package/f-mcp-plugin/manifest.json +14 -0
- package/f-mcp-plugin/ui.html +877 -0
- package/package.json +82 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 F-MCP ATezer (Figma MCP Bridge) Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
# F-MCP (Figma MCP Bridge)
|
|
2
|
+
|
|
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’i. Bu repo MCP sunucusu ve **F-MCP Bridge** Figma plugin kaynağını içerir.
|
|
4
|
+
|
|
5
|
+
### Figma API token tüketmiyor
|
|
6
|
+
|
|
7
|
+
figma-mcp-bridge, Figma'nın **REST API'sini kullanmıyor**. Akış:
|
|
8
|
+
|
|
9
|
+
**Claude (MCP) → figma-mcp-bridge → Plugin → Figma Desktop (yerel)**
|
|
10
|
+
|
|
11
|
+
Sorgular doğrudan Figma masaüstü uygulaması içinde çalışan plugin üzerinden gider. Bu sayede:
|
|
12
|
+
|
|
13
|
+
- Figma API token tüketimi **yok** (REST API hiç çağrılmıyor)
|
|
14
|
+
- Rate limit yok
|
|
15
|
+
- Figma tarafında ücretlendirme yok
|
|
16
|
+
- İnternet bağlantısı gerekmez (yerel plugin)
|
|
17
|
+
|
|
18
|
+
**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
|
+
|
|
20
|
+
### Zero Trust
|
|
21
|
+
|
|
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 (yerel). 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
|
+
|
|
24
|
+
### Kurumlar için özet (C-level / sunum)
|
|
25
|
+
|
|
26
|
+
- **Debug modu kapalı.** Figma’yı normal açarsınız; ekstra debug portu veya geliştirici ayarı gerekmez.
|
|
27
|
+
- **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
|
+
- **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
|
+
|
|
30
|
+
## F-MCP yetenekleri
|
|
31
|
+
|
|
32
|
+
**32 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
|
+
|
|
34
|
+
### Ürün yöneticileri (analiz, kabul kriterleri, kurumsal süreçler)
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
| Kullanım | Araçlar | Açıklama |
|
|
38
|
+
| --------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
|
39
|
+
| Tasarım envanteri ve analiz | `figma_get_design_system_summary`, `figma_get_file_data` | Sayfa/yapı özeti, bileşen sayıları, token koleksiyonları |
|
|
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
|
+
|
|
44
|
+
|
|
45
|
+
### Geliştiriciler
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
| Kullanım | Araçlar | Açıklama |
|
|
49
|
+
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
|
|
50
|
+
| 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 |
|
|
51
|
+
| Token ve stil kodu | `figma_get_variables`, `figma_get_styles` | Değişkenler ve stiller (CSS/Tailwind/TS export) |
|
|
52
|
+
| Dosya yapısı | `figma_get_file_data` | Layer hiyerarşisi (depth/verbosity) |
|
|
53
|
+
| Ç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
|
+
|
|
55
|
+
|
|
56
|
+
### DesignOps ve tasarımcılar
|
|
57
|
+
|
|
58
|
+
|
|
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, arama, variant set düzeni, dokümantasyon |
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
Kurulum: **[Kurulum rehberi (Onboarding)](docs/ONBOARDING.md)**.
|
|
67
|
+
|
|
68
|
+
## Hızlı başlangıç
|
|
69
|
+
|
|
70
|
+
Plugin'in "ready" olması için **önce** MCP bridge sunucusu (varsayılan port 5454) çalışıyor olmalı; **sonra** Figma'da plugin'i açarsınız. Çoklu kullanıcı için port 5454–5470 arası seçilebilir; bkz. [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md).
|
|
71
|
+
|
|
72
|
+
### 1. MCP bridge’i başlatın
|
|
73
|
+
|
|
74
|
+
Proje klasöründe:
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
cd <proje-yolu> # clone ettiğiniz proje klasörü (örn. f-mcp-bridge)
|
|
78
|
+
npm install
|
|
79
|
+
npm run dev:local
|
|
80
|
+
```
|
|
81
|
+
|
|
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
|
+
### 2. Plugin’i Figma’da yükleyin (ilk seferde)
|
|
85
|
+
|
|
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
|
+
|
|
91
|
+
### 3. Plugin’i çalıştırın
|
|
92
|
+
|
|
93
|
+
1. **Plugins** → **Development** → **F-MCP ATezer Bridge**
|
|
94
|
+
2. Birkaç saniye içinde:
|
|
95
|
+
- **Yeşil nokta + "ready"** → Bağlantı tamam.
|
|
96
|
+
- **Kırmızı + "no server"** → Bridge çalışmıyor; 1. adımda `npm run dev:local` ile başlatıp tekrar deneyin.
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
| Sıra | Yapılacak |
|
|
100
|
+
| ---- | -------------------------------------------------------- |
|
|
101
|
+
| 1 | `npm run dev:local` (terminal açık kalsın) |
|
|
102
|
+
| 2 | Figma’da Plugins → Development → F-MCP ATezer Bridge |
|
|
103
|
+
| 3 | "ready" görününce Cursor/Claude üzerinden MCP kullanılır |
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Claude ile bağlama
|
|
109
|
+
|
|
110
|
+
### 1. Build (bir kez)
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
npm run build:local
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 2. Claude Desktop config
|
|
117
|
+
|
|
118
|
+
Config (macOS): `**~/Library/Application Support/Claude/claude_desktop_config.json**`
|
|
119
|
+
|
|
120
|
+
**Plugin-only (önerilen):**
|
|
121
|
+
|
|
122
|
+
```json
|
|
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
|
+
```
|
|
132
|
+
|
|
133
|
+
**Permission denied alırsanız** — `bash -c` ile proje dizininden çalıştırın:
|
|
134
|
+
|
|
135
|
+
```json
|
|
136
|
+
"figma-mcp-bridge": {
|
|
137
|
+
"command": "bash",
|
|
138
|
+
"args": ["-c", "cd <BU-REPONUN-TAM-YOLU> && exec node dist/local-plugin-only.js"]
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
**Tam mod (console/screenshot):**
|
|
143
|
+
|
|
144
|
+
```json
|
|
145
|
+
"figma-mcp-bridge": {
|
|
146
|
+
"command": "node",
|
|
147
|
+
"args": ["<BU-REPONUN-TAM-YOLU>/dist/local.js"]
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
`<BU-REPONUN-TAM-YOLU>` yerine proje klasörünün tam yolunu yazın (örn. `/Users/.../f-mcp-bridge`).
|
|
152
|
+
|
|
153
|
+
**NPX:** Paket şu an npm'de yayınlı değil; ileride yayınlandığında `npx figma-mcp-bridge` ile kullanılabilir. Bkz. [NPX-INSTALLATION.md](docs/NPX-INSTALLATION.md). Kurulum için Git clone + `npm run build:local` kullanın.
|
|
154
|
+
|
|
155
|
+
### 3. Sıra
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
| Plugin-only | Tam mod |
|
|
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 |
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
**"Server disconnected"** olursa: (1) Port 5454 kapalı olmalı — `lsof -i :5454` ile bakın, `kill <PID>` ile kapatın. (2) **"Permission denied"** script için: config'te script yerine `bash -c` kullanın (aşağıdaki örnek). (3) Build: `npm run build:local`.
|
|
167
|
+
|
|
168
|
+
**Çoklu kullanıcı (multi-instance):** Aynı anda birden fazla kişi kullanacaksa her kullanıcı farklı port (5454, 5455, … 5470) kullanır; MCP için `FIGMA_PLUGIN_BRIDGE_PORT=5455` vb., plugin’de ise Port alanından aynı port seçilir. Detay: [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md).
|
|
169
|
+
|
|
170
|
+
**Enterprise:** Audit log (`FIGMA_MCP_AUDIT_LOG_PATH`), air-gap kurulum ve Organization plugin: [ENTERPRISE.md](docs/ENTERPRISE.md).
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## Design / Dev Mode
|
|
175
|
+
|
|
176
|
+
**Design seat olmayan, sadece Dev Mode erişimi olan kullanıcılar da bu MCP'yi kullanabilir.** Plugin hem Design hem Dev Mode'da çalışır (`editorType: ["figma", "dev"]`). MCP bağlantısı için mod farkı engel değildir. **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. Detay: [ONBOARDING.md](docs/ONBOARDING.md) (Dev Mode bölümü).
|
|
177
|
+
|
|
178
|
+
**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
|
+
|
|
180
|
+
## Detaylı Rehber
|
|
181
|
+
|
|
182
|
+
Plugin'in MCP ile nasıl konuştuğu, veri akışı, Design/Dev mode ve sorun giderme için:
|
|
183
|
+
|
|
184
|
+
- **[Plugin–MCP Bağlantı Rehberi](docs/PLUGIN-MCP-BAGLANTI.md)** (mimari, kurulum, sözleşmeler)
|
|
185
|
+
- **[Plugin Nasıl Çalışır?](docs/PLUGIN-NASIL-CALISIR.md)** (Worker/UI akışı, WebSocket vs CDP)
|
|
186
|
+
|
|
187
|
+
## Repo İçeriği
|
|
188
|
+
|
|
189
|
+
- `f-mcp-plugin/` – F-MCP ATezer Bridge plugin kaynağı (manifest, code.js, ui.html)
|
|
190
|
+
- `docs/` – Kurulum, mod karşılaştırma, [Plugin nasıl çalışır](docs/PLUGIN-NASIL-CALISIR.md), sorun giderme
|
|
191
|
+
- `src/` – MCP sunucusu (local, plugin-only, Cloudflare Worker)
|
|
192
|
+
|
|
193
|
+
### Tüm dokümanlar (docs/)
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
| Dosya | Açıklama |
|
|
197
|
+
| --------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
198
|
+
| [ONBOARDING.md](docs/ONBOARDING.md) | **Kurulum rehberi (Onboarding)** — Plugin yükle, Node.js, MCP başlat, Claude config |
|
|
199
|
+
| [SETUP.md](docs/SETUP.md) | Kurulum (Remote / Local) |
|
|
200
|
+
| [PLUGIN-MCP-BAGLANTI.md](docs/PLUGIN-MCP-BAGLANTI.md) | Plugin–MCP mimari ve kurulum |
|
|
201
|
+
| [PLUGIN-NASIL-CALISIR.md](docs/PLUGIN-NASIL-CALISIR.md) | Plugin Worker/UI akışı |
|
|
202
|
+
| [MODE_COMPARISON.md](docs/MODE_COMPARISON.md) | Mod karşılaştırma |
|
|
203
|
+
| [TOOLS.md](docs/TOOLS.md) | MCP araçları referansı |
|
|
204
|
+
| [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | **32 araç tam liste** (referans, Claude ile doğrulanmış) |
|
|
205
|
+
| [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | Sorun giderme |
|
|
206
|
+
| [NPX-INSTALLATION.md](docs/NPX-INSTALLATION.md) | NPX ile kurulum |
|
|
207
|
+
| [OAUTH_SETUP.md](docs/OAUTH_SETUP.md) | OAuth (remote sunucu) |
|
|
208
|
+
| [SELF_HOSTING.md](docs/SELF_HOSTING.md) | Kendi sunucunda host |
|
|
209
|
+
| [DEPLOYMENT_COMPARISON.md](docs/DEPLOYMENT_COMPARISON.md) | Dağıtım karşılaştırma |
|
|
210
|
+
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
211
|
+
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
212
|
+
| [RECONSTRUCTION_FORMAT.md](docs/RECONSTRUCTION_FORMAT.md) | Reconstruction format |
|
|
213
|
+
| [BITBUCKET-README.md](docs/BITBUCKET-README.md) | Bitbucket README şablonu |
|
|
214
|
+
| [PORT-5454-KAPALI.md](docs/PORT-5454-KAPALI.md) | Port 5454 kapalı sorun giderme |
|
|
215
|
+
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | **Çoklu kullanıcı** — Aynı anda birden fazla kişi (port 5454–5470) |
|
|
216
|
+
| [ENTERPRISE.md](docs/ENTERPRISE.md) | **Enterprise** — Audit log, air-gap, Organization plugin |
|
|
217
|
+
| | |
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
## Yaygınlaştırma: Organization (private) plugin
|
|
221
|
+
|
|
222
|
+
Çalışma biçimini ekip/organizasyon içinde kolaylaştırmak için **Figma Organization private plugin** olarak yayınlamak mantıklı bir ilk adım. Enterprise odaklı özellikler (audit log, air-gap, org plugin detayı): [ENTERPRISE.md](docs/ENTERPRISE.md).
|
|
223
|
+
|
|
224
|
+
**Avantajlar:**
|
|
225
|
+
|
|
226
|
+
- 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’i (Claude config veya `npm run dev:local`) kendi makinede kurmaları yeterli.
|
|
228
|
+
- Review süreci yok (private plugin); yayınladıktan kısa süre sonra kullanılabilir.
|
|
229
|
+
|
|
230
|
+
**Gereksinimler:**
|
|
231
|
+
|
|
232
|
+
- 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**’ı seçin (Community değil).
|
|
234
|
+
|
|
235
|
+
**Ö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
|
+
|
|
237
|
+
## Lisans ve Destek
|
|
238
|
+
|
|
239
|
+
- **Lisans:** MIT (bkz. [LICENSE](LICENSE))
|
|
240
|
+
- **Sorun bildirimi:** [GitHub Issues](https://github.com/atezer/FMCP/issues)
|
|
241
|
+
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Browser Manager Interface
|
|
3
|
+
* Abstract interface for browser automation across different runtimes
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Browser Manager Interface
|
|
7
|
+
* Provides unified API for browser automation regardless of runtime (Cloudflare/Local)
|
|
8
|
+
*
|
|
9
|
+
* Note: Uses 'any' for Page type to support both puppeteer-core and @cloudflare/puppeteer
|
|
10
|
+
* implementations which have incompatible type definitions but compatible runtime behavior
|
|
11
|
+
*/
|
|
12
|
+
export interface IBrowserManager {
|
|
13
|
+
/**
|
|
14
|
+
* Launch or connect to browser instance
|
|
15
|
+
*/
|
|
16
|
+
launch(): Promise<void>;
|
|
17
|
+
/**
|
|
18
|
+
* Get active page instance
|
|
19
|
+
*/
|
|
20
|
+
getPage(): Promise<any>;
|
|
21
|
+
/**
|
|
22
|
+
* Navigate to Figma URL
|
|
23
|
+
*/
|
|
24
|
+
navigateToFigma(url?: string): Promise<any>;
|
|
25
|
+
/**
|
|
26
|
+
* Reload current page
|
|
27
|
+
*/
|
|
28
|
+
reload(hardReload?: boolean): Promise<void>;
|
|
29
|
+
/**
|
|
30
|
+
* Evaluate JavaScript in page context
|
|
31
|
+
*/
|
|
32
|
+
evaluate<T>(fn: () => T): Promise<T>;
|
|
33
|
+
/**
|
|
34
|
+
* Check if browser is running
|
|
35
|
+
*/
|
|
36
|
+
isRunning(): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Close browser instance
|
|
39
|
+
*/
|
|
40
|
+
close(): Promise<void>;
|
|
41
|
+
/**
|
|
42
|
+
* Get current URL
|
|
43
|
+
*/
|
|
44
|
+
getCurrentUrl(): string | null;
|
|
45
|
+
/**
|
|
46
|
+
* Wait for navigation to complete
|
|
47
|
+
*/
|
|
48
|
+
waitForNavigation(timeout?: number): Promise<void>;
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=base.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/browser/base.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAExB;;OAEG;IACH,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IAE5C;;OAEG;IACH,MAAM,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5C;;OAEG;IACH,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAKrC;;OAEG;IACH,SAAS,IAAI,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB;;OAEG;IACH,aAAa,IAAI,MAAM,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/browser/base.ts"],"names":[],"mappings":"AAAA;;;GAGG"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Local Browser Manager
|
|
3
|
+
* Connects to Figma Desktop via Chrome Remote Debugging Protocol
|
|
4
|
+
*/
|
|
5
|
+
import { type Page } from 'puppeteer-core';
|
|
6
|
+
import type { IBrowserManager } from './base.js';
|
|
7
|
+
/**
|
|
8
|
+
* Local browser configuration
|
|
9
|
+
*/
|
|
10
|
+
export interface LocalBrowserConfig {
|
|
11
|
+
debugPort: number;
|
|
12
|
+
debugHost: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Local Browser Manager
|
|
16
|
+
* Connects to existing Figma Desktop instance via remote debugging port
|
|
17
|
+
*/
|
|
18
|
+
export declare class LocalBrowserManager implements IBrowserManager {
|
|
19
|
+
private browser;
|
|
20
|
+
private page;
|
|
21
|
+
private config;
|
|
22
|
+
constructor(config: LocalBrowserConfig);
|
|
23
|
+
/**
|
|
24
|
+
* Connect to Figma Desktop via remote debugging port
|
|
25
|
+
*/
|
|
26
|
+
launch(): Promise<void>;
|
|
27
|
+
/**
|
|
28
|
+
* Find the best page for plugin debugging
|
|
29
|
+
* Actively searches for pages with workers across ALL tabs
|
|
30
|
+
*/
|
|
31
|
+
private findBestPage;
|
|
32
|
+
/**
|
|
33
|
+
* Get active Figma page or create new one
|
|
34
|
+
* Prefers pages with active plugin workers for plugin debugging
|
|
35
|
+
*/
|
|
36
|
+
getPage(): Promise<Page>;
|
|
37
|
+
/**
|
|
38
|
+
* Navigate to Figma URL
|
|
39
|
+
*/
|
|
40
|
+
navigateToFigma(figmaUrl?: string): Promise<Page>;
|
|
41
|
+
/**
|
|
42
|
+
* Reload current page
|
|
43
|
+
*/
|
|
44
|
+
reload(hardReload?: boolean): Promise<void>;
|
|
45
|
+
/**
|
|
46
|
+
* Execute JavaScript in page context
|
|
47
|
+
*/
|
|
48
|
+
evaluate<T>(fn: () => T): Promise<T>;
|
|
49
|
+
/**
|
|
50
|
+
* Check if browser is connected
|
|
51
|
+
*/
|
|
52
|
+
isRunning(): boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Disconnect from browser (doesn't close Figma Desktop)
|
|
55
|
+
*/
|
|
56
|
+
close(): Promise<void>;
|
|
57
|
+
/**
|
|
58
|
+
* Get current page URL
|
|
59
|
+
*/
|
|
60
|
+
getCurrentUrl(): string | null;
|
|
61
|
+
/**
|
|
62
|
+
* Check if the browser connection is still alive
|
|
63
|
+
* Returns false if connection is stale (e.g., after computer sleep)
|
|
64
|
+
*/
|
|
65
|
+
isConnectionAlive(): Promise<boolean>;
|
|
66
|
+
/**
|
|
67
|
+
* Reconnect to Figma Desktop if connection was lost
|
|
68
|
+
* Call this before any operation that requires a live connection
|
|
69
|
+
*/
|
|
70
|
+
ensureConnection(): Promise<void>;
|
|
71
|
+
/**
|
|
72
|
+
* Force a complete reconnection to Figma Desktop
|
|
73
|
+
* Use this when frames become detached or stale even though the browser appears connected
|
|
74
|
+
*/
|
|
75
|
+
forceReconnect(): Promise<void>;
|
|
76
|
+
/**
|
|
77
|
+
* Wait for navigation
|
|
78
|
+
*/
|
|
79
|
+
waitForNavigation(timeout?: number): Promise<void>;
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=local.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"local.d.ts","sourceRoot":"","sources":["../../src/browser/local.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAkB,EAAgB,KAAK,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIjD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,YAAW,eAAe;IAC1D,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,MAAM,CAAqB;gBAEvB,MAAM,EAAE,kBAAkB;IAItC;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IA2C7B;;;OAGG;YACW,YAAY;IA4C1B;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC9B;;OAEG;IACG,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAyBvD;;OAEG;IACG,MAAM,CAAC,UAAU,UAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAoB/C;;OAEG;IACG,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAQ1C;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB5B;;OAEG;IACH,aAAa,IAAI,MAAM,GAAG,IAAI;IAQ9B;;;OAGG;IACG,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC;IAe3C;;;OAGG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAgBvC;;;OAGG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAqBrC;;OAEG;IACG,iBAAiB,CAAC,OAAO,SAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;CAUvD"}
|