Skip to main content
Glama
kiettt8-product

figma-ui-mcp

Figma UI MCP Bridge

Kiettt8 Custom Edition

Figma UI MCP Bridge giúp Codex, Claude Code, Cursor, VS Code và các MCP client khác đọc hoặc chỉnh sửa thiết kế trực tiếp trong Figma Desktop.

Bản này có giao diện plugin tùy chỉnh và bridge chạy ngầm. Sau khi cài đặt một lần, người dùng chỉ cần mở plugin trong Figma, không phải mở Terminal hoặc chạy npx figma-ui-mcp.

Figma UI MCP Bridge

Yêu cầu

  • Node.js 20 trở lên

  • Git

  • Figma Desktop

  • Một MCP client như Codex, Claude Code, Cursor, VS Code hoặc Windsurf

Figma bản web không dùng được với bridge local này.

Related MCP server: FigmaExporterMcp

Cách đơn giản nhất: nhờ AI cài

Gửi link repository này cho Codex, Claude Code hoặc Cursor Agent:

Cài repository này giúp tôi:
https://github.com/kiettt8-product/figma-ui-mcp

Hãy clone vào một thư mục cố định, chạy npm install, cấu hình MCP cho client
hiện tại, cài background bridge và kiểm tra port 38451. Không dùng package npm
của repository upstream.

AI có thể thực hiện phần cài đặt bằng Terminal. Người dùng chỉ cần import development plugin vào Figma một lần theo hướng dẫn bên dưới.

Claude Desktop dạng chat thông thường không có quyền Terminal nên không tự cài được. Hãy dùng Claude Code hoặc một agent có quyền chạy lệnh.

Tự cài đặt

1. Clone và setup

git clone https://github.com/kiettt8-product/figma-ui-mcp.git
cd figma-ui-mcp
npm install
npm run setup

Setup wizard sẽ:

  • Tìm MCP client đang có trên máy.

  • Thêm cấu hình figma-ui-mcp vào client được chọn.

  • Giữ nguyên các MCP server khác.

  • Tạo backup trước khi sửa file cấu hình.

  • Cài bridge chạy ngầm khi đăng nhập máy.

  • Khởi động bridge ngay sau khi setup.

Khi wizard hỏi cài background bridge, chọn Y hoặc nhấn Enter.

Nếu muốn chạy setup không cần trả lời:

npm run setup -- --client codex --yes

Thay codex bằng một trong các giá trị:

claude-code
claude-desktop
cursor
vscode
windsurf

Có thể cấu hình nhiều client cùng lúc:

npm run setup -- --client codex,claude-code,cursor --yes

2. Import plugin vào Figma

Mở Figma Desktop:

Plugins
→ Development
→ Manage plugins in development
→ Import plugin from manifest

Chọn file:

figma-ui-mcp/plugin/manifest.json

Chỉ cần import một lần. Không di chuyển hoặc xóa thư mục repository sau khi import vì Figma lưu đường dẫn đến file manifest.

3. Chạy plugin

Mở một Figma design file, sau đó chọn:

Plugins
→ Development
→ Figma UI MCP Bridge · Kiettt8

Plugin cần hiển thị trạng thái Connected.

Cách sử dụng hằng ngày

Sau khi đã setup:

  1. Mở Figma Desktop.

  2. Mở design file cần làm việc.

  3. Chạy Figma UI MCP Bridge · Kiettt8.

  4. Prompt cho Codex, Claude Code, Cursor hoặc MCP client đang dùng.

Không cần mở Terminal. Không cần chạy npm start hoặc npx figma-ui-mcp.

Bridge đã được hệ điều hành chạy ngầm từ trước:

Đăng nhập máy
→ background bridge chạy tại 127.0.0.1:38451
→ mở Figma plugin
→ plugin tự kết nối
→ MCP client gửi lệnh đến Figma

Figma vẫn yêu cầu người dùng tự mở development plugin. Plugin không thể tự khởi chạy process hệ điều hành do giới hạn sandbox của Figma.

Dùng kèm design system nội bộ

Design system không được commit vào repository public. Team đóng gói nó thành một thư mục bundle nội bộ, tải bundle về máy rồi setup một lần:

