F-MCP (Figma MCP Bridge)
Summary: F-MCP bridges AI tools to Figma via a local WebSocket plugin, enabling reading, creating, auditing, and prototyping Figma designs and design systems without sending data to the cloud.
File & connection management — List connected Figma/FigJam instances, check plugin/connection status, run diagnostics, and change the bridge port (5454–5470).
Read design data — Fetch file structure/document tree, design context, variables/tokens, components, styles, and a hierarchical token browser; read plugin console logs.
Native Figma REST API — Set/clear a personal access token and call REST endpoints for exports, comments, version history, and file metadata.
Create & edit design content — Run arbitrary Plugin API JavaScript (
figma_execute) and create frames, text, rectangles, and groups; clone screens to device presets.Component workflows — Search local/library components and assets, enumerate published or live library components, instantiate components, set instance properties, and manage descriptions.
Design system & token management — Create/update/delete variables, collections, and modes; batch operations; atomically set up token systems; bind library variables to node properties; import styles; create a starter "Mini DS."
Design-system compliance auditing — Validate screens and run full DS compliance scans scoring instance/token/auto-layout coverage, flagging hardcoded colors, fonts, and primitive frames.
Screenshots & exports — Capture screenshots (file/base64/summary/regions modes), export nodes (SVG/PNG/JPG/PDF), and get component images for development.
Design-to-code handoff — Bundle component + token + Code Connect context, extract design contracts, retrieve Code Connect mappings, and check design/code token parity.
Prototyping automation — Create/read prototype connections, set flow starting points, add variant interactions, and configure scroll behavior (all triggers, actions, transitions, and directional/easing options).
Orchestration — Use
figma_useto bundle component, token, and design-context lookups in a single round-trip.
Enables AI agents to read, analyze, create, and modify Figma designs, manage design tokens, generate code (e.g., React), export assets (SVG/PNG/PDF), and automate prototype connections and animations.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@F-MCP (Figma MCP Bridge)list all components in my current Figma file"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.jsonKurumsal 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ızcalocalhost'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-syncvb.) — desteklenmezplugin.jsonauto-discovery — yüklenmez.claude/CLAUDE.mdauto-inject yok
Desktop'ta enforcement beş katmandan gelir:
Plugin response BLOCKING signal'i (
_DESIGN_SYSTEM_VIOLATIONS_BLOCKING)Runtime audit tool'u
figma_scan_ds_complianceScreenshot method selection — file/summary/regions/base64 (context koruma)
Discovery budget — keşif çağrıları sayılır, 12'den sonra BLOCKING
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.sh5454-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? |
| Yeni bir DS kurarken (ana + mobil + ikon + asset Figma dosyalarını tek seferde ekler, cache oluşturur) |
| Hızlı ekleme — file-key otomatik parse edilir, varolan DS ile çakışma/fuzzy isim eşleşmesi kontrol edilir |
| 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:
figma.com/developers → Personal Access Tokens → yeni token oluşturun
Figma'da plugin'i açın → Advanced → API Token alanına yapıştırın
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: |
Bulut oturumunda / başka makinede |
|
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 | |
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 toolsfigma_add_modeCDestructive
Add a mode to a collection.
Inputs: modeName (required), collectionId (required).
figma_arrange_component_setADestructive
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_variablesADestructive
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_variablesADestructive
Update up to 100 variables. Each item: variableId, modeId, value. Returns updated and failed lists.
Inputs: items (required).
figma_bind_variableADestructive
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_screenshotARead-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_parityARead-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_consoleADestructive
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_deviceADestructive
⚠️ 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_dsADestructive
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_variableADestructive
Create a variable in a collection. Get collectionId from figma_get_variables.
Inputs: name (required), collectionId (required), resolvedType (required), options.
figma_create_variable_collectionCDestructive
Create a variable collection.
Inputs: name (required), options.
figma_delete_variableCDestructive
Delete a variable.
Inputs: variableId (required).
figma_delete_variable_collectionCDestructive
Delete a variable collection.
Inputs: collectionId (required).
figma_enumerate_library_componentsARead-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_componentsARead-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_executeADestructive
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_contractARead-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_connectARead-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_componentARead-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_developmentARead-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_imageBRead-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_logsARead-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_contextARead-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_summaryARead-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_dataARead-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_variablesARead-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_connectionsARead-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_statusARead-only
Check if a Figma REST API token is set and view rate limit usage.
Inputs: no named parameters.
figma_get_statusBRead-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_stylesARead-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_browserARead-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_variablesARead-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_styleADestructive
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_componentADestructive
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_filesARead-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_diagnosticsARead-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_modeCDestructive
Rename a mode in a collection.
Inputs: modeId (required), newName (required), collectionId (required).
figma_rename_variableCDestructive
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_complianceARead-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_assetsARead-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_componentsARead-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_descriptionBDestructive
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_propertiesBDestructive
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_tokensADestructive
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_variableADestructive
Update a variable value in a mode. Get IDs from figma_get_variables.
Inputs: value (required), modeId (required), variableId (required).
figma_useARead-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_screenARead-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_consoleARead-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
Scored across 63 tools
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.
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.
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.
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
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Connect AI assistants to your approved computer for files, commands, browser and desktop tasks.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables 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 npmMIT
- AlicenseNot gradedqualityDmaintenanceAI assistants can read and inspect Figma design context locally via a plugin, without external API keys or rate limits.15 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to inspect Figma selections, navigate pages, render previews, generate starter code, and submit user-approved canvas edits through a local bridge.3 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to access and manipulate Figma designs, including extracting design systems, creating and debugging UI components, and syncing design tokens bidirectionally.13,916 npmMIT