Figma MCP 서버
AI 어시스턴트가 Figma 파일과 상호 작용할 수 있도록 하는 ModelContextProtocol 서버입니다. 이 서버는 ModelContextProtocol을 통해 Figma 디자인을 직접 보고, 주석을 달고, 분석할 수 있는 도구를 제공합니다.
특징
Claude와의 채팅에 Figma 파일을 추가하려면 URL을 제공하세요.
Figma 파일에 대한 댓글을 읽고 게시하세요
Related MCP server: mcp-figma
Claude와 함께 설정
claude.ai/download 에서 Claude 데스크톱 앱을 다운로드하고 설치하세요.
Figma API 키를 받으세요(figma.com -> 왼쪽 상단 이름 클릭 -> 설정 -> 보안).
File content및Comments범위를 허용하세요.Figma MCP 서버를 사용하도록 Claude를 구성하세요. MCP 서버를 처음 사용하는 경우 터미널에서 다음을 실행하세요.
지엑스피1
그렇지 않은 경우 figma-mcp 블록을 claude_desktop_config.json 에 복사하세요.
Claude Desktop을 다시 시작합니다.
서버가 실행 중인지 확인하려면 Claude의 인터페이스에서 사용 가능한 도구의 수가 표시된 망치 아이콘을 찾으세요.
사용 예
Claude Desktop으로 새 채팅을 시작하고 다음을 붙여넣습니다.
더욱 현실적인 사용 데모
https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3
개발 설정
Inspector로 실행
개발 및 디버깅 목적으로 MCP Inspector 도구를 사용할 수 있습니다. Inspector는 MCP 서버 상호 작용을 테스트하고 모니터링할 수 있는 시각적 인터페이스를 제공합니다.
자세한 설정 지침과 사용 가이드라인은 Inspector 설명서를 참조하세요.
Inspector를 사용하여 로컬로 테스트하는 명령은 다음과 같습니다.
지역 개발
저장소를 복제합니다
종속성 설치:
프로젝트를 빌드하세요:
자동 재빌드를 통한 개발의 경우:
사용 가능한 도구
서버는 다음과 같은 도구를 제공합니다.
add_figma_file: URL을 제공하여 컨텍스트에 Figma 파일을 추가합니다.view_node: Figma 파일에서 특정 노드의 썸네일을 가져옵니다.read_comments: Figma 파일의 모든 주석을 가져옵니다.post_comment: Figma 파일의 노드에 댓글을 게시합니다.reply_to_comment: Figma 파일에 있는 기존 댓글에 답장합니다.
각 도구는 ModelContextProtocol 인터페이스를 통해 Figma 파일과 상호 작용하기 위한 특정 기능을 제공하도록 설계되었습니다.