npm run setup -- \
  --client codex,claude-code,cursor \
  --bundle "/duong-dan/zalopay-design-system-3.0.0" \
  --yes

Bundle tối thiểu có cấu trúc:

zalopay-design-system-3.0.0/
├── manifest.json
├── semantic/catalog.json
├── fonts/manifest.json
└── recipes/

Sau khi cấu hình, MCP tự thực hiện luồng sau:

kiểm tra bundle và font
→ hiểu prompt và chọn intent, screen pattern, recipe, state, asset
→ đưa đúng phần product knowledge vào context cho AI
→ AI tạo màn hình bằng Figma component và Auto Layout
→ validator kiểm tra và yêu cầu sửa trước khi handoff

Các tool liên quan:

  • design_system_status: kiểm tra bundle, version và font bắt buộc.

  • design_system_plan: nhận prompt đầy đủ và tự chọn recipe, pattern, state, asset, prototype flow cùng checklist QA.

  • design_system_context: lấy rule và recipe trước khi thiết kế.

  • design_system_assets: tìm icon, logo merchant và ảnh trong bundle.

  • figma_validate: kiểm tra frame sau khi thiết kế; phải sửa hết lỗi trước khi handoff.

Khi bundle đã được cấu hình, figma_write sẽ từ chối chạy nếu AI chưa gọi design_system_plan hoặc chưa đọc context. Vì vậy người dùng không cần nhớ tên recipe hay nhắc AI dùng design system trong từng prompt.

Ví dụ prompt hằng ngày:

Thiết kế journey quản lý và sử dụng voucher trên ZaloPay Mobile, bắt đầu từ
entry point Ví ưu đãi ở Home và nối prototype tới Payment Success. Tự bổ sung
state và edge case, kiểm tra lại kết quả trước khi bàn giao.

AI client sẽ tự gọi design_system_plan, dùng context đã chọn và lấy asset qua figma.loadBundleAsset(...). Asset được giới hạn trong thư mục bundle và kiểm tra SHA-256 trước khi import vào Figma.

figma.loadIcon(...) cũng ưu tiên semantic alias trong bundle. Mỗi asset được gắn bundle ID, version và checksum vào node; figma_validate báo lỗi nếu icon được tự vẽ hoặc dùng thư viện ngoài trong khi bundle đã có icon tương ứng.

Nếu thiếu font bắt buộc, MCP sẽ dừng thao tác ghi thay vì âm thầm thay font và làm lệch layout.

Golden reference trong bundle chỉ nên để trạng thái candidate cho tới khi được team Design duyệt. Không đóng gói screenshot có dữ liệu cá nhân hoặc dữ liệu production.

Kiểm tra kết nối

Kiểm tra bridge:

curl http://127.0.0.1:38451/health

Nếu plugin đang mở, kết quả cần có:

{
  "pluginConnected": true
}

Trong MCP client, có thể yêu cầu:

Kiểm tra kết nối Figma bằng figma_status.

Nối prototype

MCP có thể tạo và đọc prototype interaction thật trong Figma:

  • Navigate giữa các frame.

  • Open, swap hoặc close overlay.

  • Back, scroll to và change to component variant.

  • Click, hover, press, drag, delay và keyboard trigger.

  • Instant, Dissolve, Smart Animate, Move, Push và Slide transition.

  • Cấu hình scroll ngang, dọc hoặc cả hai hướng.

Ví dụ prompt:

Nối nút Dùng ngay sang frame Voucher Detail bằng Smart Animate 300ms.
Nút Điều kiện mở Conditions Bottom Sheet dưới dạng overlay trượt từ dưới lên.
Nút đóng trong bottom sheet dùng Close.
Sau khi nối, đọc lại reactions để xác minh tất cả destination còn tồn tại.

Cập nhật phiên bản mới

Trong thư mục repository:

git pull origin main
npm install
npm run setup:background

Lệnh cuối sẽ cập nhật và restart background bridge. Không cần import lại manifest nếu repository vẫn nằm ở đường dẫn cũ.

Xử lý lỗi nhanh

