Figma Dev Mode MCP (로컬) — Claude Code MCP 서버

Figma 공식 Dev Mode MCP 서버. Figma 데스크톱이 로컬에 띄우는 서버로 선택한 디자인의 코드/메타데이터/스크린샷/변수 정의를 가져온다(design-to-code).

Figma Dev Mode MCP는 Figma가 공식 제공하는 로컬 MCP(Model Context Protocol) 서버입니다. Figma 데스크톱 앱이 실행 중일 때 로컬 호스트(예: 127.0.0.1:3845)에 서버를 띄우고, Claude Code 같은 MCP 클라이언트가 HTTP 트랜스포트로 접속해 현재 선택한 디자인의 정보를 구조화된 형태로 가져올 수 있게 합니다. 핵심 목적은 design-to-code, 즉 디자인을 코드로 옮기는 과정에서 사람이 화면을 눈으로 보고 수치를 옮겨 적던 작업을 줄이는 것입니다.

이 서버를 통해 AI는 선택된 프레임·컴포넌트의 코드 표현(레이아웃·스타일 등), 노드 구조와 메타데이터, 화면 스크린샷, 그리고 디자인 변수(색상·간격·타이포 등 토큰) 정의를 조회할 수 있습니다. 덕분에 AI가 임의로 픽셀 값을 추측하는 대신 실제 디자인 소스의 변수와 측정값을 근거로 컴포넌트를 구현할 수 있어, 디자인 시스템과의 정합성을 높이고 반복 수정 비용을 줄이는 데 도움이 됩니다.

쓰면 좋은 사람: Figma로 받은 시안을 React·Tailwind 등으로 구현하는 프런트엔드 개발자, 디자인 토큰을 코드 변수로 맞추려는 디자인 시스템 담당자, 시안 기반 UI 작업을 AI에게 맡기되 수치 오차를 줄이고 싶은 팀입니다. 특히 디자인 변수 정의를 직접 읽어오므로 색·간격·라운드 같은 축을 토큰으로 일관되게 박는 작업과 잘 맞습니다.

전제 조건: 로컬 서버이므로 Figma 데스크톱 앱이 실행 중이어야 하고, Dev Mode MCP 서버 기능이 활성화돼 있어야 합니다. 사용 가능 여부·요금제 조건·정확한 포트와 활성화 절차는 버전에 따라 달라질 수 있으니 출처의 Figma 공식 문서(Guide to the Figma MCP server) 확인을 권장합니다.

언제 쓰나

Figma 시안을 코드로 옮길 때, 특히 AI에게 컴포넌트 구현을 맡기되 색·간격·타이포 등 디자인 변수와 측정값을 추측이 아니라 실제 소스에서 가져오게 하고 싶을 때 적합합니다. 디자인 시스템 토큰을 코드 변수와 맞추는 작업, 선택 프레임의 구조·스크린샷·메타데이터를 근거로 한 UI 구현 검토에 유용합니다. 디자인 변경이 잦아 반복 수정 비용이 큰 프런트엔드 팀에 특히 효과적입니다.

설치

claude mcp add --transport http figma-dev-mode http://127.0.0.1:3845/mcp

로컬 전용 서버라 Figma 데스크톱 앱이 실행 중이어야 하며, 앱에서 Dev Mode MCP 서버 기능을 켜야 동작합니다. Claude Code는 HTTP 트랜스포트로 로컬 주소(예: 127.0.0.1:3845)에 접속합니다. 사용 가능 여부와 요금제 조건, 정확한 포트·활성화 절차는 Figma 버전과 정책에 따라 달라질 수 있으니 공식 문서 확인을 권장합니다. 연결이 안 되면 앱 실행 상태와 포트, 서버 활성화 여부를 먼저 점검하세요.

보안 주의

별도 API 키나 비밀키는 요구하지 않으며 로컬 호스트에 한정된 서버라 외부 노출 위험은 낮은 편입니다. 다만 AI가 현재 Figma 세션에서 선택한 디자인의 코드·메타데이터·스크린샷·변수 정의에 접근하므로, 미공개 제품 디자인이나 내부 자료가 AI 컨텍스트와 대화 로그로 전달될 수 있음을 인지해야 합니다. 디자인에 포함된 텍스트(레이어 이름·주석 등)가 프롬프트 인젝션 경로가 될 수 있으니 가져온 내용을 무비판적으로 명령으로 실행하지 마세요. 로컬 포트는 외부에 개방하지 말고, 민감 시안 작업 시 접근 범위를 확인하세요.

자주 묻는 질문

Figma 데스크톱 앱 없이도 쓸 수 있나요?

아니요. 로컬 Dev Mode MCP 서버는 Figma 데스크톱 앱이 실행되어 서버를 띄워야 동작합니다. 앱에서 해당 기능 활성화도 필요하며, 자세한 조건은 공식 문서 확인을 권장합니다.

어떤 정보를 가져올 수 있나요?

선택한 디자인의 코드 표현, 노드 구조·메타데이터, 화면 스크린샷, 그리고 색·간격·타이포 등 디자인 변수(토큰) 정의를 조회할 수 있어 추측 없이 정합성 높은 design-to-code 구현이 가능합니다.

API 키가 필요한가요?

이 설정은 로컬 HTTP 접속이라 별도 비밀키를 요구하지 않습니다. 다만 요금제·기능 가용성 조건이 있을 수 있으니 Figma 공식 문서를 확인하세요.