Skip to main content
Glama
F-MCP (Figma MCP Bridge)

F-MCP (Figma MCP Bridge)

by atezer

F-MCP (Figma MCP Bridge)

Yeni — v1.9.15 DS Change Tracker: /track-ds-changes <figma-url> ile design system dosyalarınızda bileşen, varyant, token ve ikon değişikliklerini takip edin — snapshot karşılaştırması (token + bileşen) ve REST sürüm geçmişi (bileşen/yapı), "eski → yeni" rapor ve onaylı iş taslağı. Zamanlanmış görev olarak da çalışır. Detay: Release notes · ds-change-tracker SKILL · Kurulum rehberi.

Son sürüm — v1.9.15 (6 Ekim 2026): DS Change Tracker — DS değişiklik takibi + iş taslağı (63 tool, 29 skill, 132/132 test). Önceki öne çıkanlar: v1.9.14 Contract Extractor (extract-contract), v1.9.13 sıfır-kurulum DS oto-uyumlanma. Detay: CHANGELOG · Release notes

Figma tasarımlarınızı AI'a bağlar. AI'a "Bu ekrandaki renkleri çıkar" veya "Yeni bir login sayfası oluştur" dersiniz — AI Figma'daki tasarımınızla doğrudan çalışır.

Her şey bilgisayarınızda kalır. Tasarım verileriniz internete gönderilmez.


Neye ihtiyacım var?

Gerekli

Açıklama

Figma

Zaten kullanıyorsanız hazırsınız

Claude Code

Kurulumu yapacak uygulama — claude.ai/download adresinden indirin

Claude Code nedir? Bilgisayarınızda çalışan Claude versiyonu. Dosya oluşturabilir, komut çalıştırabilir, kurulum yapabilir. İndirdikten sonra kurulum için sadece bir kez kullanacaksınız.


Related MCP server: figma-mcp-poor

Kurulum (5 dakika)

1. Claude Code'u indirin (henüz yoksa)

2. Claude Code'u açın ve şunu yazın:

"https://github.com/atezer/FMCP bu repoyu kur"

Claude gerekli her şeyi (Node.js, build, ayarlar) otomatik yapar. Sizden sadece gerekirse bilgisayar şifreniz istenir.

3. Claude "kurulum tamamlandı" deyince Claude Code'u kapatıp tekrar açın

4. Figma'da Plugins → F-MCP ATezer Bridge açın → yeşil "Ready" görün

5. Hazırsınız! Claude'a Figma ile ilgili sorularınızı sorun.

Plugin'i ilk kez mi yüklüyorsunuz? Figma → Plugins → Development → Import plugin from manifest → f-mcp-plugin/manifest.json

Kurumsal kullanım: Plugin organizasyonda yayınlandıysa import gerekmez — Plugins menüsünden doğrudan çalıştırın.


Kurulumdan sonra hangi Claude'u kullanmalıyım?

Kurulum tek seferlik. Sonrasında Claude Desktop'ı açın — tıpkı Claude Chat gibi yazışın, Figma bağlantısı otomatik çalışır.

Araç

F-MCP çalışır mı?

Not

Claude Desktop (masaüstü uygulaması)

✅

Sohbet arayüzü — günlük kullanım için önerilen

Claude Code (Mac/PC'de terminal uygulaması)

✅

Kod yazma ve geliştirme için

Cursor

✅

Kod editörü — geliştiriciler için

Claude Code (claude.ai/code web veya mobil)

❌

Oturum Anthropic bulutunda çalışır; bilgisayarınızdaki plugin'e erişemez

Claude Chat (claude.ai web)

❌

Web tarayıcısı Figma plugin'ine erişemez

Temel kural: F-MCP, Claude ile Figma'nın aynı bilgisayarda çalışmasını gerektirir. Bridge yalnızca localhost (5454–5470) üzerinde dinler ve plugin yalnızca localhost'a bağlanır. Bulutta veya başka bir makinede çalışan bir Claude oturumu bu köprüye ulaşamaz; plugin bu durumda sarı "auto-connect" durumunda kalır.

Claude Desktop sınırlamaları

Claude Desktop Claude Code'dan farklı çalışır. Şu mekanizmalar Desktop'ta yoktur:

  • Sub-agent spawn — Task tool mevcut değil

  • Slash command'lar (/ds-sync vb.) — desteklenmez

  • plugin.json auto-discovery — yüklenmez

  • .claude/CLAUDE.md auto-inject yok

Desktop'ta enforcement beş katmandan gelir:

  1. Plugin response BLOCKING signal'i (_DESIGN_SYSTEM_VIOLATIONS_BLOCKING)

  2. Runtime audit tool'u figma_scan_ds_compliance

  3. Screenshot method selection — file/summary/regions/base64 (context koruma)

  4. Discovery budget — keşif çağrıları sayılır, 12'den sonra BLOCKING

  5. Project Knowledge'a yüklenmiş skill dosyaları

Detaylı rehber ve ilk-prompt örneği: install/claude-desktop/HOW-TO-ENFORCE.md.

Yeni chat öncesi öneri

Plugin bağlantı sorunları veya zombie process temizliği için:

bash scripts/cleanup-ports.sh

5454-5470 aralığındaki eski FMCP process'lerini güvenle öldürür (sadece FMCP adıyla eşleşenler).


Kendi Tasarım Sisteminizi Ekleyin (Bring Your Own DS)

F-MCP DS-agnostic çalışır — herhangi bir Figma team library'yi (Material, Apple HIG, Tailwind UI, kurumsal kendi DS'iniz vb.) kullanabilirsiniz.

