@atezer/figma-mcp-bridge 1.6.3 → 1.6.5
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 +139 -279
- 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/f-mcp-plugin/ui.html +25 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,128 +4,40 @@
|
|
|
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.3**) |
|
|
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ı).
|
|
13
|
+
```
|
|
14
|
+
Siz (Claude/Cursor) → F-MCP Bridge → Figma Plugin → Figma dosyanız
|
|
15
|
+
```
|
|
108
16
|
|
|
109
|
-
|
|
17
|
+
Her şey **bilgisayarınızda** kalır. Tasarım verileriniz internete gönderilmez.
|
|
110
18
|
|
|
111
|
-
|
|
19
|
+
## Öne çıkan özellikler
|
|
112
20
|
|
|
113
|
-
|
|
21
|
+
- **46 araç** — okuma, yazma, export, variable yönetimi, bileşen arama ve daha fazlası
|
|
22
|
+
- **Figma API token tüketmez\*** — Varsayılan olarak plugin üzerinden çalışır, Figma API kotanızı 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** — İsteğe bağlı token ile yorum okuma, versiyon geçmişi, görsel export
|
|
28
|
+
- **Figma Desktop + Tarayıcı** — Her ikisinde de çalışır
|
|
114
29
|
|
|
115
|
-
|
|
30
|
+
> \* **REST API isteğe bağlıdır.** Temel araçlar (okuma, yazma, export, variable) token olmadan plugin üzerinden çalışır. Yorum okuma, versiyon geçmişi gibi ek özellikler için Figma API token'ı ekleyebilirsiniz — plugin'deki Advanced panelinden girin, kalan API limitinizi plugin üzerinde takip edin.
|
|
116
31
|
|
|
117
|
-
|
|
32
|
+
## Hızlı başlangıç (3 adım)
|
|
118
33
|
|
|
34
|
+
### 1. Node.js kurun
|
|
119
35
|
|
|
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. |
|
|
36
|
+
[nodejs.org](https://nodejs.org) adresinden LTS sürümünü indirip kurun.
|
|
126
37
|
|
|
38
|
+
### 2. AI aracınıza config ekleyin
|
|
127
39
|
|
|
128
|
-
**Cursor** — Proje kökünde
|
|
40
|
+
**Cursor** — Proje kökünde `.cursor/mcp.json` dosyası oluşturun:
|
|
129
41
|
|
|
130
42
|
```json
|
|
131
43
|
{
|
|
@@ -138,7 +50,7 @@ Repo klonlamadan, sadece Node.js ve tek bir config ile kurulum. **NPX güncellem
|
|
|
138
50
|
}
|
|
139
51
|
```
|
|
140
52
|
|
|
141
|
-
**Claude Desktop** — macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
53
|
+
**Claude Desktop** — Config dosyasını açın (macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`):
|
|
142
54
|
|
|
143
55
|
```json
|
|
144
56
|
{
|
|
@@ -151,215 +63,163 @@ Repo klonlamadan, sadece Node.js ve tek bir config ile kurulum. **NPX güncellem
|
|
|
151
63
|
}
|
|
152
64
|
```
|
|
153
65
|
|
|
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.
|
|
66
|
+
### 3. Figma'da plugin'i açın
|
|
207
67
|
|
|
208
|
-
|
|
68
|
+
1. Cursor veya Claude Desktop'ı yeniden başlatın
|
|
69
|
+
2. Figma'yı açın → **Plugins** → **F-MCP ATezer Bridge**
|
|
70
|
+
3. Plugin'de **"ready (:5454)"** yazısını görene kadar bekleyin
|
|
71
|
+
4. Artık AI aracınız Figma'ya bağlı!
|
|
209
72
|
|
|
210
|
-
|
|
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.
|
|
73
|
+
> **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.
|
|
214
74
|
|
|
215
|
-
|
|
75
|
+
## 46 araçla neler yapabilirsiniz?
|
|
216
76
|
|
|
77
|
+
### Tasarımcılar için
|
|
217
78
|
|
|
218
|
-
|
|
|
219
|
-
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
79
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
80
|
+
|-------------------|---------|
|
|
81
|
+
| Dosya yapısını görme | `figma_get_file_data`, `figma_get_design_context` |
|
|
82
|
+
| Bileşen bulma ve inceleme | `figma_search_components`, `figma_get_component` |
|
|
83
|
+
| Screenshot alma | `figma_capture_screenshot` |
|
|
84
|
+
| SVG/PNG export | `figma_export_nodes` (toplu, vektörel) |
|
|
85
|
+
| Yeni tasarım elemanı oluşturma | `figma_create_frame`, `figma_create_text`, `figma_create_rectangle`, `figma_create_group` |
|
|
86
|
+
| Variable ve token yönetimi | `figma_get_variables`, `figma_create_variable`, `figma_update_variable` |
|
|
87
|
+
| Design system özeti | `figma_get_design_system_summary`, `figma_get_token_browser` |
|
|
88
|
+
| Takım kütüphanesi arama | `figma_search_assets` |
|
|
224
89
|
|
|
90
|
+
### Geliştiriciler için
|
|
225
91
|
|
|
226
|
-
|
|
92
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
93
|
+
|-------------------|---------|
|
|
94
|
+
| Bileşen detayı + görsel | `figma_get_component_for_development`, `figma_get_component_image` |
|
|
95
|
+
| Token ve stil çıkarma | `figma_get_variables`, `figma_get_styles` |
|
|
96
|
+
| Instance oluşturma | `figma_instantiate_component`, `figma_set_instance_properties` |
|
|
97
|
+
| Kod çalıştırma | `figma_execute` (Figma Plugin API ile doğrudan JS) |
|
|
98
|
+
| Konsol izleme | `figma_get_console_logs`, `figma_watch_console` |
|
|
227
99
|
|
|
228
|
-
|
|
100
|
+
### DesignOps için
|
|
229
101
|
|
|
230
|
-
|
|
102
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
103
|
+
|-------------------|---------|
|
|
104
|
+
| Design-code uyumu kontrolü | `figma_check_design_parity` |
|
|
105
|
+
| Toplu token oluşturma | `figma_setup_design_tokens`, `figma_batch_create_variables` |
|
|
106
|
+
| Variable CRUD (oluştur/güncelle/sil) | Tam variable yönetim seti (12 araç) |
|
|
107
|
+
| Bileşen variant yönetimi | `figma_arrange_component_set`, `figma_set_description` |
|
|
231
108
|
|
|
232
|
-
|
|
109
|
+
### REST API (isteğe bağlı, token gerektirir)
|
|
233
110
|
|
|
234
|
-
|
|
111
|
+
| Ne yapabilirsiniz | Araçlar |
|
|
112
|
+
|-------------------|---------|
|
|
113
|
+
| Token girişi | `figma_set_rest_token` (plugin UI'dan veya AI aracından) |
|
|
114
|
+
| API çağrısı | `figma_rest_api` (yorumlar, versiyonlar, görsel export) |
|
|
115
|
+
| Limit takibi | `figma_get_rest_token_status` |
|
|
116
|
+
| Bağlantı durumu | `figma_plugin_diagnostics` |
|
|
235
117
|
|
|
236
|
-
|
|
118
|
+
Tam araç listesi: [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | Detaylı referans: [TOOLS.md](docs/TOOLS.md)
|
|
237
119
|
|
|
238
|
-
|
|
120
|
+
## Claude + Cursor aynı anda kullanma
|
|
239
121
|
|
|
240
|
-
|
|
122
|
+
Her iki araç da varsayılan 5454 portunu kullanır. İlk açılan portu alır, ikincisi için:
|
|
241
123
|
|
|
242
|
-
|
|
124
|
+
1. AI aracına "port 5456 kullan" deyin → `figma_set_port(5456)` çalışır
|
|
125
|
+
2. Figma plugin'de portu **5456** yapın
|
|
126
|
+
3. Her iki araç aynı anda bağımsız çalışır
|
|
243
127
|
|
|
244
|
-
|
|
128
|
+
Ya da config'te önceden farklı port belirleyin:
|
|
245
129
|
|
|
246
|
-
|
|
247
|
-
|
|
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.
|
|
130
|
+
```json
|
|
131
|
+
"env": { "FIGMA_PLUGIN_BRIDGE_PORT": "5455" }
|
|
132
|
+
```
|
|
285
133
|
|
|
286
|
-
|
|
134
|
+
## Çoklu dosya desteği
|
|
287
135
|
|
|
288
|
-
|
|
136
|
+
Aynı anda birden fazla Figma/FigJam dosyasında plugin'i açabilirsiniz:
|
|
289
137
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
138
|
+
- **Figma Desktop** — tasarım dosyası
|
|
139
|
+
- **Figma Browser** — tarayıcıda figma.com
|
|
140
|
+
- **FigJam** — whiteboard/diyagram
|
|
293
141
|
|
|
294
|
-
|
|
295
|
-
// Bağlı dosyaları listele
|
|
296
|
-
figma_list_connected_files
|
|
142
|
+
Hangi linki verirseniz, AI o dosyaya yönlendirilir. `figma_list_connected_files` ile bağlı dosyaları görebilirsiniz.
|
|
297
143
|
|
|
298
|
-
|
|
299
|
-
figma_get_design_context { "figmaUrl": "https://www.figma.com/board/XYZ/...", "depth": 2 }
|
|
144
|
+
## Plugin durum göstergeleri
|
|
300
145
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
146
|
+
| Plugin'de ne görüyorsunuz | Anlamı |
|
|
147
|
+
|---------------------------|--------|
|
|
148
|
+
| `ready (:5454)` | Bağlantı kuruldu, kullanmaya hazır |
|
|
149
|
+
| `connecting...` | Bağlanmaya çalışıyor |
|
|
150
|
+
| `no server` | AI aracı çalışmıyor veya port uyuşmuyor |
|
|
151
|
+
| `wrong server` | Farklı bir sunucuya bağlandı |
|
|
304
152
|
|
|
305
|
-
|
|
153
|
+
## Sorun mu yaşıyorsunuz?
|
|
306
154
|
|
|
307
|
-
|
|
155
|
+
| Sorun | Çözüm |
|
|
156
|
+
|-------|-------|
|
|
157
|
+
| Plugin "no server" diyor | AI aracınızı (Claude/Cursor) yeniden başlatın |
|
|
158
|
+
| Port çakışması | `figma_set_port` ile farklı porta geçin veya `lsof -i :5454` ile portu kontrol edin |
|
|
159
|
+
| "Server disconnected" | Config'deki node yolunu kontrol edin: `which node` ile tam yolu bulun |
|
|
160
|
+
| Plugin'de 0 bağlantı | Plugin'deki port ile AI aracının portu aynı olmalı |
|
|
308
161
|
|
|
309
|
-
|
|
162
|
+
Detaylı sorun giderme: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
|
|
310
163
|
|
|
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
|
|
164
|
+
## Sürüm bilgisi
|
|
314
165
|
|
|
315
|
-
|
|
166
|
+
| Bilgi | Kaynak |
|
|
167
|
+
|-------|--------|
|
|
168
|
+
| Güncel sürüm | **1.6.5** ([package.json](package.json)) |
|
|
169
|
+
| Değişiklik geçmişi | [CHANGELOG.md](CHANGELOG.md) |
|
|
170
|
+
| GitHub sürümleri | [Releases](https://github.com/atezer/FMCP/releases) |
|
|
171
|
+
| npm paketi | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |
|
|
316
172
|
|
|
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
|
|
173
|
+
**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.
|
|
321
174
|
|
|
322
|
-
|
|
175
|
+
## Dokümanlar
|
|
323
176
|
|
|
177
|
+
| Doküman | Açıklama |
|
|
178
|
+
|---------|----------|
|
|
179
|
+
| [ONBOARDING.md](docs/ONBOARDING.md) | Adım adım kurulum rehberi |
|
|
180
|
+
| [WINDOWS-INSTALLATION.md](docs/WINDOWS-INSTALLATION.md) | Windows kurulumu |
|
|
181
|
+
| [SETUP.md](docs/SETUP.md) | Detaylı kurulum (Local / Remote) |
|
|
182
|
+
| [TOOLS_FULL_LIST.md](docs/TOOLS_FULL_LIST.md) | **46 araç tam listesi** |
|
|
183
|
+
| [TOOLS.md](docs/TOOLS.md) | Araçların detaylı açıklamaları |
|
|
184
|
+
| [REST_API_GUIDE.md](docs/REST_API_GUIDE.md) | REST API kullanım rehberi |
|
|
185
|
+
| [CONTRIBUTING.md](CONTRIBUTING.md) | Projeye katkıda bulunma rehberi |
|
|
186
|
+
| [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) | Sorun giderme |
|
|
187
|
+
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | Çoklu kullanıcı ve port yönetimi |
|
|
188
|
+
| [ENTERPRISE.md](docs/ENTERPRISE.md) | Kurumsal özellikler (audit log, air-gap) |
|
|
189
|
+
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
190
|
+
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
191
|
+
| [SECURITY_AUDIT.md](docs/SECURITY_AUDIT.md) | Güvenlik denetimi |
|
|
324
192
|
|
|
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
|
-
| [CHANGELOG.md](CHANGELOG.md) | **Sürüm geçmişi** — npm/GitHub Releases ile birlikte referans |
|
|
337
|
-
| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Teknik mimari |
|
|
338
|
-
| [USE_CASES.md](docs/USE_CASES.md) | Örnek kullanım senaryoları |
|
|
339
|
-
| [MULTI_INSTANCE.md](docs/MULTI_INSTANCE.md) | **Paralel görevler & çoklu kullanıcı** — sabit port, paralel hatlar, Claude çoklu MCP |
|
|
340
|
-
| [ENTERPRISE.md](docs/ENTERPRISE.md) | **Enterprise** — Audit log, air-gap, Organization plugin |
|
|
341
|
-
| [SECURITY_AUDIT.md](docs/SECURITY_AUDIT.md) | **Güvenlik denetimi** — bulgular checklist |
|
|
193
|
+
## Güvenlik ve gizlilik
|
|
342
194
|
|
|
195
|
+
- Tasarım verileri **sadece bilgisayarınızda** kalır
|
|
196
|
+
- Figma bulutuna veya üçüncü taraflara veri **gönderilmez**
|
|
197
|
+
- REST API token'ı bellekte tutulur, diske **yazılmaz**
|
|
198
|
+
- **KVKK / GDPR uyumlu** mimari
|
|
199
|
+
- Detay: [PRIVACY.md](PRIVACY.md)
|
|
343
200
|
|
|
344
|
-
##
|
|
201
|
+
## Kurumsal kullanım (Tüm şirkette tek seferde)
|
|
345
202
|
|
|
346
|
-
|
|
203
|
+
Plugin'i herkesin tek tek yüklemesi gerekmez. Figma Organization hesabınız varsa plugin'i **private plugin** olarak yayınlayabilirsiniz:
|
|
347
204
|
|
|
348
|
-
**
|
|
205
|
+
**Publish plugin** → **Publish to** → **Organizasyon adınız (Private)** seçin.
|
|
349
206
|
|
|
350
|
-
|
|
351
|
-
-
|
|
352
|
-
-
|
|
207
|
+
Yayınladıktan sonra:
|
|
208
|
+
- Tüm ekip üyeleri **Plugins** menüsünden tek tıkla erişir
|
|
209
|
+
- Kimsenin "manifest import" yapmasına gerek kalmaz
|
|
210
|
+
- Plugin güncellemelerini merkezden yönetirsiniz
|
|
211
|
+
- Review süreci yok (private plugin) — yayınladıktan hemen sonra kullanılabilir
|
|
353
212
|
|
|
354
213
|
**Gereksinimler:**
|
|
214
|
+
- Figma **Organization** veya **Enterprise** planı
|
|
215
|
+
- Yayınlama: Figma → Plugins → Publish → **Publish to** kısmında organizasyonunuzu seçin
|
|
355
216
|
|
|
356
|
-
|
|
357
|
-
- 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).
|
|
217
|
+
> Her kullanıcının kendi bilgisayarında sadece AI aracı config'ini (Claude/Cursor) ayarlaması yeterli. Plugin zaten şirketin Figma'sında hazır olur.
|
|
358
218
|
|
|
359
|
-
|
|
219
|
+
Kurumsal özellikler (audit log, air-gap, org plugin detayı): [ENTERPRISE.md](docs/ENTERPRISE.md)
|
|
360
220
|
|
|
361
|
-
## Lisans
|
|
221
|
+
## Lisans
|
|
362
222
|
|
|
363
|
-
|
|
364
|
-
- **Sorun bildirimi:** [GitHub Issues](https://github.com/atezer/FMCP/issues)
|
|
223
|
+
MIT tabanlı — kişisel kullanım için. Detay: [LICENSE](LICENSE)
|
|
365
224
|
|
|
225
|
+
**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.5",
|
|
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.5",
|
|
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/f-mcp-plugin/ui.html
CHANGED
|
@@ -232,14 +232,28 @@
|
|
|
232
232
|
</div>
|
|
233
233
|
<div id="token-status" style="font-size:10px;color:rgba(255,255,255,0.35);margin-top:3px;display:none;"></div>
|
|
234
234
|
<div id="token-expiry-info" style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;display:none;"></div>
|
|
235
|
+
<div id="token-expiry-note" style="font-size:8px;color:rgba(255,255,255,0.2);margin-top:1px;display:none;">Figma'daki token suresiyle eslestiginden emin olun</div>
|
|
235
236
|
<div id="rate-limit-bar" style="display:none;margin-top:4px;">
|
|
236
|
-
<div style="display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,0.4);">
|
|
237
|
-
<span>API Limit</span>
|
|
237
|
+
<div style="display:flex;justify-content:space-between;align-items:center;font-size:9px;color:rgba(255,255,255,0.4);">
|
|
238
|
+
<span style="display:flex;align-items:center;gap:3px;">API Limit <span id="rate-limit-info" onclick="var t=document.getElementById('rate-limit-tip');if(t)t.style.display=t.style.display==='block'?'none':'block';" style="cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);font-size:7px;color:rgba(255,255,255,0.4);user-select:none;">i</span></span>
|
|
238
239
|
<span id="rate-limit-text">—</span>
|
|
239
240
|
</div>
|
|
241
|
+
<div id="rate-limit-tip" style="display:none;font-size:8px;color:rgba(255,255,255,0.35);margin-top:3px;padding:4px 6px;background:rgba(255,255,255,0.05);border-radius:3px;line-height:1.5;">
|
|
242
|
+
<div style="margin-bottom:3px;color:rgba(255,255,255,0.5);">Limiti ne tuketir?</div>
|
|
243
|
+
<div>○ Yorum okuma/yazma</div>
|
|
244
|
+
<div>○ Versiyon gecmisi</div>
|
|
245
|
+
<div>○ Gorsel export (REST ile)</div>
|
|
246
|
+
<div>○ Dosya bilgisi (REST ile)</div>
|
|
247
|
+
<div style="margin-top:3px;color:rgba(255,255,255,0.5);">Limiti tuketmeyen (sinirsiz):</div>
|
|
248
|
+
<div>● Dosya okuma, yazma, silme</div>
|
|
249
|
+
<div>● Variable/token yonetimi</div>
|
|
250
|
+
<div>● Bilesen arama, export (plugin)</div>
|
|
251
|
+
<div>● Screenshot, frame olusturma</div>
|
|
252
|
+
</div>
|
|
240
253
|
<div style="height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-top:2px;">
|
|
241
254
|
<div id="rate-limit-fill" style="height:100%;background:#4ecdc4;border-radius:2px;transition:width 0.3s;width:100%;"></div>
|
|
242
255
|
</div>
|
|
256
|
+
<div id="rate-limit-note" style="font-size:8px;color:rgba(255,255,255,0.2);margin-top:2px;display:none;">REST API cagrisi sonrasi guncellenir</div>
|
|
243
257
|
<div id="rate-limit-warning" style="display:none;font-size:9px;margin-top:2px;font-weight:600;"></div>
|
|
244
258
|
</div>
|
|
245
259
|
</div>
|
|
@@ -974,13 +988,22 @@
|
|
|
974
988
|
fillEl.style.animation = 'none';
|
|
975
989
|
}
|
|
976
990
|
}
|
|
991
|
+
// Hide "no data" note when real data exists
|
|
992
|
+
var noteEl = document.getElementById('rate-limit-note');
|
|
993
|
+
if (noteEl) noteEl.style.display = 'none';
|
|
977
994
|
} else if (barEl) {
|
|
978
995
|
barEl.style.display = hasToken ? 'block' : 'none';
|
|
979
996
|
if (textEl) textEl.textContent = '—';
|
|
980
997
|
if (fillEl) { fillEl.style.width = '100%'; fillEl.style.animation = 'none'; }
|
|
981
998
|
var warnEl2 = document.getElementById('rate-limit-warning');
|
|
982
999
|
if (warnEl2) warnEl2.style.display = 'none';
|
|
1000
|
+
// Show "no data" note when token exists but no rate limit data
|
|
1001
|
+
var noteEl2 = document.getElementById('rate-limit-note');
|
|
1002
|
+
if (noteEl2) noteEl2.style.display = hasToken ? 'block' : 'none';
|
|
983
1003
|
}
|
|
1004
|
+
// Token expiry note
|
|
1005
|
+
var expiryNoteEl = document.getElementById('token-expiry-note');
|
|
1006
|
+
if (expiryNoteEl) expiryNoteEl.style.display = (hasToken && expiresAt > 0) ? 'block' : 'none';
|
|
984
1007
|
requestUiResize();
|
|
985
1008
|
}
|
|
986
1009
|
|
package/package.json
CHANGED