Figma MCP가 혁신하는 디자인-개발 업무방식

Jun 28. 2025

최근 Figma에서는 Dev Mode MCP 서버라는 새로운 기능을 선보였다. Figma MCP는 인공지능(AI)을 활용해 디자인 데이터를 코드로 손쉽게 변환하도록 도와주는 도구로, UX/UI 디자이너와 프런트엔드 개발자 모두에게 새로운 디자인 경험을 만들어주고 있다. 특히 스타트업처럼 빠른 개발 사이클이 중요한 팀에서, 디자인과 개발의 경계를 허물어 효율을 높여줄 기술이다. 이번 글에서는 Figma MCP가 무엇인지, 디자인 방식에는 어떤 변화가 생겼는지, 그리고 어떻게 활용하는지 알아보자.

Figma MCP란 무엇인가?

MCP는 Model Context Protocol의 약자로, AI 모델과 외부 애플리케이션(데이터 소스)을 연결해주는 표준화된 오픈 프로토콜이다. 쉽게 말해, 챗GPT 같은 대형 언어 모델(LLM)이 다른 서비스의 정보를 직접 가져다 쓸 수 있게 해주는 브리지(bridge) 역할을 한다. Figma MCP는 바로 이 MCP 표준을 Figma에 적용한 것으로, Figma 디자인의 맥락(context)을 AI에 제공해주는 개발 모드 전용 MCP 서버를 의미한다.

Figma MCP 서버를 활용하면 GitHub Copilot Chat, Cursor AI, Anthropic의 Claude Code 등 MCP를 지원하는 AI 코딩 도구들과 Figma를 연결할 수 있다. 이를 통해 AI 코딩 도구가 Figma 디자인 파일의 세부 정보를 직접 참조하면서 코드를 생성하게 된다. 다시 말해, 이전까지는 AI에게 디자인을 설명하려면 이미지 캡처나 JSON을 일일이 입력해야 했지만, 이제는 Figma가 디자인 데이터를 직접 AI에게 실시간으로 건네주는 것이다. 그 결과 AI가 코드로 변환한 내용이 디자인과 더 밀접하게 일치하게 된다. 실제로 Figma MCP 서버는 디자인 파일에 담긴 중요한 디자인 정보(텍스트, 색상, 레이아웃, 컴포넌트 등)를 AI에게 컨텍스트로 제공하여, Figma를 개발자의 작업 흐름에 직접 통합해준다.

현재 Figma Dev Mode MCP 서버는 오픈 베타 단계로 공개되어 있으며, Professional이나 Organization 플랜 등 유료 플랜의 Dev Mode 권한이 있는 사용자만 이용할 수 있다. 또한 Figma 데스크톱 앱에서만 동작하며 웹 버전 Figma에서는 MCP 서버를 사용할 수 없다는 점도 유의해야 한다. Figma팀은 앞으로 원격 서버 지원이나 코드베이스 연동 강화 등 MCP 서버 기능을 계속 발전시켜 나갈 계획이라고 밝히고 있다.

디자인 방식이 변한다.

Figma MCP의 도입은 디자인과 개발 간 협업 방식에 큰 변화를 가져오고 있다. 예전에는 디자이너가 만든 시안을 개발자가 일일이 확인하며 코드로 옮기는 과정에서 시간과 해석의 여지가 많이 필요했다. AI 코딩 도구의 등장으로 상황이 조금 나아졌지만, 그동안 AI에 디자인 의도를 전달하려면 디자인 화면을 이미지로 찍어 보여주거나 API로 JSON 데이터를 넘기는 식으로 간접적이고 번거로운 방법을 써야 했다. 그러나 이제 Figma MCP를 통해 AI가 디자인 파일 자체를 직접 읽어들여 이해할 수 있게 됐다. 이는 마치 개발자와 한 공간에서 디자인을 보며 코딩하는 것처럼, AI가 디자인의 맥락을 완전히 파악한 상태로 코드를 생성한다.

Figma에서 생성된 화면을 코드로 전환하기

특히 디자인 시스템을 갖춘 팀이라면 Figma MCP의 영향이 두드러진다. 디자인 시스템이란 색상, 타이포그래피, 컴포넌트 등의 재사용 가능한 스타일과 규칙을 정리해 놓은 것인데, MCP를 쓰면 AI가 이런 디자인 시스템의 존재를 직접 인지하고 코드에 활용할 수 있다. 예를 들어 Figma 디자인에서 특정 UI 컴포넌트를 사용했고 그것이 코드 라이브러리에 연결되어 있다면, MCP 서버는 해당 컴포넌트의 코드 경로까지 AI에게 알려주어 AI가 정확한 컴포넌트를 코드에 불러쓰도록 도와준다. 디자인과 코드의 연결고리가 더욱 촘촘해지면서, 디자이너가 설정한 의도가 그대로 코드에 반영될 가능성이 높아진 것이다.

