피그마, Dev Mode MCP 서버 출시: Cursor·클로드에서 디자인 맥락 직접 연동

지금까지 AI 도구로 프론트엔드 코드를 짤 때 가장 흔한 방법은 디자인 화면을 캡처해 Cursor나 ChatGPT에 던져주는 것이었습니다. 하지만 이렇게 하면 AI는 프로젝트에 이미 구축된 컴포넌트 라이브러리를 전혀 알지 못한 채 제멋대로 코드를 짜기 일쑤였습니다.

Figma가 이 문제를 해결하기 위해 공식 Figma MCP server 베타 버전을 공개했습니다. 디자인 파일에 담긴 실제 맥락을 개발자의 코딩 환경으로 직접 전달하겠다는 시도입니다.

Cursor가 디자인 시스템을 읽는 방식

이번 기능은 최근 주목받는 Model Context Protocol(MCP) 표준을 채택했습니다. Cursor, Windsurf, Claude Code, VS Code의 Copilot 같은 AI 코딩 도구에 Figma의 구조화된 데이터를 그대로 연결할 수 있습니다.

현재 베타 버전은 선택된 레이어나 특정 노드 ID를 기반으로 세 가지 핵심 도구를 제공합니다. 코드, 이미지, 변수 정의를 각각 가져오는 기능입니다. 서버 설정에서 응답 방식을 바꿀 수 있으며, React와 Tailwind를 활용해 상호작용 가능한 형태의 코드로 전달하는 것도 지원합니다.

스크린샷만 전달할 때와 가장 큰 차이는 메타데이터입니다. 단순한 빨간색 사각형 이미지를 보면 AI는 수많은 토큰 중 어떤 것을 써야 할지 모르거나 중복 컴포넌트를 새로 만들어버립니다. 하지만 Figma MCP server는 정확한 변수명과 함께 Code Connect를 통해 실제 프로젝트에 존재하는 컴포넌트 코드 경로까지 직접 지정해 줍니다. 모델의 불필요한 탐색을 줄이고 토큰 낭비도 막을 수 있습니다.

전체 화면 흐름을 파악하기 위한 고수준 스크린샷이나 플레이스홀더 텍스트, 레이어 이름 같은 내용도 함께 전달되어 AI가 데이터 모델을 유추할 수 있도록 돕습니다. 현재 Figma의 Dev 시트나 Full 시트를 보유한 사용자라면 누구나 연동해 쓸 수 있습니다. 향후 데스크톱 앱 없이 구동되는 원격 서버와 심층 코드베이스 통합 등도 순차적으로 추가될 예정입니다.

왜 중요한가

평소 Cursor나 Windsurf를 사용하는 개발자라면 당장 연동해 볼 만한 가치가 큽니다. 디자인 시안을 보고 일일이 디자인 토큰을 대조하거나 사내 컴포넌트로 코드를 교체하던 번거로운 수작업을 대폭 줄여주기 때문입니다.

업계 관점에서도 이번 발표는 상징적입니다. 디자인 분야의 지배적 플랫폼인 Figma가 자체 폐쇄형 AI 툴을 강요하는 대신, MCP라는 개방형 프로토콜을 통해 개발자가 선호하는 외부 에디터의 컨텍스트 공급자로 나섰다는 점이 그렇습니다.

우리는 Figma의 이런 선택이 매우 영리하다고 봅니다. 개발자를 억지로 자사 인터페이스에 묶어두기보다 가장 익숙한 작업 흐름에 스며드는 방식을 택했기 때문입니다. 다만 한계도 분명합니다. 이 기능의 결과물 품질은 팀의 디자인 시스템 정리 수준에 전적으로 비례합니다. 디자인 파일 내 변수와 컴포넌트가 체계적으로 관리되지 않은 상태라면, AI는 여전히 기존 규칙과 어긋나는 코드를 빠르게 양산할 위험이 있습니다.