Skip to main content
Glama
mochammad123

MC Figma Bridge

by mochammad123

MC Figma Bridge

MCP server lokal untuk menghubungkan Cursor dengan file Figma yang sedang dibuka melalui Figma Plugin + WebSocket.

Arsitektur

Cursor / MCP Client
  -> MCP stdio server
  -> local WebSocket ws://localhost:3055
  -> Figma Plugin UI
  -> Figma Plugin main thread
  -> Active Figma document

Approach ini berbeda dari MCP database. Database bisa dikoneksi langsung lewat driver, sementara kontrol canvas Figma membutuhkan plugin yang aktif di editor.

Related MCP server: Talk to Figma MCP

Tools

  • figma_connection_status: cek status bridge dan plugin aktif.

  • figma_get_document_info: baca metadata file/page aktif.

  • figma_get_selection: baca node yang sedang dipilih.

  • figma_read_node: baca node by nodeId, atau selection pertama jika kosong.

  • figma_set_text: ganti isi text node.

  • figma_create_frame: buat frame baru di page aktif.

Setup

Install dependency:

pnpm install

Build:

pnpm build

Jalankan manual untuk development:

pnpm dev

Default WebSocket port adalah 3055. Bisa diganti dengan environment variable:

FIGMA_MCP_WS_PORT=3056 pnpm dev

Catatan: plugin Figma saat ini memakai port 3055 secara statis di figma-plugin/ui.html. Jika port server diganti, ubah port plugin juga.

Cursor MCP Config

Tambahkan server ini ke konfigurasi MCP Cursor:

{
  "mcpServers": {
    "mc-figma": {
      "command": "node",
      "args": [
        "C:\\Users\\IT 13\\Documents\\FAISAL\\RND\\MCP\\mc-figma\\dist\\index.js"
      ]
    }
  }
}

Untuk development, bisa pakai:

{
  "mcpServers": {
    "mc-figma": {
      "command": "pnpm",
      "args": [
        "--dir",
        "C:\\Users\\IT 13\\Documents\\FAISAL\\RND\\MCP\\mc-figma",
        "tsx",
        "src\\index.ts"
      ]
    }
  }
}

Load Plugin di Figma

  1. Buka Figma Desktop.

  2. Masuk ke Plugins -> Development -> Import plugin from manifest....

  3. Pilih figma-plugin/manifest.json.

  4. Jalankan plugin MC Figma Bridge.

  5. Pastikan status plugin menampilkan connected.

Batasan MVP

  • Figma harus terbuka dan plugin harus aktif.

  • Hanya satu plugin connection yang dilayani oleh bridge.

  • figma_set_text belum mendukung text node dengan mixed font.

  • Tool read memakai depth limit untuk mencegah response terlalu besar.

  • Ini cocok untuk workflow interaktif, bukan batch job backend headless.

Available Tools

6 tools
figma_connection_statusFigma Connection StatusA

Return the local WebSocket bridge status and active Figma plugin connection details.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.7/5.0
Behavior3/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 states it returns status and details, implying a read-only diagnostic operation, but it does not explicitly disclose side effects, prerequisites, or error behavior. This is adequate but minimal, with no extra context beyond the return value.

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 a single, concise sentence that front-loads the verb 'Return' and clearly states the resource. There is no unnecessary information or repetition, earning a perfect score.

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

Completeness3/5

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

With no output schema and no annotations, the description should provide more detail about what 'status' and 'connection details' include. It is sufficiently complete for a simple status tool but leaves vagueness about the exact fields returned.

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 zero parameters and the schema coverage is trivially 100%. Per the rubric, 0 parameters earns a baseline of 4. The description adds no parameter semantics because none exist.

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 returns the local WebSocket bridge status and active Figma plugin connection details. This is a specific verb+resource that distinguishes it from sibling tools like figma_get_document_info or figma_set_text, which handle document content.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus alternatives. It does not mention any context, prerequisites, or exclusions. The usage is only implied by the tool name and description, but there is no explicit direction for the agent.

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

figma_create_frameCreate Figma FrameC

Create a frame on the active Figma page and select it.

ParametersJSON Schema
NameRequiredDescriptionDefault
xNo
yNo
nameNoMCP Frame
widthNo
heightNo
timeoutMsNo

TDQS