MCP는 Figma를 활용한 디자인-개발 과정을 혁신하고 있음

이러한 변화는 디자이너들의 작업 방식에도 영향을 준다. AI가 좋은 품질의 코드를 뽑아내려면 디자인 파일 자체가 체계적이어야 하기 때문이다. 예를 들어 반복적으로 등장하는 요소는 컴포넌트로 만들어두고, 색상·여백 등 스타일 값은 일괄적인 변수(토큰)로 정의하며, 레이어 이름도 Group 5 같은 이름 대신 Card Container 처럼 명확하게 짓는 것이 중요하다. 또 Auto Layout을 사용해 반응형 동작을 디자인에 미리 반영해두면 AI가 이를 고려한 코드를 생성할 수 있다. 나아가 Figma의 Code Connect 기능으로 디자인 컴포넌트를 실제 코드 컴포넌트와 연결시켜두면, AI가 코드를 생성할 때 우리 프로젝트의 실제 코드 조각을 참조하여 훨씬 일관된 결과물을 만들어준다. 이처럼 디자이너는 이전보다 더 개발을 염두에 두고 디자인 구조를 잡아야하고, 개발자는 디자인 시스템과 MCP를 활용해 반자동으로 코드 구현을 완성하는 새로운 역할을 맡게 된다. 궁극적으로 디자인-개발 워크플로우는 더 병렬적으로 이루어지고, 서로 피드백을 주고받으며 빠르게 제품을 발전시킬 수 있는 방향으로 변화하고 있다.

이러한 방식으로 접근하면 회원가입 화면 5페이지 분량의 UI를 디자인하고 이를 개발자가 Figma MCP와 AI 코딩 도구를 이용해 불과 10분 만에 구현할 수도 있다. 폴더 구조가 기능별로 잘 나뉘어 있고, 컴포넌트들도 적절히 분리되어 재사용 등의 태스크가 잘 준수가 된다면 Figma에서 디자인을 선택하고 AI에게 코드를 생성시키는 방식으로 작업을 진행해도, 짧은 시간에 완성도 높은 코드를 생성할 수 있다. 이처럼 MCP를 활용하면 초기 프로토타입 코딩에 걸리는 시간을 획기적으로 단축하면서도, 디자인 시스템에 맞는 비교적 깔끔한 코드를 얻을 수 있음을 보여준다.

AI-PDTQ (7월,VOD)_인공지능 활용 프로덕트디자인 기술자격 교육과정 - 온오프믹스

다양한 AI 도구들을 활용한 프롬프트 엔지니어링을 통해 프로덕트 디자인 과정을 자동화 하여 보다 높은 수준의 제품/UX/UI를 효율적으로 설계할 수 있도록 교육 및 실습 진행

https://onoffmix.com/event/324480

Figma MCP 사용 방법

그렇다면 실제로 Figma MCP를 사용하려면 어떻게 해야 할까? 앞서 강조했듯 Figma의 Dev Mode 기능과 연계되므로, 먼저 Dev Mode MCP 서버를 켜는 것부터 시작한다. 아래에 기본적인 사용 순서를 정리했다.

Figma에서 MCP 서버 활성화:

Figma 데스크톱 앱을 최신 버전으로 업데이트가 필요하다. 이후 디자인 파일을 연 상태에서 좌측 상단 Figma 메뉴 → Preferences → “Enable Dev Mode MCP Server” 옵션을 찾아 활성화한다. 이 옵션은 말 그대로 Figma의 Dev Mode가 켜진 상태에서만 나타나므로, 만약 Dev Mode를 끈 상태라면 먼저 Dev Mode 뷰로 전환해야 한다. MCP 서버가 켜지면 Figma 화면 하단에 서버가 실행되었다는 메시지가 나타나며, Figma가 내부적으로 http://127.0.0.1:3845/sse 주소로 MCP 서버를 구동시킨다. Figma에서 할 설정은 이게 전부다.

개발 도구(IDE)에서 MCP 서버 연결:

