Figma 무료버전으로 Claude MCP 연결 (with. PAT) - Claude Desktop

Figma 무료버전으로
Claude MCP 연결 (with. PAT) - Claude Desktop

유료 플랜 없이 Claude Desktop에서 Figma 파일을 분석하는 가장 현실적인 방법

Figma의 공식 Dev Mode MCP Server는 Professional 이상 유료 플랜 + Dev 시트가 필요하다.

그래서 무료 계정에서는 안되지만 커뮤니티 MCP(figma-developer-mcp) + Personal Access Token(PAT) 조합으로
Claude MCP로 연결이 가능하다.

참고로 기획서를 같이 살펴보고, 논의를 진행하기 위해서 Claude CLI가 아닌 Windows Claude Desktop 으로 진행하였다.

본 내용은 연결까지 성공한 전 과정을 단계별로 정리한 가이드이다.

1

🪟 개발환경 — Windows

Claude Desktop은 Windows 프로세스로 실행되므로 MCP 서버 실행에 필요한 도구들도 Windows 측에 설치되어 있어야 한다. (참고로 WSL에 Node.js가 있어도 Claude Desktop은 이것을 직접 사용하지 못하므로 연관성이 없다.)

Windows 11/10 Claude Desktop

2

📦 Node.js · npm 버전 확인

먼저 Windows 에 nodejs를 설치하자, nodejs.org에서 LTS 버전을 설치한 뒤 PowerShell에서 버전을 확인하면 된다.
npx는 Node.js에 포함되어 있기 때문에 별도 설치는 필요없다.

# PowerShell
PS C:\Users\User> node -v
v24.16.0

PS C:\Users\User> npm -v
11.13.0

Node v24.16.0 npm 11.13.0

3

⚠️ 트러블슈팅 — PowerShell 실행 정책

npm -v 실행 시 `npm: 이 시스템에서 스크립트를 실행할 수 없으므로...` 오류가 나는 경우가 있다.
Windows의 기본 ExecutionPolicy가 Restricted여서 발생하는 보안 차단인데, 현재 사용자 범위에서만
풀어주면 안전하게 해결된다.

# 현재 사용자에 대해서만 서명된 원격 스크립트 허용
PS C:\Users\User> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned # 이후 npm 정상 동작
PS C:\Users\User> npm -v 11.13.0

 

PSSecurityException RemoteSigned

4

🔑 Figma에서 PAT 발급

Figma Settings → Security → Personal access tokens → Generate new token 
무료(Starter) 계정도 PAT 발급이 가능하다.
토큰 이름은 식별하기 좋게(예: Claude-Figma-MCP), 권한은 Read 계열에 체크하면 충분하고, 생성 시
한 번만 보이는 토큰을 반드시 저장해 놓아야 한다.

 

⚠️ 보안: PAT는 비밀번호와 같다. 채팅·블로그·캡처에 절대 노출하지 안된다.
               노출되면 즉시 Revoke 후 재발급해야 하며, 만료기간(90일 권장)을 짧게 잡으면 더 안전하다.

무료 계정 OK Read 권한 노출 금지

5

🚀 Claude Desktop 실행 · 설정 진입

Claude Desktop 좌측 상단 File → Settings (또는

Ctrl + ,

) → 좌측 탭 개발자(Developer) → 구성 편집(Edit Config) 버튼을 클릭하면 claude_desktop_config.json 파일 위치로 탐색기가 열린다.

파일 위치: %APPDATA%\Claude\claude_desktop_config.json
실제 경로: C:\Users\<사용자명>\AppData\Roaming\Claude\claude_desktop_config.json

Developer 탭 JSON 편집

6

⚙️ claude_desktop_config.json 편집

최상위에 mcpServers 키를 추가하고, 그 안에 figma 서버 항목을 정의한다.
Windows에서 npx를 안정적으로 실행하기 위해 cmd /c 래핑을 사용한 것이 포인트이다.

{ "preferences": {
// 기존 환경설정들 그대로 유지
"menuBarEnabled": false,
"sidebarMode": "task",
"bypassPermissionsGateByAccount": {
"<your-account-uuid>": false
},
"remoteToolsDeviceName": "<your-device-name>"
// ... 그 외 prefs
},
"mcpServers": {
"figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "여기에_PAT_붙여넣기"
}
}
}
}

🔑 핵심 체크포인트 — 이름은 소문자 figma로!
Claude Desktop에는 Anthropic이 기본 제공하는 Figma(대문자) Extension이 있다.
우리는 추가하는 커뮤니티 MCP는 이름 충돌을 피하려고 소문자 figma로 등록했다.
이 둘은 별개 서버로 공존한다.

mcpServers 추가 소문자 figma cmd /c 래핑

7

✅ MCP 서버 연결 확인

파일 저장 후 Claude Desktop을 완전 종료(트레이 아이콘까지 종료) → 재시작 Settings → Developer → 로컬 MCP 서버 화면에서 figma(소문자) 항목이 running 상태로 떠 있으면 성공.

 

핵심 포인트 (중요)

 

running 대소문자 구분

8

🔄 내부 동작 흐름 (자동으로 일어나는 일)

설정 저장과 재시작만 했을 뿐인데 어떻게 연결되는 걸까? 백그라운드에서 다음 흐름이 자동으로 일어나게 된다.

🟢 Claude Desktop 시작 — claude_desktop_config.json 읽음

↓

⚡ "cmd /c npx -y figma-developer-mcp --stdio" 명령 실행

↓

📥 npx가 figma-developer-mcp 패키지 자동 다운로드 (최초 1회, 10~30초 소요)

↓

🖥️ MCP 서버 프로세스 백그라운드 실행

↓

🔐 PAT로 Figma REST API 인증

↓

🔌 Claude Desktop ↔ MCP 서버 stdio 통신 시작

↓

🎉 연결 완료 — 채팅에서 Figma 도구 사용 가능

stdio 통신 REST API 인증

9

🎯 실제 호출 테스트 — Figma URL 분석

Figma 파일 URL을 복사해 Claude에게 "이 파일의 메타데이터 간단히 요약해줘" 라고 요청하면, MCP가 자동으로 호출되어 페이지·프레임·컴포넌트 구조를 분석해준다. 테스트용으로 Figma 공식 튜토리얼 Figma basics 파일을 사용했다.

 

 

 

💡 토큰 절약 팁: 큰 파일은 전체 호출 시 응답이 매우 커집니다. 특정 페이지/프레임의 node-id를 지정해 부분만 호출하거나, "메타데이터만" 같은 가벼운 요청으로 시작하세요.

실전 테스트 분석 성공

 

 

 

🎉 연결 완료 — 이제 무료로 Figma × Claude

유료 시트 없이도 PAT 한 줄로 Figma 파일을 Claude와 함께 분석할 수 있게 됐다.
대규모 파일은 부분 호출, PAT는 정기 교체 — 두 가지만 기억하면 안전하고 효율적으로 쓸 수 있게되었다!