C2.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 carries the full burden of behavioral disclosure. It discloses one side effect ('select it') and the target context ('active Figma page'), but says nothing about potential overwrites, permissions, error cases, or effects on the existing selection. For a mutation tool, this is minimal and leaves important behaviors undisclosed.

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 a single, front-loaded sentence that directly conveys the core purpose without filler. It is appropriately concise for the main action, though it excludes important semantic details. It earns its place structurally, but could be slightly expanded without losing conciseness.

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

Completeness2/5

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

Given the lack of annotations, output schema, and parameter descriptions, the description is insufficiently complete for an agent to confidently invoke the tool. It does not explain return values, how coordinates relate to the page, or the consequences of creating a frame. The description is too sparse to support correct invocation in varied contexts.

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

Parameters1/5

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

Schema description coverage is 0%, and the description adds no information about any of the 6 parameters (x, y, name, width, height, timeoutMs). The description does not compensate for the lack of parameter documentation, leaving the agent without guidance on coordinate meanings, size limits, or naming conventions. This is a significant gap.

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 action: 'Create a frame on the active Figma page and select it.' It specifies a concrete verb (create), a resource (frame), and a location (active Figma page), making the tool's purpose unambiguous. It also distinguishes from sibling tools, which are mostly read/inspection tools (e.g., figma_get_selection, figma_read_node), so a creation tool is clearly differentiated.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus alternatives, nor any conditions or prerequisites. It does not mention that this should be used to create a new frame as opposed to modifying existing ones or reading the document. There are no exclusions or explicit references to sibling tools, leaving the agent without context for selection.

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

figma_get_document_infoGet Figma Document InfoB

Read basic metadata for the active Figma file and current page through the plugin.

ParametersJSON Schema
NameRequiredDescriptionDefault
timeoutMsNo

TDQS

B3.3/5.0
Behavior3/5

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

With no annotations, the description carries the full behavioral burden. The verb 'read' implies a non-destructive operation, and the description adds scope (active file, current page), but it does not disclose any limitations, required context, or potential side effects beyond the basic read action.

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 a single, concise sentence that front-loads the verb and purpose. There is no redundant information or wasted words, making it easy to parse quickly.

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

Completeness2/5

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

The tool has no output schema and no annotations, so the description must explain what is returned and any prerequisites. It only says 'basic metadata' without specifying which fields are included, nor does it mention error cases or dependency on an open Figma file, leaving significant ambiguity.

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

Parameters2/5

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

Schema description coverage is 0%, and the tool description does not mention the timeoutMs parameter at all. The parameter name suggests a timeout in milliseconds, but no additional meaning or usage context is provided, leaving the agent to guess its effect.

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 reads basic metadata for the active Figma file and current page, using a specific verb ('read') and resource. This distinguishes it from siblings like figma_get_selection and figma_read_node, which target different data.

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

Usage Guidelines2/5

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

The description provides no guidance on when to use this tool versus alternatives, or any exclusions. It simply states what it does without mentioning situations where a different tool would be more appropriate.

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

figma_get_selectionGet Figma SelectionB

Read the currently selected nodes in the active Figma page.

ParametersJSON Schema
NameRequiredDescriptionDefault
depthNo
timeoutMsNo

TDQS

B3.3/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 discloses that this is a read operation (non-mutating), but says nothing about behavior when there is no selection, the meaning of depth, timeout semantics, or error conditions. Minimal disclosure beyond the basic function.

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?

A single, directly worded sentence with no filler, clearly front-loaded with the action. It is concise and to the point, every word earns its place.

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

Completeness2/5

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

The tool has two meaningful parameters and no output schema, but the description does not clarify depth semantics, timeout behavior, or return structure. Given the lack of annotations, the description is insufficient for an agent to fully understand behavior and edge cases.

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

Parameters1/5

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

Schema description coverage is 0%, so the description must compensate. It does not mention 'depth' or 'timeoutMs' at all, leaving their semantics entirely to the schema. The description adds no value beyond field names and defaults already shown in 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 uses the specific verb 'Read' with the resource 'currently selected nodes' in the active Figma page, clearly distinguishing it from sibling tools like figma_read_node (specific node) and figma_get_document_info (general info).

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 context is clear: use this tool to get the current selection. However, it does not explicitly mention alternatives or when not to use it, though the sister tools make the distinction implicit. This is clear context without exclusions.

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