Plugin báo chạy npx figma-ui-mcp

Cài lại background bridge:

npm run setup:background
curl http://127.0.0.1:38451/health

Plugin vẫn hiện giao diện cũ

  1. Mở Manage plugins in development.

  2. Xóa đăng ký Figma UI MCP Bridge cũ.

  3. Import lại đúng file plugin/manifest.json trong repository này.

  4. Đóng và chạy lại plugin.

MCP client đang dùng nhầm bản npm

Không dùng cấu hình:

{
  "command": "npx",
  "args": ["figma-ui-mcp"]
}

Chạy lại:

npm run setup

Wizard sẽ cấu hình client dùng trực tiếp server/index.js trong repository này.

Port 38451 không hoạt động

Trên macOS:

launchctl print gui/$(id -u)/io.github.kiettt8-product.figma-ui-mcp-bridge
tail -50 ~/Library/Logs/FigmaUIMCP/bridge.error.log

Trên Linux:

systemctl --user status figma-ui-mcp-bridge.service

Sau đó chạy lại:

npm run setup:background

Phát triển source

  • Giao diện plugin: plugin/ui.html

  • Logic plugin: src/plugin/

  • MCP adapter: server/index.js

  • Product intent và generation plan: server/product-knowledge.js

  • Bundle asset resolver: server/asset-resolver.js

  • Background bridge: server/bridge-daemon.js

  • Setup wizard: scripts/setup-mcp.js

Build lại plugin sau khi sửa logic:

npm run build:plugin

Chạy test:

npm test

Test phụ thuộc Internet cho icon library được tách riêng:

npm run test:network

Xuất metadata từ một file design system đang mở trong Figma:

npm run bundle:export -- --session <session-id> --output <thu-muc-output>

Exporter tạo catalog kỹ thuật ban đầu. Các semantic role và recipe theo từng product vẫn cần được review trước khi phát hành bundle nội bộ.

Product knowledge có thể được đóng gói thêm tại product/catalog.json; semantic asset alias tại assets/semantic-catalog.json. Khi chạy bundle:pack, exporter tự thêm các entrypoint này vào manifest mà không phá bundle schema cũ.

Sau khi review hoặc sửa semantic/, fonts/ hay recipes/, đóng gói lại mà không cần quét Figma lần nữa:

npm run bundle:pack -- --output <thu-muc-bundle>

Bảo mật

  • Bridge mặc định chỉ chạy tại 127.0.0.1.

  • Không expose port 38451 lên Internet.

  • Không đổi bridge sang public host nếu chưa có authentication và firewall.

  • Không commit bundle, asset nội bộ hoặc file font có license vào repository public.

  • Kiểm tra thao tác do AI tạo trước khi áp dụng lên design file quan trọng.

Nguồn và giấy phép

Repository này là bản phát triển độc lập dựa trên TranHoaiHung/figma-ui-mcp.

  • Nền tảng MCP và Figma plugin: dự án gốc

  • Custom UI, background setup và tài liệu: Kiettt8

  • License: MIT

Available Tools

10 tools
design_system_assetsA

Search the configured portable bundle for checksum-addressable semantic assets, component SVGs, icons, merchant marks, and raster images. Prefer an exact semantic asset ID from design_system_plan. Import a result inside figma_write with figma.loadBundleAsset(asset.id, opts); never draw a placeholder when a required bundled asset exists.

