mcp-figma

Figma MCP 서버

Figma API와 상호 작용하는 MCP 서버입니다. 이 서버는 모델 컨텍스트 프로토콜을 통해 Figma API 메서드의 전체 세트를 제공합니다. 경우에 따라 용량이 큰 Figma 파일의 경우, figma_get_file에 depth = 1을 사용하고, 더 필요할 때 depth를 늘리도록 설정해야 할 수 있습니다.

도구

이 서버는 모든 Figma API 메서드를 MCP 도구로 구현합니다.

사용자 방법

figma_get_me - 현재 사용자 가져오기

파일 메서드

figma_get_file - 키로 Figma 파일 가져오기
figma_get_file_nodes - Figma 파일에서 특정 노드 가져오기
figma_get_images - Figma 파일에서 이미지 렌더링
figma_get_image_fills - Figma 파일에서 이미지 채우기 가져오기
figma_get_file_versions - Figma 파일의 버전 기록 가져오기

주석 방법

figma_get_comments - Figma 파일에서 주석 가져오기
figma_post_comment - Figma 파일에 주석 추가
figma_delete_comment - Figma 파일에서 주석 삭제
figma_get_comment_reactions - 댓글에 대한 반응 받기
figma_post_comment_reaction - 댓글에 반응 추가
figma_delete_comment_reaction - 댓글에서 반응 삭제

팀 및 프로젝트 방법

figma_get_team_projects - 팀에서 프로젝트 가져오기
figma_get_project_files - 프로젝트의 파일 가져오기

구성 요소 메서드

figma_get_team_components - 팀의 구성 요소 가져오기
figma_get_file_components - 파일에서 구성 요소 가져오기
figma_get_component - 키로 구성 요소 가져오기
figma_get_team_component_sets - 팀의 구성 요소 세트 가져오기
figma_get_file_component_sets - 파일에서 구성 요소 세트 가져오기
figma_get_component_set - 키로 구성 요소 집합 가져오기

스타일 방법

figma_get_team_styles - 팀 스타일 가져오기
figma_get_file_styles - 파일의 스타일 가져오기
figma_get_style - 키로 스타일 가져오기

웹훅 메서드(V2 API)

figma_post_webhook - 웹훅 만들기
figma_get_webhook - ID로 웹훅 가져오기
figma_update_webhook - 웹훅 업데이트
figma_delete_webhook - 웹훅 삭제
figma_get_team_webhooks - 팀을 위한 웹훅 받기

도서관 분석 방법

figma_get_library_analytics_component_usages - 라이브러리 분석 구성 요소 사용 데이터 가져오기
figma_get_library_analytics_style_usages - 라이브러리 분석 스타일 사용 데이터 가져오기
figma_get_library_analytics_variable_usages - 라이브러리 분석 변수 사용 데이터 가져오기

설치

Smithery를 통해 설치

Smithery를 통해 Claude Desktop용 mcp-figma를 자동으로 설치하려면:

지엑스피1

필수 조건

Node.js(v16 이상)
npm 또는 yarn

패키지 설치

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

설정

이 MCP 서버를 사용하려면 Figma API 토큰을 설정해야 합니다. 다음 세 가지 방법 중 하나로 설정할 수 있습니다.

1. 환경 변수

프로젝트 루트에 .env 파일을 만들거나 환경 변수를 직접 설정합니다.

FIGMA_API_KEY=your_figma_api_key

2. 명령줄 인수

서버를 시작할 때 Figma API 토큰을 명령줄 인수로 전달할 수 있습니다.

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

Claude Desktop과 함께 사용

claude_desktop_config.json 에 다음을 추가하세요.

npx 사용하기

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

직접 Node.js(환경 변수 포함)

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

직접 Node.js(명령줄 인수 포함)

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

/path/to/mcp-figma 저장소의 실제 경로로 바꾸세요.

예시

Figma 파일 받기

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

파일에서 주석 가져오기

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

웹훅 만들기

// Create a webhook
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

개발

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

특허

이 MCP 서버는 MIT 라이선스에 따라 라이선스가 부여됩니다. 즉, MIT 라이선스의 약관에 따라 소프트웨어를 자유롭게 사용, 수정 및 배포할 수 있습니다. 자세한 내용은 프로젝트 저장소의 LICENSE 파일을 참조하세요.

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

전체 API 기능을 갖춘 Figma MCP

Related Resources

Reddit Discussion about this server

Related MCP Servers

Figma MCP Server
TimHolden
A
security
F
license
A
quality
Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
2
106
TypeScript
Figma MCP Server
moonray
A
security
A
license
A
quality
Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.
Last updated -
1
2
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Claude Figma MCP
tonycueva
-
security
F
license
-
quality
A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
Last updated -
TypeScript

View all related MCP servers