AI Agent 연결#

주요 MCP 클라이언트에 figma-agent-mcp를 등록하는 방법입니다. 먼저 Figma 플러그인을 설치하고, 도구를 테스트하기 전에 브리지가 녹색 상태인지 확인하세요.

#공통 사전 요구 사항

1. PATH에 있는 Node.js ≥ 20 (node -v, npx -v)
2. Figma Desktop과 실행 중인 Figma Agent Kit 플러그인(MCP Bridge 연결됨)
3. 고정하지 않은 npx -y figma-agent-mcp 사용 권장(항상 최신 버전). 고정 설치에만 @x.y.z를 사용합니다
4. 선택 사항인 사용자 지정 브리지 포트(플러그인과 일치해야 함):

"env": { "FIGMA_AGENT_MCP_PORT": "1998" }

#공통 stdio 스니펫(JSON 클라이언트)

대부분의 에디터는 mcpServers 아래에서 다음 구조를 지원합니다.

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

#스모크 테스트(모든 클라이언트)

Figma에서 프레임을 선택한 상태로 에이전트에 다음을 요청합니다.

1. list_files
2. get_selection
3. get_node / get_screenshot

MCP 프로세스가 정상이라면 37 tools가 표시됩니다.

#Cursor

문서 / UI: Cursor Settings → MCP(또는 JSON을 직접 편집).

공통 JSON 스니펫을 붙여 넣고 저장한 뒤 MCP를 재시작 / 새로 고침합니다.

Cursor의 MCP 목록에서 figma-agent-mcp · 37 tools enabled를 확인합니다.

#Claude Code

공식 가이드: Claude Code MCP quickstart

#CLI(권장)

# User scope — available in all projects
claude mcp add --scope user figma-agent-mcp -- npx -y figma-agent-mcp

# Or project scope — writes .mcp.json (share with the team)
claude mcp add --scope project figma-agent-mcp -- npx -y figma-agent-mcp

사용자 지정 포트:

claude mcp add --scope user figma-agent-mcp \
  --env FIGMA_AGENT_MCP_PORT=1998 \
  -- npx -y figma-agent-mcp

#구성 파일

.mcp.json 예시:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

Claude Code를 다시 시작한 후 /mcp를 실행하여 서버 연결을 확인합니다. 처음 사용할 때 메시지가 나타나면 프로젝트 .mcp.json 서버를 승인합니다.

#Codex (OpenAI)

공식 가이드: Codex MCP

Codex는 TOML을 사용합니다(신뢰된 프로젝트의 ~/.codex/config.toml 또는 프로젝트 .codex/config.toml). ChatGPT desktop / Codex CLI / IDE extension은 이 구성을 공유합니다.

#CLI

codex mcp add figma-agent-mcp -- npx -y figma-agent-mcp

# With custom port
codex mcp add figma-agent-mcp \
  --env FIGMA_AGENT_MCP_PORT=1998 \
  -- npx -y figma-agent-mcp

codex mcp list

#config.toml

[mcp_servers.figma-agent-mcp]
command = "npx"
args = ["-y", "figma-agent-mcp"]

환경 변수를 포함하는 경우:

[mcp_servers.figma-agent-mcp]
command = "npx"
args = ["-y", "figma-agent-mcp"]

[mcp_servers.figma-agent-mcp.env]
FIGMA_AGENT_MCP_PORT = "1998"

편집 후 Codex / IDE extension을 다시 시작합니다.

#Qoder

공식 가이드: Qoder MCP

1. Qoder Settings를 엽니다(아바타 또는 ⌘⇧, / Ctrl+Shift+,)
2. 왼쪽 탐색 메뉴 → MCP
3. My Servers → + Add
4. 공통 JSON 스니펫을 붙여 넣습니다(STDIO: command npx, args는 위와 같음)
5. 저장합니다 — 연결되면 링크 아이콘이 표시되며, 펼쳐서 도구를 볼 수 있습니다

Chat에서 Agent mode를 사용해야 모델이 MCP 도구를 호출할 수 있습니다(필요 시 프롬프트 확인).

대신 서버가 표시된다면 MCP Square를 탐색할 수도 있지만, 이 패키지에는 수동 STDIO 추가가 안정적인 방법입니다.

#CodeBuddy

공식 가이드: CodeBuddy Config MCP

1. 사이드바 채팅 → CodeBuddy Settings(오른쪽 상단)
2. MCP 탭을 엽니다
3. Add MCP를 선택합니다(목록에 있다면 MCP Market에서 설치)
4. 다음과 같은 JSON을 붙여 넣습니다.

{
  "mcpServers": {
    "figma-agent-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"],
      "description": "Local Figma Desktop bridge (Figma Agent Kit)"
    }
  }
}

5. 녹색 상태를 확인하고, 선택 사항으로 Try to Run을 실행한 뒤 Figma를 연 상태에서 Craft Agent를 사용합니다

#Trae

공식 가이드: Trae — Add MCP servers · 中文

#UI(전역)

1. Settings → MCP
2. Add → Add Manually를 선택합니다(사용 가능한 경우 marketplace도 가능)
3. 공통 JSON 스니펫을 붙여 넣고 확인합니다

Raw Config (JSON)을 열어 Trae의 mcp.json에 병합할 수도 있습니다.

#프로젝트 수준

1. 프로젝트 루트에 동일한 mcpServers JSON으로 .trae/mcp.json을 만듭니다
2. Trae 빌드에 해당 토글이 있다면 Settings → MCP에서 project-level MCP를 활성화합니다

SOLO / Work mode: 도구가 불안정하다면 프로젝트 수준 구성을 사용하고 에이전트에 figma-agent-mcp / list_files 사용을 명시적으로 요청하세요.

#npx 대신 로컬 빌드 사용

모든 JSON 클라이언트가 빌드된 바이너리를 가리키도록 설정할 수 있습니다.

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "node",
      "args": ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]
    }
  }
}

Codex TOML:

[mcp_servers.figma-agent-mcp]
command = "node"
args = ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]

시작하기 — 소스에서 개발을 참조하세요.

#문제 해결

추가 정보: FAQ.