figma_read_nodeRead Figma NodeA

Read a Figma node by ID. If nodeId is omitted, reads the first selected node in the active page.

ParametersJSON Schema
NameRequiredDescriptionDefault
depthNo
nodeIdNo
timeoutMsNo

TDQS

A3.7/5.0
Behavior3/5

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

Since no annotations are provided, the description carries the behavioral disclosure burden. It discloses the fallback behavior when nodeId is omitted, which is valuable. However, it does not explain what the tool returns, how the depth parameter affects results, or any potential side effects, leaving gaps for a read operation.

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, leading with the primary action and adding a conditional fallback without any unnecessary detail. It is well-structured and easy to parse.

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

Completeness2/5

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

The tool has no output schema and no annotations, so the description should cover return values and parameter effects. It covers the nodeId default but leaves depth and timeout entirely unexplained, and gives no indication of the response structure, making it incomplete for real-world use.

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

Parameters2/5

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

With 0% schema description coverage, the description must compensate. It indirectly explains nodeId by describing the omission behavior, adding some meaning. However, depth and timeoutMs are never mentioned, so the description fails to compensate for the other two 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 uses the specific verb 'read' with the resource 'Figma node' and explicitly mentions the nodeId parameter, clearly distinguishing it from sibling tools like figma_get_selection or figma_set_text. The added fallback behavior for omitted nodeId further clarifies its scope.

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?

It states that if nodeId is omitted, it reads the first selected node in the active page, providing a clear usage context. However, it does not explicitly name alternative tools or conditions when not to use it, so it lacks exclusionary guidance.

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

figma_set_textSet Figma TextA

Replace the characters of a Figma text node. If nodeId is omitted, uses the first selected node.

ParametersJSON Schema
NameRequiredDescriptionDefault
textYes
nodeIdNo
timeoutMsNo

TDQS

A3.8/5.0
Behavior3/5

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

With no annotations, the description carries the transparency burden. 'Replace' clearly indicates a mutating operation, and the fallback to selection is a useful behavioral detail. However, it fails to disclose failure modes (e.g., when no nodeId and no selection), irreversibility, or exact replacement semantics (full string vs partial).

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 a single sentence that leads with the action and includes the most important condition. It is concise without sacrificing necessary information, making it easy to parse quickly.

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

Completeness3/5

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

The tool appears simple, but the description omits key contextual details: what happens when neither nodeId nor a selection exists, the role of timeoutMs, and the return value (there is no output schema). It provides the core behavior but is incomplete for a tool with no annotations and an undocumented parameter.

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

Parameters2/5

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

Schema description coverage is 0%, so the description must compensate. It adds semantics only for nodeId (fallback to first selected node) and implicitly for text (the replacement string). The timeoutMs parameter is entirely unmentioned, leaving its purpose and acceptable values undocumented.

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 ('Replace') and a clear resource ('Figma text node'), which immediately distinguishes it from sibling read/create tools. It also adds a concrete detail about nodeId fallback, making the purpose unambiguous.

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 gives a clear usage hint: if nodeId is omitted, the first selected node is used. This implies when to rely on selection versus explicit node targeting. However, it doesn't explicitly mention alternatives or exclusions, such as not using it for other node types.

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

TDQS

B3.4/5.0
Disambiguation4/5

Tools are mostly distinct: connection status, document info, selection, node read, text set, and frame creation each target a clear purpose. However, figma_get_selection and figma_read_node can both involve reading selected nodes, which may cause slight confusion.

Naming Consistency4/5

Most tools follow a 'figma_verb_noun' pattern (get_document_info, set_text, create_frame), but 'figma_connection_status' deviates from the verb_noun structure, and there is a mix of 'get' and 'read' verbs. Overall, the pattern is still easily recognizable.

Tool Count5/5

Six tools is a well-scoped set for a Figma bridge, covering essential read and write operations without being excessive. Each tool earns its place in the collection.

Completeness3/5

The set covers basic metadata reading, node reading, text editing, and frame creation, but lacks operations like editing other node properties, creating text nodes, or deleting nodes. Agents can handle simple tasks but will hit limitations for broader design manipulation.

Maintenance

ActivityInactive
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

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/mochammad123/mcp-figma'

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