ParametersJSON Schema
NameRequiredDescriptionDefault
limitNoMaximum results. Default 12.
queryYesSemantic ID, asset name, alias, merchant name, icon name, or keywords.
reloadNoReload bundle files before searching.
sourceNoOptional asset source filter.
categoryNoOptional category filter such as merchant-logo, icons, or brand-assets.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It reveals that the tool searches a 'configured portable bundle' with checksum-addressing, references importing via figma.loadBundleAsset, and prohibits drawing placeholders when a bundled asset exists. This adds meaningful context beyond the schema, though it does not explicitly state read-only behavior or describe return format.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three sentences, front-loaded with the core purpose. It contains no filler and every sentence earns its place: purpose, preferred ID usage, and integration/usage rule. This is appropriately sized and well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema and no annotations, the description provides enough context for an agent to select and invoke the tool: it defines the search scope, asset types, preferred query source, and how to import results. It could mention return format or reload side effects, but it is largely complete for a search tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description adds limited parameter meaning: 'Prefer an exact semantic asset ID from design_system_plan' clarifies the intended use of the query parameter, but it does not elaborate on limit, reload, source, or category beyond what the schema already states. The schema descriptions are already comprehensive.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb and resource: 'Search the configured portable bundle for checksum-addressable semantic assets, component SVGs, icons, merchant marks, and raster images.' This clearly identifies the tool's function and enumerates asset types, distinguishing it from sibling tools like design_system_plan or figma_read, which serve planning and reading roles.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context for using the tool: prefer an exact semantic asset ID from design_system_plan, and import a result inside figma_write with figma.loadBundleAsset. It also states a behavioral rule ('never draw a placeholder when a required bundled asset exists'). However, it does not explicitly name alternative tools or state when not to use this tool, so it falls short of a 5.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_system_contextA

Load prompt-ready semantic design-system rules from the configured bundle. Includes font dependencies, spacing tokens, typography roles, component roles, generation policies, and an optional screen recipe with an Auto Layout blueprint. Use this instead of guessing values from screenshots.

ParametersJSON Schema
NameRequiredDescriptionDefault
recipeNoSemantic recipe ID such as 'voucher-pocket'. Omit to load only global design-system rules.
reloadNoReload bundle files before building context.
sessionIdNoScope the pre-write gate to a specific Figma tab when multiple files are connected.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must convey behavioral traits. It lists the contents (font dependencies, spacing tokens, typography roles, etc.) and mentions the optional recipe with Auto Layout blueprint, adding context. Yet it does not disclose whether the operation is read-only, has side effects, or requires specific configuration or permissions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is only two sentences long, with the first sentence front-loading the core purpose and the second adding useful content details and a directive. No wasted words, making it concise and well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema, the description gives a good sense of what is returned by listing the categories of rules and mentioning the optional recipe blueprint. However, it does not specify the exact output structure or what 'prompt-ready' means in terms of formatting, leaving a slight gap in completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

All three parameters have detailed descriptions in the schema (recipe, reload, sessionId), covering 100% of the parameters. The description itself adds no parameter-specific information, so it relies entirely on the schema, justifying the baseline score.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool loads prompt-ready semantic design-system rules from a configured bundle, using the specific verb 'load' and naming the resource. It also distinguishes itself from guessing values from screenshots, which sets it apart from sibling tools like figma_read.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly directs users to 'Use this instead of guessing values from screenshots', providing a clear use case. However, it does not name alternative tools or detail when not to use them, so guidance is clear but not exhaustive.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_system_planA

Turn the user's natural-language design request into a deterministic, bundle-backed generation plan. Resolves product intent, screen patterns, recipes, states, candidate golden references, bundled assets, prototype flow, and the validation/repair checklist. MANDATORY before figma_write whenever a design-system bundle is configured. Pass the user's complete request, not a shortened keyword.

ParametersJSON Schema
NameRequiredDescriptionDefault
promptYesThe user's complete design request in Vietnamese or English.
recipeNoOptional exact recipe override. Normally omit and let routing resolve it.
reloadNoReload bundle files before planning.
maxAssetsNoMaximum asset candidates included in the plan. Default 12.
sessionIdNoScope this plan to a specific Figma tab when multiple files are connected. Use the same sessionId in figma_write.

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses determinism, bundle-backed behavior, and the planning scope across many components, and it clarifies that the tool is a planning step, not a write operation. However, it does not mention potential side effects, return format, or failure modes, though the absence of such is less critical for a planning tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three sentences: a clear purpose statement, a breakdown of plan components, and a mandatory usage directive. Every sentence earns its place, and the most important information is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite no output schema, the description enumerates the plan's contents (intent, patterns, recipes, states, references, assets, flow, checklist) and specifies its role in the workflow. This gives a complete picture of what the tool produces and how to invoke it, which is strong for a complex planning tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema covers 100% of parameters with meaningful descriptions, so the baseline is 3. The description adds the directive to pass the complete request rather than a shortened keyword, but this largely echoes the prompt parameter's schema description and does not add new meaning for the other parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool turns natural-language design requests into a deterministic, bundle-backed generation plan, and enumerates the plan components (product intent, screen patterns, recipes, states, candidate references, assets, flow, checklist). It distinguishes itself from siblings by explicitly being the mandatory precursor to figma_write.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly instructs that the tool is 'MANDATORY before figma_write whenever a design-system bundle is configured', which provides strong when-to-use guidance. It also tells the user to pass the complete request rather than a shortened keyword, further clarifying the expected usage pattern.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_system_statusA

