Figma MCP는 AI 어시스턴트가 Figma 파일을 직접 읽을 수 있게 해주는 커넥터입니다. 붙여 넣은 스크린샷에서 추측하는 대신 프레임, 레이어, 컴포넌트, 간격, 색상 스타일, 텍스트를 읽습니다. 이는 Anthropic이 어시스턴트가 하나의 공통 인터페이스를 통해 외부 도구와 통신할 수 있도록 공개한 개방형 표준인 Model Context Protocol을 기반으로 합니다. Figma는 공식 서버를 제공하고, 커뮤니티에서도 여러 서버를 만들었습니다. 설정하려면 AI 클라이언트에 작은 구성 블록을 추가하고 Figma 계정에 대한 액세스를 승인해야 합니다. 구성 파일 편집에 얼마나 익숙한지에 따라 10분에서 반나절 정도 걸립니다. 이 문장만으로도 이미 힘든 오후가 될 것 같다면, 이 페이지 아래쪽에 더 간단한 방법이 있습니다.
실제로 Figma MCP란 무엇인가요?
MCP는 제품이 아니라 표준입니다. AI 어시스턴트가 외부 시스템에 정보를 요청하고 해당 시스템이 응답하는 방식을 정의합니다. 이 표준을 사용하는 것은 무엇이든 MCP 서버라고 하며, 서버는 본질적으로 어댑터입니다. 한쪽에서는 Figma와 통신하고, 다른 쪽에서는 Claude가 이미 이해하는 형식으로 Claude와 통신합니다.
따라서 "Figma MCP"는 어시스턴트와 디자인 파일 사이에 위치하는 서버를 가리키는 약칭입니다. 서버가 실행되면 Claude는 더 이상 평면 이미지로 작업하지 않고 구조를 기반으로 작업합니다. 버튼이 컴포넌트 인스턴스라는 것, 패딩이 15가 아니라 16이라는 것, 텍스트 스타일의 이름이 무엇인지 확인할 수 있습니다. body/regular "더 작은 회색 항목"이 아니라
Figma에는 디자인-코드 워크플로를 겨냥한 공식 서버가 있으며, Figma의 공개 API를 통해 파일을 읽는 커뮤니티 구현체도 있습니다. 인증 방식과 파일에서 노출하는 정보의 범위는 서로 다르지만, Claude의 관점에서는 모두 동일하게 보입니다. 요청에 필요할 때 호출할 수 있는 사용 가능한 도구 목록인 셈입니다. 먼저 더 넓은 배경부터 알고 싶다면 MCP가 무엇이고 왜 존재하는지에 대한 쉬운 설명을 읽어보세요.
Figma MCP로 Claude가 실제로 할 수 있는 일은 무엇인가요?
흥미로운 점은 "Claude가 파일을 볼 수 있다"는 것이 아닙니다. 수작업이 필요 없어지는 작업의 범위입니다.
- 선택한 프레임을 파일과 일치하는 프론트엔드 코드로 변환하세요. 이미지를 보고 대략적으로 재현하는 것이 아니라, 디자인 자체에서 가져온 간격, 계층 구조, 컴포넌트 이름을 사용합니다. 여전히 직접 검토해야 하지만 값을 다시 입력할 필요는 없습니다.
- 파일에서 디자인 토큰을 추출하세요. 색상 스타일, 타입 스케일, 간격 단계, 모서리 반지름을 코드베이스에서 사용하는 형식에 맞춰 변수로 내보낼 수 있습니다.
- 파일을 자체 시스템과 대조해 감사하세요. 어떤 레이어가 스타일 대신 하드코딩된 hex 값을 사용하는지, 어떤 프레임이 다른 곳에는 없는 간격 값을 사용하는지, 어떤 컴포넌트가 분리된 뒤 조용히 수정되었는지 확인할 수 있습니다.
- 핸드오프 노트와 사양을 작성하세요. 실제 프레임을 바탕으로 상태, 예외 상황, 빈 상태, 오류 발생 시 동작을 기억에 의존하지 않고 설명할 수 있습니다.
- 맥락에 맞게 UX 문구를 검토하세요. 플로우의 모든 문자열을 순서대로 읽으면서 같은 작업에 서로 다른 세 단어가 사용된 것을 발견할 수 있습니다.
- 대규모 파일에 관한 질문에 답하세요. 이 컴포넌트는 어디에 사용되었는지, 이 브랜치에서 무엇이 변경되었는지, 아직도 이전 로고를 참조하는 화면은 무엇인지 등을 확인할 수 있습니다.
이 모든 방식의 바탕에는 다음과 같은 패턴이 있습니다. Figma MCP는 디자인과 그 이후의 모든 작업 사이에서 복사하여 붙여넣는 단계를 없애줍니다. 이는 정말 유용하지만, 그게 전부입니다. 디자인 결정을 대신 내려주지는 않습니다.
Figma MCP 서버는 어떻게 설정하나요?
구체적인 설정 방법은 서버와 클라이언트에 따라 다르고, 둘 다 자주 변경되므로 블로그 게시물에서 명령어를 그대로 복사하는 것은 20분을 허비하기 좋은 방법입니다. 절차의 형태는 안정적이니, 그 구조를 익히세요.
- 서버를 선택하세요. 에디터 안에서 디자인을 코드로 변환하려는 목적이라면 공식 Figma 서버부터 시작하세요. 데스크톱 앱을 실행하지 않고 API를 통해 파일에 읽기 액세스해야 한다면 커뮤니티 서버를 살펴보세요. 두 유형 모두 공개 MCP 서버 디렉터리에 등록되어 있습니다.
- 액세스 권한을 설정하세요. 일반적으로 공식 도구는 로그인된 Figma 세션을 사용하며, 앱 안에서 활성화하는 설정이 있습니다. 커뮤니티 서버는 보통 Figma 계정 설정에서 생성하는 개인 액세스 토큰을 요구합니다. 이 토큰은 비밀번호처럼 취급하세요. 사용자가 읽을 수 있는 모든 내용을 이 토큰으로 읽을 수 있습니다.
- 클라이언트의 MCP 설정에 서버를 추가하세요. Claude Desktop, Claude Code 및 대부분의 AI 지원 에디터는 사용 가능한 서버 목록과 각 서버를 실행하는 명령, 필요한 인증 정보를 담은 설정 파일을 읽습니다. 항목 하나를 추가하면 됩니다.
- 클라이언트를 다시 시작하세요. "작동하지 않는다"는 보고의 거의 대부분은 설정을 변경한 후 클라이언트를 다시 시작하지 않아서 발생합니다.
- 연결을 확인하세요. 클라이언트에 연결된 서버와 각 서버가 제공하는 도구가 표시됩니다. 도구 목록이 보인다면 연결 설정이 완료된 것입니다.
- 살펴볼 대상을 지정하세요. 대부분의 워크플로에서는 Figma에서 프레임을 선택하거나 해당 프레임 링크를 붙여넣은 다음 질문을 입력해야 합니다. Claude는 사용자가 지정한 내용만 읽습니다.
처음 시도할 때 사람들이 자주 막히는 부분은 두 가지입니다. Figma 데스크톱 앱을 통해 작동하는 서버는 앱이 열려 있고 파일이 로드되어 있어야 하므로, 앱을 닫았다면 아무 일도 일어나지 않습니다. 그리고 대부분의 서버는 읽기에 초점이 맞춰져 있습니다. 파일에 무엇이 있는지 알려주는 데는 훨씬 뛰어나지만, 파일을 변경하는 데는 그렇지 않습니다.
Figma MCP의 솔직한 한계는 무엇인가요?
오후 시간을 쓰기 전에 알아둘 만한 내용입니다.
- MCP를 지원하는 클라이언트가 필요합니다. 데스크톱 앱, 에디터 또는 터미널이어야 합니다. 무료 요금제의 브라우저 채팅 창으로는 사용할 수 없습니다.
- 실제로 접근 권한은 전부 아니면 전무입니다. 개인 토큰은 일반적으로 계정에서 접근할 수 있는 모든 파일에 접근합니다. 계정이 공유 조직에 속해 있다면 토큰을 생성하기 전에 이 점을 고려하세요.
- 요소가 이동하면 작동이 중단됩니다. API가 변경되고, 서버가 다시 작성되며, 클라이언트 업데이트로 설정 형식이 바뀝니다. 이 위에 구축하는 모든 것은 가끔 유지 관리가 필요합니다.
- 큰 파일은 컨텍스트를 많이 차지합니다. 레이어가 400개인 화면은 구조화된 데이터를 많이 생성합니다. 하나의 프레임을 지정하면 잘 작동하지만, 파일 전체를 지정하는 경우에는 그렇지 않은 경우가 많습니다.
- 엉성한 파일은 엉성한 결과를 만듭니다. 레이어 이름이 Frame 217이고 스타일의 절반이 분리되어 있다면, 생성되는 코드에도 그 문제가 이어집니다. 커넥터는 있는 그대로 읽을 뿐, 정리해 주지는 않습니다.
- 접근 권한은 제공하지만 판단은 제공하지 않습니다. 이제 Claude가 디자인을 볼 수 있습니다. Claude가 그 디자인을 시니어 디자이너처럼 평가하는지는 완전히 별개의 문제이며, 다음으로 해결할 가치가 있는 문제는 바로 그것입니다.
MCP가 원하는 것보다 설정이 복잡하다면?
많은 시간을 절약해 주는 구분이 있습니다. MCP는 Claude가 무엇에 접근할 수 있는지를 제어합니다. Claude가 그곳에 접근한 뒤 얼마나 잘 작업하는지에 대해서는 아무것도 말해 주지 않습니다. 이 둘은 서로 다른 문제이며, 대부분의 디자인 팀이 겪는 문제는 첫 번째가 아니라 두 번째입니다.
정말 원하는 것이 Claude에게 제대로 된 디자인 비평, 리서치 계획 또는 디자인 시스템 아키텍트가 승인할 만한 컴포넌트 API를 받는 것이라면, 커넥터는 전혀 필요하지 않습니다. Claude가 그런 전문가처럼 작업하도록 만들면 됩니다. Skill 파일은 바로 그 역할을 합니다. 한 번 업로드하면 Claude에 하나의 역할, 하나의 방법론, 하나의 출력 기준을 부여하는 짧은 Markdown 문서입니다. 설치에는 약 3분이 걸리며 MCP 유무와 관계없이 모든 요금제에서 작동합니다. 아래의 디자인 Skill 중 일부는 현재 무료이므로, 비용을 들이기 전에 아이디어를 시험해 볼 수 있습니다.
커넥터가 아닌 디자이너
무료
이 Skill
제품 디자이너가 진행하듯 비평하는 플로우, 상태, 계층 구조 및 인터랙션 로직: 화면의 목적, 빠진 요소, 문제가 발생했을 때 사용자가 하는 행동을 살펴봅니다. 화면을 붙여 넣거나 설명하기만 하면 되며, 커넥터는 필요하지 않습니다.
Denholm 보기 →실무에서 가장 효과적인 조합은 읽기에는 MCP를, 사고에는 Skill을 사용하는 것입니다. Claude는 파일에서 실제 값을 가져온 다음, 즉흥적으로 처리하지 않고 그 값에 방법론을 적용합니다.
토큰과 컴포넌트 측면을 위해
$29
이 Skill
토큰 이름 지정, 컴포넌트 API, 변형 구조, 그리고 어떤 것이 시스템에 포함될 자격을 얻는지에 대한 규칙. Figma 커넥터가 전달하는 원시 데이터 위에 놓이는 바로 그 판단 계층입니다.
Vashti 보기 →무언가를 디자인하기 전에
무료
이 Skill
리서치 계획, 유도하지 않는 인터뷰 스크립트, 그리고 트랜스크립트를 팀이 실행할 수 있는 인사이트로 전환하는 방법입니다. 지금 무료로 제공되므로 Skills가 결과물을 실제로 바꾸는지 테스트해 볼 수 있는 저렴한 방법이기도 합니다.
Melisande 보기 →무료 컬렉션에는 총 32개의 무료 Skills가 있으며, 더 폭넓은 디자인 세트는 크리에이티브, 콘텐츠 및 디자인 Skills에서 확인할 수 있습니다. 설치 과정을 단계별로 안내받고 싶다면 Claude Skill 설치 방법을 확인하세요.
요약:
Figma MCP는 Claude를 실제 디자인 파일에 연결하므로 스크린샷이 아니라 구조를 기반으로 작업할 수 있습니다. 정기적으로 코드를 생성하거나 토큰을 추출한다면 설정할 가치가 있습니다. Claude의 디자인 판단력 자체의 품질을 바꾸지는 않습니다. 이를 보완하는 것이 바로 Skills 파일입니다. 지금 무료로 제공되는 Denholm - UX/UI Product Designer부터 시작하고, 토큰과 컴포넌트가 문제가 되면 $29에 Vashti - Design Systems Architect를 추가하세요.
Figma MCP: 자주 묻는 질문
Figma MCP는 무료인가요?
이 프로토콜은 개방형 표준이며 서버 자체는 일반적으로 무료로 설치할 수 있습니다. 필요한 것은 해당 파일에 액세스할 수 있는 Figma 계정과 MCP를 지원하는 AI 클라이언트입니다. 일부 AI 클라이언트는 이를 유용하게 만드는 기능에 유료 요금제를 요구하므로, 비용은 커넥터가 아니라 그쪽에서 발생합니다.
Claude가 MCP를 통해 제 Figma 파일을 편집할 수 있나요?
선택한 특정 서버에서 다르게 명시하지 않는 한, 작동하지 않는다고 생각하세요. 이러한 커넥터 대부분은 구조, 값, 콘텐츠를 추출하는 읽기용으로 제작되었습니다. 쓰기 권한은 더 드물고 불안정하므로, 실제 작업 파일이 아닌 복제 파일에서 테스트해야 합니다.
Figma MCP가 Claude Code와 함께 작동하나요?
네. Claude Code는 일반적으로 MCP 서버를 지원하며, 바로 그 점 때문에 디자인을 코드로 변환하는 작업에 자주 함께 사용됩니다. 한쪽에서는 프레임을 읽고 다른 쪽에서는 컴포넌트를 작성하며, 이 모든 작업이 같은 세션에서 이루어집니다. Claude Desktop과 대부분의 AI 지원 에디터에도 동일하게 적용됩니다.
Figma MCP를 설정했다면 디자인 Skills가 여전히 필요한가요?
서로 다른 질문에 답합니다. MCP는 Claude가 무엇을 볼 수 있는지 결정합니다. Skills는 Claude가 본 것을 어떻게 활용하는지 결정하기 때문에, 둘은 경쟁하기보다 함께 사용됩니다. 두 접근 방식을 Claude Skills vs MCP에서 직접 비교했습니다.
