Photo by Mariia Shalabaieva on Unsplash
1. 어떤 문제를 해결하나요?
디자이너들은 매일 Figma에서 작업하면서도, AI의 도움을 받으려면 화면을 전환하거나 디자인 내용을 일일이 복사·붙여넣기 해야 했습니다. Claude에게 "이 컴포넌트 어떻게 개선할까?"라고 물어보려면, 캡처를 뜨거나 내용을 텍스트로 옮기는 번거로운 중간 단계가 항상 필요했죠.
이 설정 키트는 Claude Desktop과 Figma를 MCP(Model Context Protocol)로 직접 연결해, 그 불편함을 완전히 없애줍니다. Figma를 열어둔 채로 Claude에게 바로 질문하면, Claude가 현재 작업 중인 디자인 파일의 구조·컴포넌트·메타데이터를 실시간으로 읽고 답변합니다.
2. 이런 분들에게 추천합니다
Figma로 매일 작업하는 UX/UI 디자이너
디자인 시스템을 관리하거나 컴포넌트를 정리해야 하는 분
개발자와 협업 시 디자인 스펙을 빠르게 정리해야 하는 분
AI를 활용해 디자인 피드백이나 카피 개선을 자동화하고 싶은 분
Claude를 쓰고 있지만 Figma와 연결하는 방법을 몰랐던 분
3. 어떻게 사용하는 기어인가요?
이 키트는 Claude Desktop 앱의 설정 파일(claude_desktop_config.json)입니다. 파일 한 개를 지정 경로에 넣기만 하면, Figma Desktop과 Claude가 로컬 MCP 서버를 통해 자동으로 연결됩니다. 별도의 코딩이나 API 키 발급 없이 설정 완료까지 5분 이내에 끝납니다.
작동 방식: Figma Desktop 앱이 로컬 서버(127.0.0.1:3845)를 열고, Claude Desktop이 MCP 프로토콜로 해당 서버에 접속해 Figma 데이터를 직접 읽어옵니다.
4. 어떤 결과를 얻을 수 있나요?
Figma 파일의 레이어 구조, 컴포넌트 정보, 메타데이터를 Claude가 직접 인식
"이 버튼 컴포넌트 이름 통일되어 있어?" 같은 질문을 Figma를 열어둔 채로 바로 질문 가능
디자인 시스템 검토, 카피 수정, 스펙 문서 초안 작성을 Claude와 함께 실시간으로 진행
디자인 → 개발 핸드오프 과정에서 Claude가 컴포넌트 설명을 자동으로 정리
5. 포함된 구성
claude_desktop_config.json — Claude Desktop MCP 서버 연결 설정 파일 (즉시 적용 가능)
설치 가이드 (설정 파일 경로 안내 포함, Mac/Windows 모두 지원)
6. 사용 AI 도구
Claude Desktop (Anthropic)
Figma Desktop
MCP(Model Context Protocol) — Anthropic 오픈 표준 연결 프로토콜
7. 실제 활용 예시
"지금 열려있는 Figma 파일에서 버튼 컴포넌트 목록 뽑아줘" → Claude가 Figma 파일을 직접 읽고 컴포넌트 목록과 네이밍 현황을 정리
"이 화면의 CTA 버튼 카피 3가지 버전으로 개선해줘" → Figma에서 현재 텍스트를 읽어 맥락에 맞는 카피 제안
"디자인 시스템에서 색상 변수 정의된 거 확인해줘" → 변수 정의 파일을 Claude가 직접 파싱해 정리
8. JSON 파일 사용법 — 단계별 가이드
"JSON 파일"이라는 단어가 낯설어도 괜찮아요. 이건 사실 Claude에게 "피그마랑 연결해도 돼"라고 알려주는 작은 메모지 같은 파일이에요. 한 번만 넣어두면, 이후엔 매번 설정할 필요 없이 자동으로 연결됩니다.
왜 이 파일이 필요한가요?
Figma Desktop 앱은 Claude가 접속할 수 있는 문(서버)을 열어둡니다. 그런데 Claude는 그 문이 어디에 있는지 모르는 상태예요. JSON 파일은 Claude에게 "피그마의 문 주소는 여기야(127.0.0.1:3845)"라고 알려주는 역할을 합니다. 이 파일만 제자리에 넣으면, 앞으로 Claude와 Figma는 자동으로 대화할 수 있게 됩니다.
STEP 1. Figma에서 MCP 서버 켜기
먼저 Figma Desktop 앱에서 서버를 활성화해야 해요.
Figma Desktop 앱을 열고, 작업 중인 디자인 파일을 엽니다.
화면 왼쪽 상단의 Figma 로고(햄버거 메뉴) 를 클릭합니다.
메뉴에서 Preferences(환경설정) 를 선택합니다.
"Enable Dev Mode MCP Server" 항목을 클릭해 활성화합니다.
화면 하단에 http://127.0.0.1:3845/mcp 주소가 표시되면 성공입니다.
💡 이 주소가 보인다면, Figma가 Claude를 기다리는 문을 열어둔 상태입니다.
STEP 2. JSON 파일을 올바른 위치에 넣기
이제 Claude에게 그 문 주소를 알려줄 차례예요. 구매하신 파일(claude_desktop_config.json)을 아래 경로에 넣으면 됩니다.
Mac을 사용하신다면
Finder를 엽니다.
상단 메뉴에서 이동 → 폴더로 이동 을 클릭합니다 (단축키: Shift + Cmd + G).
아래 경로를 그대로 복사해서 붙여넣고 이동을 누릅니다: ~/Library/Application Support/Claude/
해당 폴더 안에 claude_desktop_config.json 파일을 복사해 넣습니다.
같은 이름의 파일이 이미 있다면? → 기존 파일을 열어 안의 내용을 확인 후, 아래 내용을 추가해 주세요 (STEP 4 참고).
Windows를 사용하신다면
파일 탐색기를 엽니다.
주소창에 아래 경로를 그대로 입력하고 Enter를 누릅니다: %APPDATA%\Claude\
해당 폴더 안에 claude_desktop_config.json 파일을 복사해 넣습니다.
STEP 3. Claude Desktop 재시작
파일을 넣은 뒤에는 Claude Desktop 앱을 완전히 종료했다가 다시 실행해야 변경 사항이 적용됩니다.
Mac: 상단 메뉴바에서 Claude 아이콘 우클릭 → Quit → 다시 실행
Windows: 트레이 아이콘 우클릭 → 종료 → 다시 실행
STEP 4. (이미 설정 파일이 있는 경우) 기존 파일에 내용 추가하기
Claude를 이미 다른 MCP와 연결해서 쓰고 계셨다면, 설정 파일이 이미 존재할 수 있어요. 이 경우엔 파일을 덮어쓰면 기존 연결이 사라지니 주의하세요. 대신 아래처럼 내용을 추가해 주세요.
기존 파일 안에 이런 형태의 내용이 있을 거예요:
json
{
"mcpServers": {
"기존에_연결된_도구": { ... }
}
}여기에 Figma 항목을 아래처럼 추가합니다:
json
{
"mcpServers": {
"기존에_연결된_도구": { ... },
"Figma Dev Mode MCP": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}💡 쉼표(
,) 위치에 주의하세요. 항목과 항목 사이에는 반드시 쉼표가 있어야 하고, 마지막 항목 뒤에는 쉼표가 없어야 합니다. 잘 모르겠다면 구매 시 제공되는 설치 가이드를 참고해 주세요.
STEP 5. 연결 확인하기
모든 설정이 끝나면 실제로 잘 연결됐는지 확인해 볼게요.
Figma Desktop에서 아무 디자인 파일이나 엽니다.
Claude Desktop을 열고, 아래 문장을 그대로 입력해 보세요:
"지금 열려있는 Figma 파일에서 레이어 구조를 알려줘"
Claude가 Figma 파일의 내용을 설명하기 시작하면 연결 성공입니다!
⚠️ 연결이 안 된다면? Figma에서 MCP 서버가 켜져 있는지(STEP 1) 다시 확인하고, Claude Desktop을 재시작해 보세요.
아래에 해당 섹션을 추가한 버전을 드릴게요. 기존 9번(출처) 앞에 들어가면 자연스러울 것 같아요.
8-1. 유료 플랜이 필요한가요?
이 설정을 사용하려면 Claude와 Figma 각각에서 플랜을 확인해야 합니다.
Claude — 무료 플랜으로도 가능, 단 사용량 제한 있음
Claude Desktop 앱 자체는 무료로 다운로드할 수 있고, MCP 연결 기능도 무료 플랜에서 작동합니다.
Figma — Dev Mode 기능이 필요하므로 유료 플랜 필수
이 연결의 핵심인 "Enable Dev Mode MCP Server" 기능은 Figma의 Dev Mode 안에 있어요. Dev Mode는 Figma 무료(Starter) 플랜에서는 사용할 수 없고, Professional 플랜 이상에서 지원됩니다.
⚠️ Figma와 Claude 모두 요금제 정책이 변경될 수 있으니, 최신 정보는 각 공식 사이트에서 확인하는 것을 권장합니다.
Claude 요금제: https://claude.ai/upgrade
Figma 요금제: https://www.figma.com/pricing
자주 묻는 질문
Q. 매번 Figma를 켤 때마다 설정을 다시 해야 하나요? 아니요. JSON 파일은 한 번만 넣으면 됩니다. 다만 Figma에서 "Enable Dev Mode MCP Server"는 Figma를 열 때마다 켜져 있는지 확인하는 것이 좋아요.
Q. Claude.ai 웹사이트에서도 되나요? 이 설정은 Claude Desktop 앱 전용입니다. 웹 브라우저의 claude.ai에서는 작동하지 않아요.
Q. 파일을 잘못 넣으면 어떻게 되나요? Claude가 시작되지 않거나 오류 메시지가 뜰 수 있어요. 그럴 땐 파일을 삭제하고 Claude를 재시작하면 원래대로 돌아옵니다.
9. 출처
이지원님 이지원님 커뮤니티 보러가기 → https://flexworkpro.io/career-hub/communities/a9e06694-5d46-4cba-ac78-6c24d2e1ac2f
Figma와 Claude Desktop을 5분 만에 연결하는 MCP 설정 파일 — 디자인 작업 중 AI 어시스턴트를 바로 붙이세요.