Inspect the configured portable design-system bundle and run dependency preflight. Returns bundle version, available semantic recipes, required fonts, missing weights, and readiness. Call this before generating a design that must follow an internal design system.

ParametersJSON Schema
NameRequiredDescriptionDefault
reloadNoReload the bundle manifest and semantic files from disk before checking.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden. It discloses the read-only nature via 'inspect' and 'preflight' and describes the outputs (bundle version, recipes, fonts, readiness), giving the agent a strong sense of what to expect. It does not explicitly mention side effects, but the wording implies no mutation, which is adequate for this tool type.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, front-loads the purpose, and every clause adds value (action, return data, usage timing). No fluff or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite lacking an output schema, the description enumerates the return fields, covering the essential behavioral contract. It does not detail error conditions or interpretation of readiness, but for a status/preflight tool with one optional param, it is sufficiently complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with the 'reload' parameter fully described in the input schema. The description adds no additional parameter detail, so a baseline score of 3 is appropriate because the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's action ('Inspect', 'run dependency preflight') and specific resource ('configured portable design-system bundle'). It lists the exact return values, distinguishing it from sibling tools like figma_status and design_system_assets.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit instructions to call before generating design-system-compliant work provide clear use context. While no alternatives or exclusions are named, the timing and purpose are unambiguous, so this meets the 'clear context, no exclusions' level.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_docsA

Get the API reference and design rules for figma_write. Call with no args first — returns quick-start guide + critical rules. Then load specific sections as needed: section='rules' (design principles, token rules, layer order, component-first), section='layout' (auto-layout, button/card/badge/progress/mobile rules), section='api' (create/modify/delete/clone/batch/read operations + workflow), section='tokens' (variables, multi-mode, paint styles, text styles), section='icons' (loadImage, loadIcon, loadIconIn, icon libraries, coloring, sizing). Always call figma_docs BEFORE any figma_write code.

ParametersJSON Schema
NameRequiredDescriptionDefault
sectionNoWhich section to load. Omit (or null) for quick-start + critical rules. Load layout before any auto-layout work. Load api for full operation reference. Load tokens for variable/multi-mode work. Load icons for image/icon placement.

TDQS

A4.9/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden of behavioral disclosure. It explains the default behavior (no-args returns quick-start + critical rules), what each section returns, and the ordering constraint relative to figma_write. This is rich contextual transparency for a read-only documentation tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured and front-loaded: it opens with the main purpose, immediately instructs to call with no args first, then lists the sections with parenthetical details, and ends with a critical rule. Every sentence earns its place; no wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with a single optional parameter and no output schema, the description is remarkably complete. It covers invocation patterns, section-specific content, and the workflow constraint. An agent has all necessary information to call the tool correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and the schema already gives useful descriptions for the 'section' parameter. The tool description adds extra detail by enumerating example contents for each section (e.g., 'design principles, token rules, layer order' for rules), helping the agent choose the right section. This goes beyond the schema, so 4 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Get the API reference and design rules for figma_write.' It is a specific verb+resource combination that distinguishes it from siblings by positioning it as the documentation/pre-requisite tool for figma_write, and it lists concrete content sections.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage guidance is explicit and actionable: 'Call with no args first' then 'load specific sections as needed.' It also provides a hard rule: 'Always call figma_docs BEFORE any figma_write code.' This tells the agent exactly when and how to use the tool, including a workflow prerequisite.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_readA

