Figma MCP: 기능과 설정 방법

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이며, 텍스트 스타일의 이름이 다음과 같다는 것을 확인할 수 있습니다. 본문/일반 "더 작은 회색 버튼"이 아니라

Figma에는 디자인-코드 워크플로를 목표로 하는 공식 서버가 있으며, 커뮤니티에서는 Figma의 공개 API를 통해 파일을 읽는 구현도 만들었습니다. 인증 방식과 파일에서 노출하는 정보의 범위는 서로 다르지만, Claude 입장에서는 모두 동일하게 보입니다. 요청에 필요할 때 호출할 수 있는 도구 목록인 것입니다. 먼저 더 폭넓은 배경 설명이 필요하다면, MCP가 무엇이고 왜 존재하는지 설명한 쉬운 글을 확인해 보세요.

Figma MCP로 Claude가 실제로 무엇을 할 수 있나요?

흥미로운 점은 "Claude가 파일을 볼 수 있다"는 것이 아닙니다. 수작업으로 하던 작업이 사라진다는 점입니다.

• 선택한 프레임을 파일과 일치하는 프런트엔드 코드로 변환하세요. 이미지를 보고 대략적으로 재현하는 것이 아니라, 디자인 자체에서 가져온 간격, 계층 구조, 컴포넌트 이름을 사용합니다. 여전히 직접 검토해야 합니다. 값을 다시 입력하는 일은 그만하세요.
• 파일에서 디자인 토큰을 추출하세요. 색상 스타일, 타입 스케일, 간격 단계, 모서리 반지름을 코드베이스에서 사용하는 형식에 맞춰 변수로 내보내세요.
• 파일을 자체 시스템과 대조해 감사하세요. 어떤 레이어가 스타일 대신 하드코딩된 hex 값을 사용하는지, 어떤 프레임이 다른 곳에는 없는 간격 값을 사용하는지, 어떤 컴포넌트가 분리된 뒤 조용히 수정되었는지 확인하세요.
• 핸드오프 노트와 사양을 작성하세요. 실제 프레임을 바탕으로 상태, 예외 상황, 빈 상태, 오류 발생 시 동작을 기억에 의존하지 않고 설명할 수 있습니다.
• 맥락 속에서 UX 문구를 검토하세요. 플로우에 포함된 모든 문자열을 순서대로 읽어 같은 동작에 서로 다른 세 단어가 사용된 것을 찾아낼 수 있습니다.
• 대규모 파일에 관한 질문에 답하세요. 이 컴포넌트는 어디에 사용되었는지, 이 브랜치에서 무엇이 변경되었는지, 아직 이전 로고를 참조하는 화면은 무엇인지 확인할 수 있습니다.

이 모든 기능의 기본 패턴은 같습니다. Figma MCP는 디자인과 그 이후의 모든 작업 사이에서 복사하여 붙여넣는 단계를 없애줍니다. 이는 분명 유용하지만, 그것이 제공하는 이점의 전부이기도 합니다. 디자인 결정을 대신 내려주지는 않습니다.

Figma MCP 서버는 어떻게 설정하나요?

세부 사항은 서버와 클라이언트마다 다르고 변경도 잦기 때문에, 블로그 게시물의 명령어를 그대로 복사하면 20분을 허비하기 쉽습니다. 프로세스의 형태는 안정적이므로, 그 형태를 익히세요.

1. 서버를 선택하세요. 에디터 안에서 디자인을 코드로 변환하는 것이 목적이라면 공식 Figma 서버부터 시작하세요. 데스크톱 앱을 실행하지 않고 API를 통해 파일을 읽어야 한다면 커뮤니티 서버를 살펴보세요. 두 유형 모두 공개 MCP 서버 디렉터리에 등록되어 있습니다.
2. 액세스 권한을 설정하세요. 공식 도구는 일반적으로 로그인된 Figma 세션을 사용하며, 앱 안에서 활성화해야 하는 설정이 있습니다. 커뮤니티 서버는 보통 Figma 계정 설정에서 생성하는 개인 액세스 토큰을 요구합니다. 이 토큰은 비밀번호처럼 다루세요. 사용자가 읽을 수 있는 모든 내용을 이 토큰으로 읽을 수 있습니다.
3. 클라이언트의 MCP 설정에 서버를 추가하세요. Claude Desktop, Claude Code 및 대부분의 AI 지원 에디터는 사용할 서버 목록과 각 서버를 실행할 명령, 필요한 인증 정보를 담은 설정 파일을 읽습니다. 여기에 항목 하나를 추가하면 됩니다.
4. 클라이언트를 다시 시작하세요. "작동하지 않는다"는 거의 모든 보고는 설정을 변경한 후 클라이언트를 다시 시작하지 않아서 발생합니다.
5. 연결을 확인하세요. 클라이언트에 연결된 서버와 각 서버가 제공하는 도구가 표시됩니다. 도구 목록이 보인다면 연결 설정이 완료된 것입니다.
6. 살펴볼 대상을 지정하세요. 대부분의 워크플로에서는 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 중 일부는 현재 무료이므로, 비용을 지불하기 전에 아이디어를 시험해 볼 수 있습니다.

실무에서 가장 효과적인 조합은 읽기는 MCP로, 사고는 Skill로 하는 것입니다. Claude가 파일에서 실제 값을 가져온 다음, 즉흥적으로 처리하지 않고 방법론을 적용합니다.

무료 컬렉션에는 총 32개의 무료 Skill이 있으며, 더 폭넓은 디자인 세트는 크리에이티브, 콘텐츠 및 디자인 Skills에 있습니다. 설치 과정을 단계별로 안내받고 싶다면 Claude Skill 설치 방법을 확인하세요.

Figma MCP: 자주 묻는 질문

Figma MCP는 무료인가요?

이 프로토콜은 개방형 표준이며 서버 자체는 일반적으로 무료로 설치할 수 있습니다. 필요한 것은 해당 파일에 액세스할 수 있는 Figma 계정과 MCP를 지원하는 AI 클라이언트입니다. 일부 AI 클라이언트는 이 기능을 사용하려면 유료 플랜이 필요하므로, 비용은 커넥터가 아니라 해당 클라이언트 측에서 발생합니다.

Claude가 MCP를 통해 내 Figma 파일을 편집할 수 있나요?

선택한 특정 서버에서 달리 명시하지 않는 한, 작동하지 않는다고 가정하세요. 이러한 커넥터 대부분은 구조, 값, 콘텐츠를 추출하는 읽기 작업용으로 만들어졌습니다. 쓰기 권한은 더 드물고 불안정하므로, 실제 작업 파일이 아닌 복제 파일에서 테스트해야 합니다.

Figma MCP는 Claude Code에서 작동하나요?

그렇습니다. Claude Code는 일반적으로 MCP 서버를 지원하므로, 디자인을 코드로 전환하는 작업에 두 가지를 함께 사용하는 방식이 인기 있는 이유이기도 합니다. 한쪽에서는 프레임을 읽고 다른 쪽에서는 컴포넌트를 작성하며, 이 모든 과정이 같은 세션에서 이루어집니다. Claude Desktop과 대부분의 AI 지원 편집기에도 동일하게 적용됩니다.

Figma MCP를 설정했다면 디자인 Skill이 여전히 필요한가요?

서로 다른 질문에 답합니다. MCP는 Claude가 무엇을 볼 수 있는지 결정합니다. Skill은 Claude가 본 내용을 어떻게 다룰지 결정하므로, 둘은 경쟁하기보다 함께 사용할 수 있습니다. 두 접근 방식을 Claude Skills와 MCP에서 직접 비교했습니다.