이제 AI 코딩을 도와줄 MCP 클라이언트 측 설정을 해야 한다. 앞서 언급한 VS Code, Cursor, Claude Code 등의 도구 중 사용하는 것이 있다면, 해당 환경에 방금 연 Figma MCP 서버를 등록해주어야 한다. 예를 들어 VS Code의 경우 설정 파일(settings.json)에 다음과 같은 정보를 추가하면 된다: Figma MCP 서버의 타입("type": "sse")과 URL("url": "http://127.0.0.1:3845/sse")을 지정해주는 것이다. Cursor AI 툴은 설정 화면에서 “+ Add new MCP Server” 버튼을 통해 URL을 입력하는 방식으로 추가할 수 있고, Anthropic Claude를 터미널에서 쓰는 Claude Code의 경우 다음과 같은 명령어 한 줄로 서버를 등록할 수 있다: claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse 위와 같이 설정을 마치고 나면, 각 도구의 MCP 연결 목록에 “Figma Dev Mode MCP”가 나타날 것이다. 연결 과정에서 혹시 실패한다면 Figma 데스크톱 앱에서 MCP 서버 옵션이 제대로 활성화되어 있는지, 그리고 Figma와 IDE를 재시작해보는 것이 좋다.

AI에게 코드 생성 프롬프트 보내기:

준비가 끝났다면, 이제 실제 디자인을 코드로 변환해볼 차례다. 방법은 두 가지가 있다. 첫 번째는 Figma에서 프레임이나 컴포넌트를 선택한 상태에서, IDE의 AI 어시스턴트(예: Copilot Chat 창이나 Claude 터미널)에 “현재 선택한 디자인을 구현해줘”와 같은 요청을 보내는 것이다. AI는 MCP를 통해 선택된 노드(node)의 모든 디자인 데이터를 받아와서 해당 UI에 대한 코드를 생성해준다. 두 번째 방법은 Figma 객체의 링크를 복사한 뒤, AI에게 “이 링크의 디자인을 코드로 구현해줘”라고 프롬프트를 주는 것이다. 그러면 AI가 링크 속 ID를 읽어 동일하게 해당 노드의 디자인 정보를 가져와 코드를 만들어준다. 예를 들어 특정 화면(Frame)의 링크를 복사해 전달하면, 그 화면에 포함된 요소들의 계층, 텍스트, 색상, 제약 조건 등 관련 속성이 모두 AI에게 공유되어 보다 정확한 코드 결과물을 얻을 수 있다.

이제 AI가 작성해준 코드를 검토하여 필요한 수정을 가미하면 된다. 코드를 살펴보다가 디자인 의도가 잘못 전달된 부분이 있다면, 디자인 파일을 정비하거나 프롬프트를 구체화하여 다시 시도해볼 수 있다. 예를 들어 결과물이 스타일 토큰을 사용하지 않고 하드코딩된 값만 쓴다면, AI에게 "이 디자인에 사용된 변수명과 값을 참고해서 코드에 반영해줘"라고 지시할 수도 있다. 프롬프트를 어떻게 쓰느냐에 따라 AI의 출력물 품질이 크게 좌우되므로, 필요하다면 프레임워크나 코드 스타일, 파일 경로 등을 명시하며 AI를 가이드하면 좋다. 이렇듯 MCP를 활용한 디자인-개발 연계 과정은 사람과 AI의 협업으로 볼 수 있으며, 디자이너와 개발자가 의도를 정확히 전달하고 반영하는 새로운 커뮤니케이션 방법이라 할 수 있다.

디자인과 개발의 경계를 넘어서

Figma MCP의 등장은 디자인과 개발의 경계를 한층 좁히는 계기가 되고 있다. 디자이너는 자신이 만든 Figma 디자인이 곧바로 코드에 반영되는 즉각성을 경험할 수 있고, 개발자는 반복적인 마크업 작업을 덜고 창의적인 로직 구현에 더 집중할 수 있게 된다. 물론 현재는 베타 단계여서 완벽하지 않을 수 있고, AI가 생성한 코드가 모든 경우에 100% 적합하리란 보장은 없다. 하지만 디자인 시스템이 정착된 팀일수록 이러한 도구의 혜택을 크게 볼 것이며, 초급 디자이너나 개발자라도 MCP를 통해 더 효율적인 협업을 배울 수 있을 것이다.

Figma MCP는 디자인 의도를 유지한 채 코드로 변환하는 새로운 패러다임의 시작점이다. 앞으로 원격 협업 환경 지원, 더 많은 IDE와의 연동, 그리고 디자인 시스템과의 통합이 고도화된다면 디자인-개발 워크플로우는 지금보다 더욱 매끄럽게 이어질 것이다. 변화의 흐름 속에서 디자이너와 개발자 모두 이러한 새로운 툴에 대한 이해와 적응이 필요하며, 이를 통해 창출될 더 빠르고 일관된 제품 개발 사이클을 기대해본다. Figma MCP가 가져올 디자인 실무의 혁신을 통해 새로운 디자인 경험의 패러다임으로 한 걸음 나아가 보자.