READ design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.

ParametersJSON Schema
NameRequiredDescriptionDefault
depthNoTree depth for get_design/get_selection. Number (default 10) or 'full' for unlimited. Higher = more detail but larger output.
scaleNoExport scale for screenshot (default 1).
detailNoDetail level for get_design/get_selection: 'minimal' (~5% tokens), 'compact' (~30%), 'full' (default, 100%). Use minimal for large files.
formatNoImage format for export_image: 'png' (default) or 'jpg'.
nodeIdNoTarget node ID (optional — omit to use current selection).
nodeNameNoTarget node name (alternative to nodeId).
operationYes── Design-to-code (use these for code generation) ── get_design_context: AI-optimized payload for a node — flex layout, token-resolved colors, typography with style names, component instances with variant properties. Best single call for design→React/Vue/Swift code. get_css: ready-to-use CSS string for a single node — background, flex, border, radius, shadow, typography, opacity, transform. get_component_map: list every component instance in a frame with componentSetName, variantLabel, properties, and suggestedImport path. Use to scaffold import statements. get_unmapped_components: find component instances that have no description in Figma (likely no code mapping yet). Prompts AI to ask user for correct import paths. ── Inspect ── get_node_detail: structured properties for a single node — fills, bound variables (resolved to name+value), style refs (resolved to name+hex), instance overrides (full field list), componentSetName/variantLabel. get_selection: full design tree of selected node(s) + design tokens summary. get_design: full node tree for a frame/page (depth param: number or 'full'). get_page_nodes: top-level frames on the current page. getReactions: prototype triggers and actions attached to a node. ── Styles & tokens ── get_styles: all local paint, text, effect, grid styles. get_variables: all local Design Token variables — collections, modes, resolved values. get_local_components: component listing with descriptions + variant property definitions. ── Export ── screenshot: PNG of a node — displays inline in Claude Code. export_svg: SVG markup string. export_image: base64 PNG/JPG for saving to disk (scale param for resolution). ── Search ── search_nodes: filter by type, namePattern (wildcard *), fill color, fontFamily, fontSize, hasImage, hasIcon. scan_design: structured summary of large frames — all text, colors, fonts, images, icons, sections. ── Viewport ── get_viewport: current viewport center, zoom, bounds.
sessionIdNoTarget a specific Figma file/tab when multiple are connected. Omit to auto-select.
includeHiddenNoInclude invisible nodes (visible:false) in results. Default false — hidden layers are skipped to reduce noise.

TDQS