🪄 Sıfır kurulum (v3.5+ — önerilen): Hiçbir şey eklemenize gerek yok. Tasarım sisteminizle ilgili herhangi bir şey isteyin ("tasarım sistemimle bir login ekranı yap", "DS'ime uygun mu denetle") — agent Figma ortamınızdan DS'inizi otomatik keşfeder: hedef dosyanın subscribe olduğu library'ler + açık library dosyaları + mevcut instance'ların kaynakları taranır, bulgular .claude/design-systems/registry.local.md'ye (gitignore'lu, size özel) kaydedilir ve bir daha sorulmaz. Ancak hiçbir sinyal yoksa agent bir kez kütüphane linkinizi sorar ve kalıcılaştırır.

Elle kontrol isteyenler için komutlar:

Komut

Ne zaman?

/add-library

Yeni bir DS kurarken (ana + mobil + ikon + asset Figma dosyalarını tek seferde ekler, cache oluşturur)

/ds-add <Figma-URL>

Hızlı ekleme — file-key otomatik parse edilir, varolan DS ile çakışma/fuzzy isim eşleşmesi kontrol edilir

/ds-sync <ds-name>

Mevcut DS cache'ini Figma'dan güncelle (resume destekli, kısmi sync)

Claude Desktop'ta: Slash command'lar tetiklenmez (Desktop sınırlamaları). Bu komutların içeriğini prompt'a yapıştırın; Claude skill instruction'larını adım adım uygular. Veya doğal dil kullanın: "Kütüphane ekle", "Ana-DS'yi güncelle".

Gizlilik: Eklediğiniz DS'in gerçek file-key, variableKey, componentKey değerleri repo'ya yazılmaz — hepsi size özel, gitignore'lu yerel dosyalardadır: .claude/design-systems/registry.local.md (DS kaydı) ve .claude/design-systems/<ds-name>/ altındaki yerel dokümanlar. v3.3+ live-first mimaride veriler her istekte Figma'dan canlı okunur; eski ~/.claude/data/fcm-ds/ cache dizini opsiyoneldir ve hiçbir zaman repoya girmez.

Multi-library DS: Ana-DS gibi birden fazla Figma dosyasından oluşan DS'ler desteklenir. /add-library ile ana + mobil + ikon + asset URL'lerini ayrı ayrı verebilirsiniz; active-ds.md Secondary Libraries tablosunda yönetilir.

Doğrulama: /ds-validate <ds-name> ile cache tutarlılığını denetleyin (v1.9.8+).


Neler yapabilirsiniz?

AI ile Figma arasında çift yönlü çalışırsınız:

Figma'dan AI'a — tasarımı oku, analiz et:

  • "Bu dosyadaki tüm bileşenleri listele"

  • "Button bileşeninin özelliklerini göster"

  • "Bu ekranın screenshot'ını al"

  • "Design token'larını çıkar"

AI'dan Figma'ya — tasarım oluştur, değiştir:

  • "Yeni bir frame oluştur, 375x812, mobile layout"

  • "Bu tasarımdan React kodu üret"

  • "Color token'larını toplu güncelle"

  • "Tüm ikonları SVG olarak export et"

Design-to-code köprüsü (v1.9.8):

  • "Seçili bileşen için tasarım bağlamını topla — component + token + Code Connect" → figma_use intent=design_context

  • "Bu sayfadaki tüm Code Connect eşlemelerini getir" → figma_get_code_connect scanCurrentPage=true

Kalite kontrolü:

  • "Kontrast kontrolü yap (erişilebilirlik)"

  • "Koddaki token'larla Figma'daki token'ları karşılaştır"

  • "Responsive: Mobile, Tablet, Web versiyonlarını üret"

Prototip otomasyonu (v1.9.9+):

  • "Figma'daki ekranların prototip bağlantılarını yap"

  • "Login → Home → Register akışını SLIDE_IN animasyonla kur"

  • "Button hover state'i SMART_ANIMATE ile ayarla"

  • "Long content için vertical scroll + sticky header"

Otomatik navigasyon haritası (TR+EN button text heuristic), 9 trigger / 8 action / 9 transition tipi × 4 yön, ON_KEY_DOWN (keyCodes + device), overlay config, scroll behavior, flow starting point — Figma Prototype panel'inin tüm yetenekleri.

63 aracın tam listesi: TOOLS_FULL_LIST.md


Figma API Token (opsiyonel — ek özellikler)

F-MCP temel özellikleri token olmadan çalışır. Figma API token eklerseniz ek özellikler açılır:

Token olmadan

Token ile (ek)

Tasarım okuma, bileşen arama

+ Yorum okuma/yazma

Frame/text oluşturma

+ Versiyon geçmişi

Variable/token yönetimi

+ REST API görsel export

SVG/PNG/PDF export

+ Dosya bilgisi detayları

Nasıl eklenir:

  1. figma.com/developers → Personal Access Tokens → yeni token oluşturun

  2. Figma'da plugin'i açın → Advanced → API Token alanına yapıştırın

  3. Süre seçin (30/60/90 gün) → token otomatik kaydedilir

Token bilgisayarınızda kalır, internete gönderilmez.


Güncelleme

Claude Code'a şunu söyleyin:

"F-MCP'yi güncelle"

Claude gerisini halleder. Sonra Claude'u yeniden başlatın.

Detay: UPDATE.md


Sorun mu yaşıyorsunuz?

Sorun

Çözüm

Plugin "no server" diyor

Önce AI aracını (Claude Desktop / Cursor / Claude Code) açın, sonra Figma'da plugin'i çalıştırın

Plugin sarı "auto-connect :54xx" durumunda kalıyor, yeşil olmuyor

Bilgisayarınızda dinleyen bir bridge yok. Claude'u claude.ai/code (web/mobil) üzerinden açtıysanız oturum bulutta çalışır ve plugin'e ulaşamaz — Claude Desktop'ı veya terminalden Claude Code'u kullanın. Doğrulamak için: lsof -iTCP:5454-5470 -sTCP:LISTEN boş dönüyorsa bridge çalışmıyor demektir. Hızlı test: Terminal'de cd <clone-kökü> && node dist/local-plugin-only.js çalıştırın; plugin birkaç saniyede yeşile dönmeli (bu yalnızca teşhis içindir — günlük kullanımda bridge'i Claude Desktop / Claude Code kendisi başlatır; testten sonra Ctrl+C ile kapatın)

