Claude에서 Figma 코멘트 읽기 - figma-comments-mcp 설치하기
공식 Figma MCP로는 읽을 수 없는 Figma 코멘트를 figma-comments-mcp로 Claude에서 읽어보자.
TL;DR
공식 Figma MCP는 디자인은 읽지만 코멘트는 읽지 못한다.
해결: figma-comments-mcp를 빌드하고 → 읽기 전용 Figma 토큰을 발급해 → claude_desktop_config.json에 등록 → Claude 재시작
서론
팀 프로젝트에서 디자이너와 팀원들이 Figma 화면 곳곳에 남긴 피드백 코멘트를 정리해야 했다. 코멘트가 수십 개씩 쌓이다 보니 하나씩 열어서 옮겨 적기가 번거로워 Claude에게 맡기기로 했다.
그런데 Claude에 연결한 공식 Figma MCP로는 프레임, 컴포넌트 같은 디자인 정보는 잘 읽어오는데 코멘트는 가져오지 못했다. 코멘트는 Plugin API가 아니라 REST API로만 접근할 수 있기 때문이다.1
그래서 찾은 것이 figma-comments-mcp다.
1. figma-comments-mcp란?
Figma 파일의 코멘트와 Dev Mode 주석을 Claude가 읽을 수 있게 해주는 MCP 서버다.2 제공하는 도구는 두 가지다.
list_figma_comments: 파일이나 특정 프레임의 코멘트 스레드와 주석을 가져온다. 코멘트가 꽂힌 위치를 레이어 이름으로 알려준다.get_figma_comment_image: 코멘트가 꽂힌 레이어를 이미지로 렌더링해서 보여준다.
읽기 전용이라 Claude가 실수로 코멘트를 달거나 지울 일이 없다는 점이 마음에 들었다.
다른 선택지: figma-console-mcp-skills
찾아보다가 비슷해 보이는 프로젝트를 하나 더 발견했다.
이건 MCP 서버가 아니라 스킬 22개 모음이다. 그 안에 코멘트 스킬도 있는데, 읽기뿐 아니라 작성·답글·삭제까지 가능하다. 다만 나머지 스킬 대부분이 변수나 컴포넌트를 수정하는 작업이고, 코멘트 스킬은 터미널이 되는 환경(Claude Code 등)에서만 동작한다.1
| figma-comments-mcp | figma-console-mcp-skills | |
|---|---|---|
| 형태 | MCP 서버 | 스킬 모음 |
| 코멘트 읽기 | ○ | ○ |
| 코멘트 작성·삭제 | × | ○ |
| 레이어 이미지·Dev Mode 주석 | ○ | - |
| 설치 | 설정 파일에 등록 | npx skills add |
나는 코멘트를 읽어서 정리만 하면 됐기 때문에 figma-comments-mcp를 선택했다.
2. 설치하기
Node.js와 git이 설치되어 있어야 한다.
1단계: 클론 및 빌드
원하는 위치에 저장소를 받아 빌드한다.2 나는 ~/dev 아래에 받았다.
git clone https://github.com/ejun-9/figma-comments-mcp.git
cd figma-comments-mcp
npm install
npm run build
빌드가 끝나면 dist/index.js 파일이 생긴다. 이 파일의 절대경로를 나중에 설정 파일에 넣어야 하니 기억해두자.
pwd
# /절대경로/figma-comments-mcp
2단계: Figma 토큰 발급
Figma에서 계정 메뉴 → 설정(Settings) → 보안(Security) → 개인 액세스 토큰(Personal access tokens) → 새 토큰 생성으로 들어간다.3
토큰 이름은 알아보기 쉽게 figma-comment-read로 지었고, 범위(Scope)는 딱 두 개만 체크했다.
file_comments:read: 파일의 댓글을 읽는다file_content:read: 파일의 내용을 읽고 이미지를 렌더링한다
file_comments:write는 체크하지 않는다. 읽기만 할 거라면 필요 없는 권한이다.
만료 기간은 90일로 설정했다. 만료되면 새로 발급받아 설정 파일의 토큰만 바꿔주면 된다.
토큰은 생성 직후 한 번만 보여준다. 바로 복사해두자.
3단계: 토큰 테스트 (선택)
설정 파일에 넣기 전에 토큰과 빌드가 제대로 동작하는지 터미널에서 먼저 확인할 수 있다.
FIGMA_TOKEN=figd_발급받은토큰 npm run try -- "https://www.figma.com/design/파일키/..."
코멘트 목록이 출력되면 성공이다.
4단계: Claude Desktop 설정 파일에 등록
Claude Desktop의 설정 파일을 연다.
- Mac:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
메뉴 막대의 Claude → 설정(Settings...) → 개발자(Developer) → 설정 편집(Edit Config)을 눌러도 같은 파일이 열린다.4
mcpServers 안에 아래 내용을 추가한다.
{
"mcpServers": {
"figma-comments": {
"command": "node",
"args": ["/절대경로/figma-comments-mcp/dist/index.js"],
"env": { "FIGMA_TOKEN": "figd_발급받은토큰" }
}
}
}
args에는 1단계에서 확인한dist/index.js의 절대경로를 넣는다.~는 인식하지 못한다.5- 이미 다른 MCP 서버가 등록되어 있다면
mcpServers안에"figma-comments": {...}부분만 추가하고, 쉼표를 잊지 말자.
Claude Code를 쓴다면 설정 파일을 직접 고칠 필요 없이 명령어 한 줄로 등록할 수 있다.
claude mcp add figma-comments --env FIGMA_TOKEN=figd_발급받은토큰 -- node /절대경로/figma-comments-mcp/dist/index.js
5단계: Claude 재시작
설정 파일을 저장하고 Claude Desktop을 완전히 종료한 뒤(Command + Q) 다시 실행한다. 창만 닫으면 반영되지 않는다.
3. 사용해보기
Claude에게 Figma 파일 링크를 주고 코멘트를 정리해달라고 하면 된다.
이 파일의 코멘트를 화면별로 정리해줘
https://www.figma.com/design/파일키/...
프레임 링크(node-id가 포함된 URL)를 주면 해당 프레임의 코멘트만 가져온다.
결론
공식 Figma MCP로 코멘트를 읽을 수 없다면 figma-comments-mcp를 붙여보자. 빌드하고, 읽기 전용 토큰을 발급하고, 설정 파일에 경로와 토큰만 넣어주면 끝이다.
예전에는 코멘트를 하나씩 열어 옮겨 적었는데, 이제는 링크 하나만 주면 Claude가 화면별로 정리해준다. 읽기 전용이라 실수로 코멘트를 건드릴 걱정도 없어서 요즘 유용하게 쓰고 있다.