Figma MCP 서버

AI 어시스턴트가 Figma 파일과 상호 작용할 수 있도록 하는 ModelContextProtocol 서버입니다. 이 서버는 ModelContextProtocol을 통해 Figma 디자인을 직접 보고, 주석을 달고, 분석할 수 있는 도구를 제공합니다.

특징

• Claude와의 채팅에 Figma 파일을 추가하려면 URL을 제공하세요.

• Figma 파일에 대한 댓글을 읽고 게시하세요

Related MCP server: Figma MCP Server

Claude와 함께 설정

1. claude.ai/download 에서 Claude 데스크톱 앱을 다운로드하고 설치하세요.

2. Figma API 키를 받으세요(figma.com -> 왼쪽 상단 이름 클릭 -> 설정 -> 보안). File content 및 Comments 범위를 허용하세요.

3. Figma MCP 서버를 사용하도록 Claude를 구성하세요. MCP 서버를 처음 사용하는 경우 터미널에서 다음을 실행하세요.

지엑스피1

그렇지 않은 경우 figma-mcp 블록을 claude_desktop_config.json 에 복사하세요.

3. Claude Desktop을 다시 시작합니다.

4. 서버가 실행 중인지 확인하려면 Claude의 인터페이스에서 사용 가능한 도구의 수가 표시된 망치 아이콘을 찾으세요.

사용 예

Claude Desktop으로 새 채팅을 시작하고 다음을 붙여넣습니다.

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

더욱 현실적인 사용 데모

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

개발 설정

Inspector로 실행

개발 및 디버깅 목적으로 MCP Inspector 도구를 사용할 수 있습니다. Inspector는 MCP 서버 상호 작용을 테스트하고 모니터링할 수 있는 시각적 인터페이스를 제공합니다.

자세한 설정 지침과 사용 가이드라인은 Inspector 설명서를 참조하세요.

Inspector를 사용하여 로컬로 테스트하는 명령은 다음과 같습니다.

npx @modelcontextprotocol/inspector npx figma-mcp

지역 개발

1. 저장소를 복제합니다

2. 종속성 설치:

npm install

3. 프로젝트를 빌드하세요:

npm run build

4. 자동 재빌드를 통한 개발의 경우:

npm run watch

사용 가능한 도구

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

• add_figma_file : URL을 제공하여 컨텍스트에 Figma 파일을 추가합니다.

• view_node : Figma 파일에서 특정 노드의 썸네일을 가져옵니다.

• read_comments : Figma 파일의 모든 주석을 가져옵니다.

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

• reply_to_comment : Figma 파일에 있는 기존 댓글에 답장합니다.

각 도구는 ModelContextProtocol 인터페이스를 통해 Figma 파일과 상호 작용하기 위한 특정 기능을 제공하도록 설계되었습니다.