Bulut oturumunda / başka makinede figma-mcp-bridge "Connection closed"

.mcp.json içindeki args yolu (/Users/<kullanıcı>/FCM/dist/local-plugin-only.js) o makinede yok. Yerel kurulumda yolu kendi clone kökünüze göre düzenleyin; bulut oturumunda ise bu sunucu tasarım gereği çalışmaz (yukarıdaki "Temel kural")

Plugin "connecting..." diyor

Bekleyin, otomatik bağlanır

Yeni araçlar görünmüyor

AI aracını tamamen kapatıp tekrar açın

DevTools console'da WebSocket hataları

v1.9.1+ ile server-side probe ile giderildi. Plugin hâlâ eski kodu cache'liyorsa: Figma → Plugins → Development → Manage plugins in development → Remove → Import plugin from manifest

Daha fazla: TROUBLESHOOTING.md


Teknik detaylar

  • Ne yapar — Claude veya Cursor'dan Figma'ya ekran tasarlar, tasarım sistemini denetler, renk/yazı/boşluk token'larını yönetir, ekranlar arası prototip bağlantıları ve animasyonlar kurar (v1.9.9+), tasarımı koda hazırlar

  • Nerelerde çalışır — Claude Code, Cursor, Claude Desktop, Claude Web (kurulum rehberleri)

  • Nasıl çalışır — Her görev için kendi skill'i var (kural seti + örnek). Claude Code'da agent + sub-agent yapısı var: ana ajan görevi alır, alt-ajanlar izole çalışır — ana sohbet bağlamı yorulmaz. Cursor ve Claude Desktop'ta aynı skill'ler doğrudan yüklenir (sub-agent yok, tek kaynak 4 platformda)

  • 3 orkestratör — DS denetimi, token senkronizasyonu, ekran üretimi için hazır uçtan uca akışlar (skill dizini)

  • Figma — Masaüstü ve tarayıcı, birden fazla AI aynı dosyaya aynı anda bağlanabilir

  • Gizlilik — Veriler bilgisayarınızdan çıkmaz, internet bağlantısı olmadan da kullanılabilir

  • Detay — 63 araç · 29 skill · Mimari · Kurumsal kullanım · Katkı rehberi


Güncel sürüm

1.9.15 (CHANGELOG · Releases) — DS Change Tracker (DS değişiklik takibi + iş taslağı)

npm

@atezer/figma-mcp-bridge

Lisans

MIT — kişisel ve ticari kullanıma açık. Figma Console MCP (MIT) projesinden türetildi

Sorun mu var? GitHub Issues

Available Tools

63 tools
figma_add_modeC
Destructive

Add a mode to a collection.

Inputs: modeName (required), collectionId (required).

figma_arrange_component_setA
Destructive

Combine multiple component nodes into one Figma component set (combineAsVariants). Params: nodeIds (array of at least 2 component node IDs). Returns new component set nodeId.

Inputs: nodeIds (required).

figma_batch_create_variablesA
Destructive

Create up to 100 variables in one call. Each item: collectionId, name, resolvedType (COLOR/FLOAT/STRING/BOOLEAN), value, modeId. Returns created and failed lists.

Inputs: items (required).

figma_batch_update_variablesA
Destructive