A3.8/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must carry the full burden. It says 'READ' and lists extractable items, but does not explicitly disclose that it is read-only/non-destructive, mention authentication needs, or note limitations. The extensive operation descriptions in the schema are not part of the main description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, front-loads the main purpose, and contains no unnecessary words. It is appropriately sized for a high-level tool summary.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (18 operations, 9 parameters) and the rich schema descriptions, the description provides a sufficient high-level overview. It covers major use cases ('understand an existing design', 'inspect what's on the canvas') while the schema fills in operation-level details. It does not mention some operations like search or viewport, but these are documented in the schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The main description adds no parameter-specific meaning, but the schema's operation enum and parameter descriptions provide detailed semantics. The description itself does not compensate beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'READ design data from Figma' with a specific verb and resource, and lists extractable content (node trees, colors, typography, spacing, screenshots). It differentiates from sibling tools like figma_write, which is the write counterpart.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear usage context: 'Use to understand an existing design before generating code, or to inspect what's on the canvas.' It does not explicitly mention alternatives or when not to use, but the read/write distinction from siblings is implied.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_rulesA

Generate a design system rule sheet from the current Figma file — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown block. Equivalent to official Figma MCP's create_design_system_rules. Call once at the start of a design-to-code session to give the AI full context: what tokens to use, what text styles exist, which components are available. Re-run when the design system changes.

ParametersJSON Schema
NameRequiredDescriptionDefault
sessionIdNoTarget a specific Figma file/tab. Omit to auto-select.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses the behavior of aggregating current design data into a markdown block without modifying anything. The phrasing implies a read-only operation, and the usage note suggests it is safe and idempotent. It lacks explicit mention of permissions or side effects, but the described behavior is clear.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three sentences and front-loaded with the core function. It packs essential information—what it aggregates, the output format, and when to use it—without any filler or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with one optional parameter and no output schema, the description gives a solid overview of the expected output (markdown block with tokens, styles, variables, components). It doesn't specify the exact markdown structure, but the enumerated contents and usage scenario provide sufficient context for an agent to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for the single optional sessionId parameter. The description adds minimal meaning beyond the schema, only mentioning that omitting it auto-selects the current file. Since the schema already explains the parameter, this score is the baseline.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool generates a design system rule sheet by aggregating color tokens, typography, variables, and components. It uses a specific verb ('generate') and resource ('design system rule sheet'), and distinguishes itself from siblings by mentioning the exact content and the equivalent official tool name.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit usage guidance: 'Call once at the start of a design-to-code session' and 'Re-run when the design system changes.' It also states the purpose—giving the AI full context—which clarifies when to use this tool over others that read or write specific parts of the file.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_statusA

Check whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are present, so the description carries the burden. It clearly states the tool performs a check, implying read-only behavior. However, it does not explicitly state side effects (none expected) or return format, which is a minor gap for a health-check tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two concise sentences, front-loaded with the action and followed by a clear directive. Every word earns its place; no redundancy or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a zero-parameter health check with no output schema, the description adequately explains the tool's purpose and usage context. It does not describe the return value format, but 'check whether' implies a simple boolean. The explicit 'call first' instruction adds important operational context. Overall, sufficient for the tool's simplicity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has 0 parameters, so the baseline is 4. The schema is empty and the description adds no parameter details, but that's acceptable since there are no inputs to document.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Check') and resource ('Figma plugin bridge') with a clear outcome ('is connected'). It distinguishes from sibling tools by establishing itself as a connectivity probe, not a data-reading or write tool.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly instructs 'Always call this first to confirm the plugin is running before any other tool,' which is a direct when-to-use directive. This clearly differentiates it from alternatives and sets a usage order without needing to mention siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_validateA

Validate a generated Figma frame against the configured design-system bundle. Checks fonts, typography roles, token colors, viewport, component dimensions, repeated-item spacing, vertical rhythm, and recipe-specific padding. Fix every error and re-run before handing the design to the user.

ParametersJSON Schema
NameRequiredDescriptionDefault
nodeIdNoRoot frame node ID to validate.
recipeNoSemantic recipe ID to enforce.
nodeNameNoRoot frame name when nodeId is not known.
sessionIdNoTarget Figma file session when multiple files are connected.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the behavioral disclosure burden. It reveals that validation checks a specific list of design-system properties (fonts, typography roles, token colors, viewport, component dimensions, etc.) and that the tool does not fix errors itself—users/agents must fix and re-run. It does not explicitly state whether the tool is read-only or describe the exact output format, but the workflow strongly implies it returns errors.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the primary action and purpose. The first sentence identifies the tool's job, the second lists concrete checks and the expected workflow. No wasted words or redundant restatements of schema fields.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Moderate complexity (4 optional params, no output schema, no annotations) and the description covers the core purpose, checks, and usage context. It could be more explicit about the return value/error format and whether any side effects occur, but for a validation tool this is reasonably complete for an agent to select and invoke it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema provides 100% coverage with clear parameter descriptions for nodeId, recipe, nodeName, and sessionId. The description adds minimal extra meaning beyond mentioning 'recipe-specific padding,' which slightly elaborates the recipe parameter. Since the schema already does the heavy lifting, a baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description starts with a specific verb ('Validate') and a clear resource ('a generated Figma frame against the configured design-system bundle'). It distinguishes itself from siblings like figma_read, figma_write, and figma_status by focusing on design-system compliance validation, not reading/writing/status.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear usage context: use after a frame is generated and before handing the design to the user, with an explicit 'fix every error and re-run' workflow. It does not explicitly name alternatives or exclusions, but the placement (post-generation, pre-handoff) makes the intended when-to-use fairly clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

figma_writeA

