mcp-figma

Claude 및 기타 MCP 호환 AI 어시스턴트와 함께 사용하도록 설계된 Figma API 통합을 위한 MCP(모델 컨텍스트 프로토콜) 서버입니다.

특징

이 MCP 서버는 Figma API 기능에 대한 액세스를 제공합니다.

• 파일 작업(파일 가져오기, 노드 가져오기, 이미지 가져오기)

• 댓글 관리

• 팀/프로젝트 관리

• 구성 요소 및 스타일 액세스

• 영구 API 키 저장소

Related MCP server: Figma MCP Server

설치

NPM 설치

지엑스피1

Claude와 함께 사용

1. Claude 구성에 mcp-figma를 추가합니다.

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

2. Claude를 사용할 때 처음으로 Figma API 키를 설정해야 합니다.

Please use mcp-figma to set my Figma API key: figd_xxxxxxxxxxxxxxxxxxxxxxx

귀하의 API 키는 ~/.mcp-figma/config.json 에 저장되며 향후 세션에서 자동으로 로드됩니다.

3. API 키가 구성되었는지 확인할 수 있습니다.

Please use mcp-figma to check my API key status

4. 그런 다음 사용 가능한 Figma API 함수를 사용하세요.

Please use mcp-figma to get the file with key abc123

사용 가능한 도구

서버는 다음과 같은 도구를 제공합니다.

• set_api_key : Figma API 개인 액세스 토큰을 설정합니다(config에 저장됨)

• check_api_key : API 키가 이미 구성되어 있는지 확인합니다.

• get_file : 키로 Figma 파일을 가져옵니다

• get_file_nodes : Figma 파일에서 특정 노드를 가져옵니다.

• get_image : Figma 파일의 노드에 대한 이미지를 가져옵니다.

• get_image_fills : Figma 파일에 사용된 이미지의 URL을 가져옵니다.

• get_comments : Figma 파일에 대한 주석을 가져옵니다.

• post_comment : Figma 파일에 댓글을 게시합니다.

• delete_comment : Figma 파일에서 주석을 삭제합니다.

• get_team_projects : 팀의 프로젝트를 가져옵니다

• get_project_files : 프로젝트에 대한 파일을 가져옵니다

• get_team_components : 팀의 구성 요소를 가져옵니다.

• get_file_components : 파일에서 구성 요소를 가져옵니다.

• get_component : 키로 구성 요소를 가져옵니다.

• get_team_component_sets : 팀의 구성 요소 세트를 가져옵니다.

• get_team_styles : 팀 스타일 가져오기

• get_file_styles : 파일에서 스타일 가져오기

• get_style : 키로 스타일 가져오기

자세한 사용 예는 USAGE.md를 참조하세요.

특허

MIT