Update up to 100 variables. Each item: variableId, modeId, value. Returns updated and failed lists.

Inputs: items (required).

figma_bind_variableA
Destructive

Import a library variable by key and bind it to a node property. For colors: binds to fills or strokes via setBoundVariableForPaint. For spacing/sizing: binds via setBoundVariable (paddingLeft, itemSpacing, cornerRadius, etc.). Get variableKey from figma_get_library_variables. The node's fill/spacing will dynamically update when the DS token changes.

Inputs: nodeId (required), property (required), variableKey (required), fileKey, +2 more.

figma_capture_screenshotA
Read-only

v1.9.5: 4 returnMode ile screenshot. Default 'file' (dosyaya yazar, base64 context'te YOK). 'summary' screenshot çekmeden metadata özeti (planlama için), 'regions' büyük ekranları children/slices olarak parçalar, 'base64' eski davranış (opt-in, ~30K token maliyetli). Context-aware fallback: >%80 context kullanımında base64/file → summary'ye otomatik düşer. Karar ağacı: planlama→summary, teslimat→file, scroll'lu ekran→regions, son çare→base64.

Inputs: scale, format, nodeId, fileKey, +7 more.

figma_check_design_parityA
Read-only

Compare Figma design tokens (variables + styles) with code-side tokens. Critical for design-code gap analysis. Returns matching, inFigmaOnly, inCodeOnly, and divergent (same name, different value). Optional codeTokens: JSON string of expected tokens, e.g. {"primary": "#0066cc", "spacing.md": 16} or {"primary": {"value": "#0066cc"}}.

Inputs: codeTokens.

figma_clear_consoleA
Destructive

Clear the plugin console log buffer.

Inputs: no named parameters.

figma_clear_rest_tokenA

Clear the stored Figma REST API token from memory.

Inputs: no named parameters.

figma_clone_screen_to_deviceA
Destructive

⚠️ NARROW USE CASE — Device migration ONLY. Clone a Figma screen to a target device dimension, preserving library instances, bound variables, and auto-layout. USE ONLY WHEN: same design system + same layout structure + only screen size changes. DO NOT USE FOR: creating alternatives, variations, or new designs — these REQUIRE building from scratch with figma_execute following the generate-figma-screen SKILL Step 5 pattern (search_assets → instantiate_component → setBoundVariable → auto-layout FILL). Clone copies benchmark's EXISTING mistakes (hardcoded rectangles, missing token bindings, non-responsive layouts). Benchmark is INSPIRATION, not a copy source for variations. If the user says 'alternatif', 'varyasyon', 'farklı', 'yeni', 'tasarla' — USE figma_execute + Step 5, NOT this tool. Device presets: iPhone 17, iPhone 16 Pro Max, Android Compact, iPad Pro 11, Desktop, and more. Custom: 'WxH' format.

Inputs: sourceNodeId (required), targetDevice (required), fileKey, newName, +3 more.

figma_create_frameA

Create a new frame node with optional auto-layout. Returns the created node ID. v1.8.0: defaults to layoutMode='VERTICAL' with paddingTop/Bottom=16, paddingLeft/Right=16, itemSpacing=12, primaryAxisSizingMode='AUTO', counterAxisSizingMode='AUTO'. Pass layoutMode='NONE' for legacy free-form frames.

Inputs: x, y, name, width, +19 more.

figma_create_groupB

Group existing nodes into a new group. Provide node IDs to group.

Inputs: nodeIds (required), name.

figma_create_interactionB

Create a variant state-change interaction on an INSTANCE/variant node (hover/press/focus -> variant). Uses reactions API with navigation: CHANGE_TO. Target variant resolved by id or name within the same COMPONENT_SET. Uses getMainComponentAsync for deprecation-safe main component access. v1 supports INSTANT/DISSOLVE/SMART_ANIMATE transitions (DirectionalTransition not applicable to variants).

Inputs: nodeId (required), easing, trigger, duration, +3 more.

figma_create_mini_dsA
Destructive

v1.9.7: Boş Figma dosyası için minimal Design System oluştur. Tek tool çağrısı ile 12 color variable + 8 sizing variable (spacing + radius) + 3 text style + Button/Input/Card component'leri kurar. Kullanıcı 'Blank File 4-option dialog'da (b) Mini DS seçerse çağır. Parametreler opsiyonel: primaryColor (default '#1464FF'), fontFamily (default 'Inter'), name (default 'Mini DS'), includeComponents (default true). Sonuç: { success, dsName, variableCollectionIds, textStyleIds, componentIds, summary } — sonrasında figma_execute ile ekran kurulabilir.

Inputs: name, fileKey, figmaUrl, fontFamily, +2 more.

figma_create_prototype_connectionA

Create a prototype reaction between two nodes (source -> destination). Maps Figma Prototype panel: trigger (On click/hover/press/drag, After delay, Mouse events, Key/gamepad) + action (Navigate/Overlay/Swap/Back/Close/Change to/Scroll to/Open link) + transition type (Dissolve/Smart animate/Scroll animate/Move in-out/Push/Slide in-out) with direction (LEFT/RIGHT/TOP/BOTTOM) + easing + duration (ms, converted to seconds internally) + matchLayers (only on DirectionalTransition per Figma schema). Uses Figma Plugin API setReactionsAsync (reactions property is readonly in 2024+ API). v1 scope: SET_VARIABLE, SET_VARIABLE_MODE, UPDATE_MEDIA_RUNTIME, CONDITIONAL actions are NOT included (future release). Overlay background/close-on-outside are readonly in Plugin API — configure in Figma UI (Prototype tab -> Advanced -> Overlay).

Inputs: sourceNodeId (required), url, action, device, +13 more.

figma_create_rectangleC

Create a new rectangle node on the current page.

Inputs: x, y, name, width, +4 more.

figma_create_textA

Create a new text node on the current page. Returns the created node ID. IMPORTANT: fontFamily defaults to 'Inter' — if using a design system with a custom font (e.g. 'YourBrandFont'), specify the DS font from active-ds.md. For DS text with proper token binding, prefer figma_execute with importStyleByKeyAsync + setTextStyleIdAsync instead.

Inputs: text (required), x, y, name, +5 more.

figma_create_variableA
Destructive

Create a variable in a collection. Get collectionId from figma_get_variables.

Inputs: name (required), collectionId (required), resolvedType (required), options.

figma_create_variable_collectionC
Destructive

Create a variable collection.

Inputs: name (required), options.

figma_delete_variableC
Destructive

Delete a variable.

Inputs: variableId (required).

figma_delete_variable_collectionC
Destructive

Delete a variable collection.

Inputs: collectionId (required).

figma_enumerate_library_componentsA
Read-only

LIVE enumerate every published COMPONENT and COMPONENT_SET in a library Figma file. REQUIRES the library file to be open in FMCP plugin (see figma_list_connected_files). Returns items: [{name, key, kind, props, parent}]. Kind is authoritative — use importComponentSetByKeyAsync for COMPONENT_SET, importComponentByKeyAsync for COMPONENT. v3.2+ RECOMMENDED path — zero local cache dependency, always fresh as Figma updates. For multi-library DS (e.g. main DS + mobile DS + icons), call once per library file.

Inputs: libraryName, libraryFileKey.

figma_enumerate_published_componentsA
Read-only

List published COMPONENT + COMPONENT_SET of a library via the Figma REST API. Works WITHOUT the library file being open in plugin — use when the DS library is subscribed in the target file but library tabs aren't open. Requires figma_set_rest_token (one-time). v3.4+ RESPONSE SHAPE: items are compact by default ({name, key, kind}) — descriptions stripped to keep responses <10KB. Pass filter to search by name substring; large libraries (1000+ components) REQUIRE filter to avoid context overflow.

Inputs: libraryFileKey (required), limit, filter, includeDescription.

figma_executeA
Destructive

Run JavaScript in the Figma plugin context. Full Plugin API available. Use fileKey or figmaUrl to target a specific file. v1.8.1+: Static analysis detects design-system discipline violations (hardcoded colors, missing token bindings, no-instance usage, hardcoded typography). SEVERE warnings are promoted to the top of the response as _designSystemViolations — Claude must read and self-correct. Also detects gotchas: FILL/ABSOLUTE before appendChild, sync API usage, missing loadFontAsync, sync currentPage assignment. For component instances: use setProperties({...}), NOT findAll(TEXT). v1.9.6+: Post-execute scan — eğer kod return { createdNodeIds: [...] } veya nodeIds/ids/frameId/rootId/nodeId döndürürse plugin oluşturulan node'ları otomatik tarar, unbound fill/padding/radius/text-style varsa response'a _POST_EXECUTE_SCAN_BLOCKING: true ve _postExecuteViolations alanı ekler. Bu flag varsa execute geçersiz sayılır — kodu düzelt (setBoundVariable/setTextStyleIdAsync ekle) ve tekrar çalıştır.

Inputs: code (required), fileKey, timeout, figmaUrl.

figma_export_nodesA

Export one or multiple nodes as SVG, PNG, JPG, or PDF. Returns base64-encoded data for each node. Supports batch export (up to 50 nodes). No REST API token needed — uses plugin exportAsync. SVG preserves vectors; PNG/JPG are rasterized at configurable scale. v1.8.0: default scale=1 for context safety (was 2). Override for high-DPI exports.

Inputs: nodeIds (required), scale, format, svgIncludeId, +1 more.

figma_extract_contractA
Read-only

Extract a complete design contract JSON spec from a COMPONENT_SET (or a COMPONENT/INSTANCE inside one). Reads props (componentPropertyDefinitions with boolean-like variant + state normalization), anatomy (default variant tree with token bindings mapped to CSS properties), variantOverrides (token diffs of every variant value vs the default variant), resolvedTokens (per-mode values with alias chains), baseSpecs (raw measurements) and a11y contrast pairs (WCAG AA/AAA per mode). nodeId omitted → current Figma selection. DS-agnostic; no REST API. Returns { success, contract, report } — contract status is 'draft', anchors.code needs manual verification. Use for design-to-code handoff, DS documentation, or as the source of truth for component codegen.

Inputs: nodeId, fileKey, figmaUrl, importPathTemplate.

figma_get_code_connectA
Read-only

Get Code Connect hints for components/instances: documentationLinks, componentKey, name, description. Pass nodeIds for specific nodes, or scanCurrentPage=true to scan the current page for COMPONENT/COMPONENT_SET/INSTANCE nodes. Note: Full Code Connect source map lives in figma.config / Figma CLI; this tool returns plugin-accessible hints only. Use Figma's official MCP get_code_connect_map for native repo paths.

Inputs: fileKey, nodeIds, figmaUrl, maxNodes, +1 more.

figma_get_componentA
Read-only

Get component metadata by node ID from the open Figma file. No REST API. Use fileKey or figmaUrl to target a specific file.

Inputs: nodeId (required), fileKey, figmaUrl.

figma_get_component_for_developmentA
Read-only

Get component metadata plus base64 screenshot in one call. For design-to-code workflows. Defaults to JPG@1x q70 (v1.8.0 context-safe).

Inputs: nodeId (required), scale, format, jpegQuality.

figma_get_component_imageB
Read-only

Get screenshot of a node (component/frame). Returns base64 image. Defaults to JPG@1x q70 (v1.8.0 context-safe). Use fileKey or figmaUrl to target a specific file when multiple plugins are connected.

Inputs: nodeId (required), scale, format, fileKey, +2 more.

figma_get_console_logsA
Read-only

Get plugin console logs (log/warn/error) from the F-MCP plugin buffer. No CDP. Limit default 50. Use fileKey or figmaUrl to target a specific file when multiple plugins are connected.

Inputs: limit, fileKey, figmaUrl.

figma_get_design_contextA
Read-only

Design context for a node or whole file: structure + text, layout/visual/typography. Defaults to depth=1, verbosity='summary' for context safety. Pass depth/verbosity explicitly for deeper data. Cached 60s per session.

Inputs: debug, depth, nodeId, fileKey, +8 more.

figma_get_design_system_summaryA
Read-only

Get a compact overview: variable collection names and component counts. Minimal tokens. Use fileKey or figmaUrl to target a specific file. PRE-FLIGHT (v1.9.8+ MUTLAK): BEFORE calling, read .claude/design-systems/active-ds.md + ~/.claude/data/fcm-ds/active.md first. If DS identity is already known from state, DO NOT call this tool on an empty target file just to 'check DS existence' — use the cache.

Inputs: limit, fileKey, figmaUrl, currentPageOnly.

figma_get_file_dataA
Read-only

Get file structure and document tree from the open Figma file. No REST API or token. Use fileKey or figmaUrl to target a specific file when multiple plugins are connected. Defaults to depth=1, verbosity='summary'. Cached 60s per session.

Inputs: debug, depth, fileKey, figmaUrl, +6 more.

figma_get_library_variablesA
Read-only

List variables from team library collections with import keys. Uses figma.teamLibrary API — works in the TARGET file, no need to connect the DS source file. Returns variable name, key (for importVariableByKeyAsync), resolvedType, collection, and library name. Use the returned keys with figma_bind_variable or figma.variables.importVariableByKeyAsync() in figma_execute. PRE-FLIGHT (v1.9.8+ MUTLAK): BEFORE calling, read ~/.claude/data/fcm-ds//tokens.md cache first. If cache exists and <7 days old (per _meta.md), use cache directly — only call this tool on cache miss or stale.

Inputs: limit, query, fileKey, figmaUrl, +2 more.

figma_get_prototype_connectionsA
Read-only

Read prototype reactions on a node subtree or the whole current page. Read-only audit — returns trigger, action, navigation, destinationId, transition, flowStartingPoints. Uses getReactionsAsync if available, falls back to node.reactions getter. At least one of nodeId or pageScope=true must be provided.

Inputs: nodeId, fileKey, figmaUrl, pageScope, +1 more.

figma_get_rest_token_statusA
Read-only

Check if a Figma REST API token is set and view rate limit usage.

Inputs: no named parameters.

figma_get_statusB
Read-only

Check if F-MCP ATezer Bridge plugin is connected and list all connected files. No REST API or token.

Inputs: no named parameters.

figma_get_stylesA
Read-only

Get local paint, text, and effect styles from the open Figma file. No REST API. Use fileKey or figmaUrl to target a specific file.

Inputs: fileKey, figmaUrl, verbosity.

figma_get_token_browserA
Read-only

Token Browser: hierarchical view of design tokens for browsing. Returns variable collections with variables and modes, plus paint and text styles. Use for exploring and auditing tokens in the open Figma file. No REST API. Use fileKey or figmaUrl to target a specific file when multiple plugins are connected.

Inputs: fileKey, figmaUrl, verbosity.

figma_get_variablesA
Read-only

Get design tokens and variables from the open Figma file. No REST API or token. Use fileKey or figmaUrl to target a specific file when multiple plugins are connected.

Inputs: fileKey, figmaUrl, verbosity.

figma_import_styleA
Destructive

Import a text, paint, or effect style from a team library by key, and optionally apply it to a node. IMPORTANT: This API only imports PUBLISHED LIBRARY styles, NOT local file styles. For local styles, use 'node.fillStyleId = style.id' (or textStyleId/effectStyleId) directly via figma_execute. Get library style keys from .claude/libraries/ cache or REST API: figma_rest_api GET /v1/files/{fileKey}/styles. For TEXT styles: applies via setTextStyleIdAsync (includes font, size, weight). For PAINT styles: applies via fillStyleId. For EFFECT styles: applies via effectStyleId.

Inputs: styleKey (required), nodeId, fileKey, figmaUrl.

figma_instantiate_componentA
Destructive

Create a component instance. Use componentKey from figma_search_components, figma_search_assets, or REST API. Supports library components (importComponentByKeyAsync) and local components (by nodeId). After creation: use overrides with setProperties({...}) for component properties — do NOT use findAll(TEXT) to modify instance text.

Inputs: componentKey (required), options.

figma_list_connected_filesA
Read-only

List all currently connected Figma/FigJam plugin instances (Figma Desktop, FigJam browser, Figma browser). Returns fileKey, fileName, and connection time for each. Use when multiple windows or agents are active. Pass the returned fileKey (or a Figma/FigJam URL via figmaUrl) to other tools to target a specific file.

Inputs: no named parameters.

figma_plugin_diagnosticsA
Read-only

Get diagnostic info about plugin connection health: uptime, connected clients, pending requests, bridge version, memory usage.

Inputs: no named parameters.

figma_refresh_variablesC

Refresh variables from the file.

Inputs: no named parameters.

figma_rename_modeC
Destructive

Rename a mode in a collection.

Inputs: modeId (required), newName (required), collectionId (required).

figma_rename_variableC
Destructive

Rename a variable.

Inputs: newName (required), variableId (required).

figma_rest_apiA

Call Figma REST API directly. Requires a token set via figma_set_rest_token. Use for: file export (SVG/PNG), comments, version history, team/project listing, image fills, and anything not available through the plugin bridge. Endpoint examples: GET /v1/files/:fileKey, GET /v1/images/:fileKey, GET /v1/files/:fileKey/comments

Inputs: endpoint (required), body, method.

figma_scan_ds_complianceA
Read-only

v1.9.4: FINAL GATE — Full DS compliance scan for a completed screen. Returns the same score + breakdown as figma_validate_screen PLUS: (1) coverage = granular bind percentages (fills/paddings/radius/itemSpacing/textStyle/textColor/strokes), (2) samples.hardcodedHex = up to 8 nodes with hardcoded SOLID colors, (3) samples.hardcodedFontSize = up to 8 text nodes with hardcoded fontSize (no textStyleId), (4) samples.primitiveFrames = up to 8 frames that should have been DS component instances, (5) overflow = root auto-layout overflow analysis (frameSize vs contentSize). If passed: false, Claude MUST fix listed violations before presenting the screen as complete. Threshold 85 default (stricter than validate_screen's 80) because this flags granular gaps. Read-only — never mutates the file.

Inputs: nodeId (required), fileKey, figmaUrl, threshold, +1 more.

figma_search_assetsA
Read-only

Search for design system assets in the current Figma file. Returns: (1) team library VARIABLES via figma.teamLibrary API (all enabled libraries), (2) file-local COMPONENTS / COMPONENT_SETS, and (3) v1.8.0+: REMOTE LIBRARY COMPONENTS discovered by scanning existing INSTANCE nodes (returned as 'libraryComponents'). For library components to appear, at least one DS instance must exist in the file — place one manually first if empty. v1.9.8+: When instance scan returns empty, response includes '_restFallbackHint' suggesting figma_rest_api('/v1/files/<LIBRARY_FILE_KEY>/components') as a REST fallback to enumerate library components directly (requires FIGMA_REST_TOKEN env var + library file-key from active.md). Pass currentPageOnly=false to scan all pages for instance discovery. Use the returned componentKey with figma_instantiate_component to place new instances. Pass assetTypes to filter: ['variables'], ['components'], or both (default).

Inputs: limit, query, fileKey, figmaUrl, +2 more.

figma_search_componentsA
Read-only

Search local components by name. Returns nodeIds and names. No REST API. Use fileKey or figmaUrl to target a specific file.

Inputs: limit, query, fileKey, figmaUrl, +1 more.

figma_set_descriptionB
Destructive

Set description on a component, component set, or style node. Supports markdown (descriptionMarkdown).

Inputs: nodeId (required), description (required), descriptionMarkdown.

figma_set_flow_starting_pointA

Mark a FRAME as a prototype flow starting point (shown in Figma Prototype panel). Uses page.setFlowStartingPointsAsync if available (future API), falls back to direct assignment. Description is stored via pluginData (Figma FlowStartingPoint shape is { nodeId, name } only).

Inputs: name (required), nodeId (required), replace, description.

figma_set_instance_propertiesB
Destructive

Set component instance properties (TEXT, BOOLEAN, VARIANT, etc.). Use fileKey or figmaUrl to target a specific file.

Inputs: nodeId (required), properties (required), fileKey, figmaUrl.

figma_set_portA

Change the WebSocket bridge port at runtime. Stops the current bridge and restarts on the new port. Use when the default port is busy (e.g. another AI tool holds it). After calling this, the Figma plugin must reconnect to the new port. Valid range: 5454–5470.

Inputs: port (required).

figma_set_rest_tokenA

Set Figma REST API token for REST API calls (export, comments, version history, etc.). Token is stored in memory only — never written to disk. Cleared on restart. Get a token from Figma → Settings → Personal access tokens (max 90 days).

Inputs: token (required).

figma_set_scroll_behaviorA

Set a node's scroll behavior (Figma Prototype panel > Scroll behavior). overflowDirection (FrameNode): NONE/HORIZONTAL/VERTICAL/BOTH — defines prototype scroll axis. scrollBehavior (SceneNode): SCROLLS/FIXED/STICKY_SCROLLS — FIXED = sticky header, STICKY_SCROLLS = becomes sticky after scrolling past. At least one of overflowDirection or scrollBehavior must be provided.

Inputs: nodeId (required), scrollBehavior, overflowDirection.

figma_setup_design_tokensA
Destructive

Atomically create a variable collection + modes + variables. Rollback on any error. Params: collectionName, modes (array), tokens (array of { name, type?, value? or values? }).

Inputs: modes (required), tokens (required), collectionName (required).

figma_update_variableA
Destructive

Update a variable value in a mode. Get IDs from figma_get_variables.

Inputs: value (required), modeId (required), variableId (required).

figma_useA
Read-only

High-level orchestrator that bundles component, token and design-context lookups in one call. intent='component' -> node detail + Code Connect hint. intent='token' -> team library variable search. intent='design_context' -> full bundle (component + hints + tokens). Prefer this before implementing a design to collect all references in a single round-trip.

Inputs: intent (required), limit, query, nodeId, +2 more.

figma_validate_screenA
Read-only

Validate a screen against design-system discipline criteria. Returns a compliance score (0-100) across 3 dimensions: instance coverage (library usage), token binding coverage (bound variables), and auto-layout coverage. Use this AFTER creating a screen to verify DS compliance. If score < minScore, Claude should delete the screen and rebuild it using DS components + token bindings. v1.9.4: breakdown now always includes coverage (granular fills/paddings/radius/itemSpacing/textStyle bind ratios) + overflow (root auto-layout overflow). For hardcoded samples + primitive fallback list, use figma_scan_ds_compliance instead. Read-only — never mutates the file.

Inputs: nodeId (required), fileKey, figmaUrl, minScore, +1 more.

figma_watch_consoleA
Read-only

Stream new plugin console logs until timeout. Polls the plugin buffer. Timeout default 30s.

Inputs: timeoutSeconds.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

    TDQS

    B3.2/5.0

    Scored across 63 tools

    Disambiguation2/5

    Several tool families are hard to distinguish: figma_validate_screen and figma_scan_ds_compliance largely overlap, and get_variables/get_token_browser/get_library_variables/search_assets all serve similar discovery purposes. The create_variable/batch_create_variables/setup_design_tokens trio also has fuzzy boundaries. Descriptions help, but an agent will frequently need to read very closely to avoid picking the wrong tool.

    Naming Consistency4/5

    All tools share the figma_ prefix and snake_case convention, and most follow a verb_noun structure such as figma_create_frame or figma_delete_variable. A few generic or noun-style names like figma_use, figma_execute, and figma_rest_api are minor deviations from that pattern.

    Tool Count2/5

    63 tools is far beyond the typical well-scoped 3-15 range and exceeds even the 25+ threshold. Many tools are granular variants of the same concern, especially in variables, component discovery, and DS compliance. The broad Figma domain explains some of the size, but the surface is still bloated for agent navigation.

    Completeness4/5

    The tool set covers a wide range of Figma workflows: variables, components, design-system validation, exports, console logs, and prototyping. Generic figma_execute and figma_rest_api fill most remaining gaps, so the few missing explicit operations like deleting a component or prototype connection are minor rather than blocking.

    Maintenance

    ActivityMaintained
    ResponsivenessLimited data

    Related MCP Connectors

    Related MCP Servers

    • A
      license
      Not graded
      quality
      D
      maintenance
      Enables AI assistants to read and modify Figma designs programmatically, supporting design analysis, element creation, text replacement, annotations, auto-layout configuration, and prototype visualization through natural language commands.
      1,908 npm
      MIT
    • A
      license
      Not graded
      quality
      D
      maintenance
      AI assistants can read and inspect Figma design context locally via a plugin, without external API keys or rate limits.
      15 npm
      MIT
    • A
      license
      Not graded
      quality
      A
      maintenance
      Enables AI agents to inspect Figma selections, navigate pages, render previews, generate starter code, and submit user-approved canvas edits through a local bridge.
      3 npm
      MIT
    • A
      license
      Not graded
      quality
      D
      maintenance
      Enables AI assistants to access and manipulate Figma designs, including extracting design systems, creating and debugging UI components, and syncing design tokens bidirectionally.
      13,916 npm
      MIT