Execute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. When a design-system bundle is configured, call design_system_plan with the user's full request before writing; the server enforces this gate. Use figma.loadBundleAsset(reference, opts) for resolved internal SVG or raster assets, then call figma_validate after writing. Use the figma proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMode, clearFrameVariableMode, createPaintStyle, createTextStyle, createComponent. Prototyping: setReactions, getReactions, removeReactions (click/hover/press → navigate/overlay/swap with Smart Animate transitions). Scroll: setScrollBehavior (overflowDirection: NONE/HORIZONTAL/VERTICAL/BOTH). Variants: setComponentProperties, swapComponent, getComponentProperties. Component property definitions (master-side, required for instance text overrides to recalc auto-layout): addComponentProperty (TEXT/BOOLEAN/INSTANCE_SWAP), bindComponentPropertyToText, removeComponentProperty. The code runs in a sandboxed VM: no access to require, process, fs, fetch, or network.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesJavaScript using figma.create(), figma.modify(), figma.setPage(), etc.
sessionIdNoTarget a specific Figma file/tab when multiple are connected. Omit to auto-select.

TDQS

A4.7/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description fully covers behavioral traits: mandatory pre-conditions, sandbox restrictions, async Promise-based methods, and specific side effects of misuse. It also enumerates supported operation categories, which is far beyond minimal disclosure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is lengthy and detailed, but appropriately so for a complex tool with many capabilities. It is front-loaded with the mandatory warning and organized into logical sections (operations, tokens, prototyping, etc.). Slightly verbose but every sentence carries useful information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Thoroughly covers the tool's complexity: operation types, asset handling, validation, design tokens, prototype interactions, sandbox limits, and required ordering. However, it does not describe return values or error handling, which would be helpful given the absence of an output schema. Otherwise highly complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers 100% of parameters, but description adds substantial meaning for `code` by providing operation examples, design token APIs, and expected JavaScript patterns. The `sessionId` parameter is not elaborated, but schema already handles it. The added detail raises value above baseline.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states it executes JavaScript code to CREATE or MODIFY designs in Figma, with a specific verb and resource. Distinguishes itself from sibling tools like figma_read and figma_validate by focusing on write operations and listing concrete operation types.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly mandates calling figma_docs before writing, and design_system_plan when configured, with warnings about consequences. Names figma_validate as a follow-up step, providing clear when-to-use context and differentiating from alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 10 tool updatesv2.5.27
    • First observeddesign_system_assets
    • First observeddesign_system_context
    • First observeddesign_system_plan
    • First observeddesign_system_status
    • First observedfigma_docs
    • First observedfigma_read
    • First observedfigma_rules
    • First observedfigma_status
    • First observedfigma_validate
    • First observedfigma_write

TDQS

A4.3/5.0
Disambiguation4/5

Most tools have clearly distinct purposes: read, write, validate, docs, assets, status, plan. The only overlap is between figma_rules and design_system_context, both providing design rules but from different sources, which could cause minor confusion.

Naming Consistency4/5

The consistent 'figma_' and 'design_system_' prefixes create clear namespaces. However, the second part mixes nouns (status, docs, rules, assets, context) and verbs (read, write, validate, plan), preventing a fully uniform verb_noun pattern.

Tool Count5/5

10 tools is perfectly within the ideal range and each tool serves a distinct step in the design workflow—status check, planning, reading, writing, validation, and design-system management. No tool feels redundant or excessive.

Completeness5/5

The set covers the complete lifecycle: connectivity check, design context gathering, planning, code generation, asset import, and validation. There are no obvious missing operations for the intended purpose of generating Figma UI from a design system.

Maintenance

ActivitySlowing
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    B
    maintenance
    Local-first MCP bridge for live Figma documents, enabling design inspection, editing, asset export, component authoring, and variable management through a plugin and WebSocket server without consuming Figma REST API requests.
    1
    MIT
  • A
    license
    A
    quality
    B
    maintenance
    Enables Codex and other MCP clients to read design context from Figma Desktop via a local bridge, providing design tokens, component trees, and screenshots without an API token.
    7
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kiettt8-product/figma-ui-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server