figma-ui-mcp
This server provides a bridge between AI coding assistants and Figma Desktop, enabling programmatic reading, writing, and validation of designs, with optional integrated design-system bundles. Core capabilities include:
Connectivity: Check plugin bridge status.
Design Creation & Modification: Execute JavaScript to create, modify, delete, clone, group, flatten, resize, batch operations, set selections/viewport, manage components/variants/properties, create styles (paint/text), variables, design tokens, prototype interactions (click, hover, press → navigate, overlay, swap with Smart Animate), and configure scroll behavior.
Design Reading & Inspection: Extract node trees, styles, variables, local components, CSS, design context; get screenshots or export SVG/PNG/JPG/SVG markup/base64; search nodes by type, name, fill, font; scan large frames for structured summaries.
Documentation & Rules: Access quick-start guides, critical design rules, and API reference for write operations (must be called before any write).
Design System Rule Sheet: Generate a comprehensive rule sheet from the current Figma file summarizing color tokens, typography, variables, and component catalog.
Design System Bundle Support (if configured): Inspect bundle status; load semantic context (fonts, spacing, typography roles, component roles, policies, Auto Layout blueprints); plan designs from natural language into structured generation plans (mandatory gate before write); search for addressable assets (icons, SVGs, images); validate generated frames against bundle rules (fonts, typography, tokens, spacing, component dimensions) ensuring error-free output before handoff.
Provides tools for reading and modifying Figma design files, including node structure, selection, styles, components, and screenshots, through a bridge plugin that connects to Figma Desktop.
Click on "Install 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., "@figma-ui-mcpshow me the current selection properties"
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.
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.

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 setupSetup wizard sẽ:
Tìm MCP client đang có trên máy.
Thêm cấu hình
figma-ui-mcpvà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 --yesThay codex bằng một trong các giá trị:
claude-code
claude-desktop
cursor
vscode
windsurfCó thể cấu hình nhiều client cùng lúc:
npm run setup -- --client codex,claude-code,cursor --yes2. Import plugin vào Figma
Mở Figma Desktop:
Plugins
→ Development
→ Manage plugins in development
→ Import plugin from manifestChọn file:
figma-ui-mcp/plugin/manifest.jsonChỉ 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 · Kiettt8Plugin cần hiển thị trạng thái Connected.
Cách sử dụng hằng ngày
Sau khi đã setup:
Mở Figma Desktop.
Mở design file cần làm việc.
Chạy
Figma UI MCP Bridge · Kiettt8.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 FigmaFigma 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" \
--yesBundle 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 handoffCá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/healthNế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:backgroundLệ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/healthPlugin vẫn hiện giao diện cũ
Mở
Manage plugins in development.Xóa đăng ký Figma UI MCP Bridge cũ.
Import lại đúng file
plugin/manifest.jsontrong repository này.Đó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 setupWizard 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.logTrên Linux:
systemctl --user status figma-ui-mcp-bridge.serviceSau đó chạy lại:
npm run setup:backgroundPhát triển source
Giao diện plugin:
plugin/ui.htmlLogic plugin:
src/plugin/MCP adapter:
server/index.jsProduct intent và generation plan:
server/product-knowledge.jsBundle asset resolver:
server/asset-resolver.jsBackground bridge:
server/bridge-daemon.jsSetup wizard:
scripts/setup-mcp.js
Build lại plugin sau khi sửa logic:
npm run build:pluginChạy test:
npm testTest phụ thuộc Internet cho icon library được tách riêng:
npm run test:networkXuấ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
38451lê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 toolsdesign_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.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | Maximum results. Default 12. | |
| query | Yes | Semantic ID, asset name, alias, merchant name, icon name, or keywords. | |
| reload | No | Reload bundle files before searching. | |
| source | No | Optional asset source filter. | |
| category | No | Optional category filter such as merchant-logo, icons, or brand-assets. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| recipe | No | Semantic recipe ID such as 'voucher-pocket'. Omit to load only global design-system rules. | |
| reload | No | Reload bundle files before building context. | |
| sessionId | No | Scope the pre-write gate to a specific Figma tab when multiple files are connected. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | Yes | The user's complete design request in Vietnamese or English. | |
| recipe | No | Optional exact recipe override. Normally omit and let routing resolve it. | |
| reload | No | Reload bundle files before planning. | |
| maxAssets | No | Maximum asset candidates included in the plan. Default 12. | |
| sessionId | No | Scope this plan to a specific Figma tab when multiple files are connected. Use the same sessionId in figma_write. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| reload | No | Reload the bundle manifest and semantic files from disk before checking. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| section | No | Which 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
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | Tree depth for get_design/get_selection. Number (default 10) or 'full' for unlimited. Higher = more detail but larger output. | |
| scale | No | Export scale for screenshot (default 1). | |
| detail | No | Detail level for get_design/get_selection: 'minimal' (~5% tokens), 'compact' (~30%), 'full' (default, 100%). Use minimal for large files. | |
| format | No | Image format for export_image: 'png' (default) or 'jpg'. | |
| nodeId | No | Target node ID (optional — omit to use current selection). | |
| nodeName | No | Target node name (alternative to nodeId). | |
| operation | Yes | ── 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. | |
| sessionId | No | Target a specific Figma file/tab when multiple are connected. Omit to auto-select. | |
| includeHidden | No | Include invisible nodes (visible:false) in results. Default false — hidden layers are skipped to reduce noise. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| sessionId | No | Target a specific Figma file/tab. Omit to auto-select. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | No | Root frame node ID to validate. | |
| recipe | No | Semantic recipe ID to enforce. | |
| nodeName | No | Root frame name when nodeId is not known. | |
| sessionId | No | Target Figma file session when multiple files are connected. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | JavaScript using figma.create(), figma.modify(), figma.setPage(), etc. | |
| sessionId | No | Target a specific Figma file/tab when multiple are connected. Omit to auto-select. |
TDQS
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.
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.
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.
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.
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.
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.
10 tool updates
v2.5.27- First observed
design_system_assets - First observed
design_system_context - First observed
design_system_plan - First observed
design_system_status - First observed
figma_docs - First observed
figma_read - First observed
figma_rules - First observed
figma_status - First observed
figma_validate - First observed
figma_write
TDQS
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.
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.
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.
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
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
The Figma MCP server brings Figma design context directly into your AI workflow.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Inspect and edit media canvases, run existing Flows, and retrieve results. Vyrl MCP token required.
- CanvaOAuthcom.canva.mcp
The Canva MCP server connects AI assistants (like Claude, ChatGPT, and Cursor) to Canva's API, enabling them to create and manage designs directly within chat conversations. Key capabilities include generating new designs from prompts, autofilling templates, searching and resizing existing designs, importing files from URLs, exporting designs as PDFs or images, and managing folders and comments without switching between tools.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables interaction with Figma tools and services through a standardized MCP interface.MIT
- FlicenseBqualityCmaintenanceA local bridge that lets MCP clients inspect, export, and modify Figma files through a development Figma plugin.65-
- AlicenseNot gradedqualityBmaintenanceLocal-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.1MIT
- AlicenseAqualityBmaintenanceEnables 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.7MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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