3화: Figma MCP와 Claude 연결하기
2달 안에 AI 프로토타이핑 마스터하기
MCP(Model Context Protocol)는 Claude Code를 만든 Anthropic에서 제안한 개념입니다. 깊게 이해할 필요는 없습니다. Figma와 AI 프로토타이핑 툴을 직접 연결해주는 통로라고 생각하시면 됩니다.
그동안 우리는 Figma에서 레이어를 정리하고, 컴포넌트를 만들고, Auto-layout을 맞추고, 디자인 토큰을 세팅해왔습니다. 그런데 MCP를 연결하지 않으면 이 모든 작업을 매번 AI에게 다시 설명해야 합니다. 스크린샷을 올리고, “이 버튼은 Primary고 spacing은 16이고…” 같은 맥락을 반복해서 전달해야 하죠.
MCP를 연결하면 상황이 달라집니다. 내가 작업한 Figma 파일이 그대로 Context로 전달됩니다. 현재 프레임 구조, 컴포넌트 계층, 이름 규칙까지 AI가 읽을 수 있습니다. 실무에서는 이 차이가 꽤 큽니다. 체감상 작업 속도가 최소 2-3배는 빨라집니다. 이 단계가 되면 AI가 단순 생성기가 아니라 협업자처럼 작동하기 시작합니다.
제가 전의 글에서 AI는 눈이 없다고 표현했습니다. 하지만 Figma MCP를 AI 프로토타이핑 툴에 연결하면, AI는 마치 시력이 안 좋은 눈이 생긴것처럼 정확도가 올라갑니다. Figma MCP를 설치한다고 해서 “우와, Figma 디자인 그대로 AI가 만들었네!” 수준은 안 나올 가능성이 큽니다.
다음과 같이 생각하면 됩니다.
Figma MCP를 사용하면 AI 프로토타입이 내 Figma 디자인이랑 70% 정도는 비슷하게 나온다.
경험상 전의 글에서 다룬 Pre-processing을 잘한다면 이 정확도가 한 80%까지 더 증가하고, 나중에 Code Connect까지 하면 90% 이상까지 끌어올릴 수 있습니다.
AI 프로토타이핑 툴을 셋업할 때, 이 부분이 가장 에러가 많이 나는 부분 중에 하나입니다. 제 팀원들도 굉장히 똑똑한데도 불구하고 한달이 지나도 바쁘기도 하고, 에러도 많이 나서 Figma MCP 연결을 마친 사람은 팀에 저밖에 없었습니다.
설치할 요소가 많은 AI 프로토타이핑에 있어서는 설치하는 방법을 알고 있는 사람은 유능하고 필요한 사람이 됩니다. AI한테 설치 방법을 물어봐도 부정확한 답변을 내놓는 경우가 있기 때문에, 실무자가 실제로 시행착오를 겪어가며 적은 글이 훨씬 도움이 됩니다. 그래서 Figma MCP 설치하면서 배운 점들을 스크린샷하고 기록하고 팀원들에게 공유하는 것을 추천합니다. 혹은 이 브런치 글을 공유해도 됩니다.
회사 통해서 받은 $500+ 상당의 뉴욕 Mets 야구 경기 VIP 티켓. Figma MCP 연결 때문에 야근했더라도 괜찮습니다. 열심히 하겠습니다.
2026년 2월 중순, 포도라는 스타트업에서 디자인 매니저가 아침부터 상기된 톤의 슬랙을 보냅니다.
AI 프로토타이핑 툴 중에 Claude Code의 아웃풋을 Figma에 그대로 보낼 수 있대!
이미 Figma MCP + Cursor 연결을 마쳤지만, 자 이제 Cursor 말고 Claude를 쓸 때가 됐습니다.
디자인 매니저의 지시가 내려왔습니다.
Figma MCP의 Claude Code 연결 왜 이리 복잡해. 팀원들의 Figma MCP 연결 도와줘.
이 때, 각각의 팀원들이랑 1:1 미팅을 하며 가르쳐주는것보다는, 연결 방법에 대한 문서를 공유하거나, 워크샵 한번을 열어서 Figma MCP 연결하는 방법을 알려주면 좋습니다.
Figma MCP를 Claude에 연결하는 방법Step 1. Figma에서 Figma MCP 활성화하기
Figma Desktop 앱을 실행합니다.
Figma 공식 문서를 따라 Figma Desktop Server를 활성화합니다.
https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
이 단계는 비교적 간단합니다.
문서에 나온 순서대로 따라 하면 어렵지 않게 설정할 수 있습니다.
❗️Figma Browser말고 Figma Desktop 사용하시는 것을 추천합니다. Figma Browser도 연결 가능하긴 하지만 Desktop 버전보다 연결이 잘 안 됩니다.
Step 2. Figma MCP를 Claude Code에 연결하기
이제 Claude Code와 연결합니다.
Terminal을 엽니다.
아래 명령어를 입력합니다.
claude mcp add --transport http figma https://mcp.figma.com/mcp
터미널에 아래를 입력합니다.
Claude
Claude가 실행되면 다음을 입력합니다.
/mcp
Terminal에 Claude를 실행한 모습. 저 김처럼 생긴 곳에다가 /mcp라고 입력하면 됩니다.목록에서 Figma를 선택합니다.
❗️여기에서 에러 많이 납니다. Figma 선택이 안 된다면 그냥 숫자 1을 눌러서 Figma 선택하면 됩니다.
인증(Authentication)을 진행합니다.
인증이 완료되면 다시 Terminal로 돌아옵니다
Step 3. claude_desktop_config.json 설정 덮어쓰기
로컬에 있는 claude_desktop_config.json 파일을 열고, 아래 코드를 기존 코드에 덮어씁니다.
{
"mcpServers": {
"figma-desktop": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"http://127.0.0.1:3845/mcp"
]
}
},
"preferences": {
"sidebarMode": "code"
}
}
Config 파일. 예제 폴더에 업로드해놨습니다. 시행착오를 통해 이 코드를 알아내느라 엄청 고생했습니다..❗️Claude Desktop 앱은 반드시 완전히 종료된 상태에서 수정해야 합니다. (Command + Q로 완전 종료 누르면 됩니다.)
연결이 정상적으로 되었는지 확인하는 방법
Claude Code에서 Settings → Developer로 이동합니다.
Figma Desktop MCP가 실행되고 상태(Running)인지 확인합니다.
Claude Settings에서 Figma MCP가 성공적으로 실행되고 있는 모습.정상적으로 연결되면, Claude가 현재 열려 있는 Figma 파일을 인식하고 프레임과 컴포넌트 구조를 직접 읽을 수 있습니다. 이제 Figma는 단순한 이미지가 아니라 AI가 이해할 수 있는 구조 데이터로 전달됩니다.
뉴욕 테크 실무에서 실제로 적용하며 배운 점입니다.
1. 공식 문서도 보세요
처음에는 Figma Official Documentation을 그대로 따라 하는 것이 가장 빠릅니다. 그래도 막히면 공식 유튜브 튜토리얼을 보시고, 그래도 막히면 이 글을 보시면 됩니다. 추측으로 설정을 건드리기 시작하면 오히려 더 꼬이고, 시간은 더 오래 걸립니다. 설정 단계에서는 감으로 하지 않는 것이 중요합니다.
2. 에러가 나면 오류 메시지를 그대로 복사해서 AI한테 해결 방법을 물어보세요
오류 메세지를 요약하지 말고, 오류 코드를 있는 그대로 붙여넣는 것이 핵심입니다. AI는 맥락 설명보다 정확한 문자열에 더 잘 반응합니다.
3. Personal Access Token은 신중하게
연결 시도할 때 AI가 Personal Access Token을 통한 연결을 제안하는 경우가 있습니다만 Personal Access Token은 웬만하면 사용하지 않는 것을 권합니다. 특히 Gemini나 Claude 같은 외부 AI에게 직접 제공하지 마세요. 보안 리스크가 있습니다. 실무 환경에서는 토큰 관리가 생각보다 훨씬 민감합니다.
그리고 Personal Access Token 시도해봤는데 잘 연결이 안 됩니다. 시간 아끼시고 Personal Access Token을 통한 방법을 AI가 제안하면 다른 방법을 제안하라고 시키세요.
4. 반드시 문서화하세요
이 연결 과정을 문서화해두는 것이 좋습니다. 주요 설정 화면은 스크린샷으로 남기고, JSON 코드는 텍스트로 복사해 문서에 정리해서 팀과 공유하세요. AI 툴은 빠르게 변합니다. 혼자만 알고 있는 워크플로우는 오래가지 않습니다. 팀과 공유해야 속도가 누적되고 좋은 마음으로 베푼 노하우는 돌아옵니다.
다음 글에서는 Figma 디자인을 AI 프로토타이핑 툴에 구현하기 위한 프롬프트 가이드 및 플로우에 대해서 다룰 예정입니다.
MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.
예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.