Figma MCP 서버

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

도구

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

사용자 방법

1. figma_get_me - 현재 사용자 가져오기

파일 메서드

2. figma_get_file - 키로 Figma 파일 가져오기

3. figma_get_file_nodes - Figma 파일에서 특정 노드 가져오기

4. figma_get_images - Figma 파일에서 이미지 렌더링

5. figma_get_image_fills - Figma 파일에서 이미지 채우기 가져오기

6. figma_get_file_versions - Figma 파일의 버전 기록 가져오기

주석 방법

7. figma_get_comments - Figma 파일에서 주석 가져오기

8. figma_post_comment - Figma 파일에 주석 추가

9. figma_delete_comment - Figma 파일에서 주석 삭제

10. figma_get_comment_reactions - 댓글에 대한 반응 받기

11. figma_post_comment_reaction - 댓글에 반응 추가

12. figma_delete_comment_reaction - 댓글에서 반응 삭제

팀 및 프로젝트 방법

13. figma_get_team_projects - 팀에서 프로젝트 가져오기

14. figma_get_project_files - 프로젝트의 파일 가져오기

구성 요소 메서드

15. figma_get_team_components - 팀의 구성 요소 가져오기

16. figma_get_file_components - 파일에서 구성 요소 가져오기

17. figma_get_component - 키로 구성 요소 가져오기

18. figma_get_team_component_sets - 팀의 구성 요소 세트 가져오기

19. figma_get_file_component_sets - 파일에서 구성 요소 세트 가져오기

20. figma_get_component_set - 키로 구성 요소 집합 가져오기

스타일 방법

21. figma_get_team_styles - 팀 스타일 가져오기

22. figma_get_file_styles - 파일의 스타일 가져오기

23. figma_get_style - 키로 스타일 가져오기

웹훅 메서드(V2 API)

24. figma_post_webhook - 웹훅 만들기

25. figma_get_webhook - ID로 웹훅 가져오기

26. figma_update_webhook - 웹훅 업데이트

27. figma_delete_webhook - 웹훅 삭제

28. figma_get_team_webhooks - 팀을 위한 웹훅 받기

도서관 분석 방법

29. figma_get_library_analytics_component_usages - 라이브러리 분석 구성 요소 사용 데이터 가져오기

30. figma_get_library_analytics_style_usages - 라이브러리 분석 스타일 사용 데이터 가져오기

31. figma_get_library_analytics_variable_usages - 라이브러리 분석 변수 사용 데이터 가져오기

Related MCP server: Figma Edit MCP

설치

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 파일을 참조하세요.