Figma MCP
멤버십 회원 전용 구독
피그마피그마 #37

Figma MCP 완전 정복: 디자인을 코드로 자동 변환하는 방법 – 피그마 강좌 4-8

AI피그마FigmaMCPCursorAPI

이번 강의에서는 Figma의 새로운 코드 전환 기능인 MCP(Model Context Protocol) 를 활용하여 디자인을 구조화된 코드로 빠르게 변환하는 방법을 실습합니다. MCP는 기존의 이미지 기반 분석과 달리, 디자인의 구조적 정보(컴포넌트, 변수, 스타일 등)를 AI가 직접 읽을 수 있게 해주는 통합 프로토콜입니다. 이를 통해 Claude, GPT, Cursor 같은 AI 도구들이 Figma 디자인을 이해하고, 정확도 높은 코드로 자동 변환할 수 있게 됩니다.
영상에서는 Cursor 에디터와 MCP Server를 연결해 실제로 리액트 코드로 변환하는 전 과정을 다룹니다.
주요 학습 내용은 다음과 같습니다.

  • MCP 개념과 구조적 동작 방식
  • 기존 방식과의 차이점
  • Dev Mode MCP Server 설정 방법
  • Cursor와 MCP 연동 과정
  • 실전 프롬프트로 코드 생성하기 (get_code, get_variable_defs 등)

Figma를 단순 디자인 툴이 아닌 개발 가능한 디자인 협업 플랫폼으로 활용하고 싶다면, MCP 기능을 꼭 활용해보시기 바랍니다. 특히 프론트엔드 개발자에게는 매우 실용적인 도구가 될 수 있습니다.

MCP 활용

MCP란 무엇인가?

MCP(Model Context Protocol)는 다양한 LLM 기반 툴(예: Claude, Copilot, Cursor 등)이 여러 서비스의 내부 구조를 정형화된 형태로 읽고 해석할 수 있도록 도와주는 통합 프로토콜입니다.

MCP란

이 프로토콜은 Notion, Slack, GitHub, Figma 등 다양한 도구에 적용되어, 각 서비스의 구조적 정보를 AI가 이해 가능한 방식으로 전달합니다.

우리가 이번 강의에서 사용하는 것은 Figma MCP로, Figma 내부의 컴포넌트, 변수, 스타일 정보를 LLM이 구조적으로 파악할 수 있게 합니다.

우리가 사용할 피그마 MCP

기존에는 UI를 캡처하거나 플러그인으로 추출한 이미지 기반 해석만 가능했지만, 이제는 Figma API를 통해 의미 기반 구조(semantic structure)를 직접 전달할 수 있습니다.

실제로 저번 영상에서도 보았듯이, 클로드에 UI 이미지를 넣어 작업한 것보다, Make를 활용한 MCP 기반 생성 결과물이 더 정확하게 반영되었고, 작업 속도 역시 크게 단축되었습니다.

UI 스크린샷 활용 vs 프레임 데이터 활용

기존 방식과 MCP 방식 비교

항목기존 방식 (스크린샷 기반)MCP 방식 (API 기반)
데이터 해석픽셀 기반 이미지 분석시멘틱 구조 해석
코드 품질비정형 코드 / 수작업 필요변수, 구조 연동된 정형 코드
속도느리고 반복 작업 필요빠르고 자동화 가능
LLM 활용도낮음매우 높음

그림 설명 – MCP 동작 구조

  1. 하단 앱들: Notion, Slack, Google Drive, Figma, GitHub, Jira, Trello 등에서 데이터를 개별 API로 MCP에 제공합니다.
  2. MCP (중앙): 다양한 앱의 정보를 정리해 LLM이 이해할 수 있는 공통된 구조(MCP 포맷)로 정제합니다.
  3. 상단 LLM들: Claude, GPT, Gemini, Mistral, Llama 등 주요 AI가 MCP를 통해 정제된 데이터를 받아 정확한 코드와 응답을 생성합니다.

즉, MCP는 복잡한 구조를 AI가 이해 가능한 의미 단위로 가공해주는 중간 다리 역할을 수행합니다.

언제 활용하면 좋은가?

디자인‑개발 협업에서 Figma를 기반으로 한 고품질 코드 핸드오프를 원할 때 사용하면 좋습니다. 참고로, 해당 기능은 디자이너를 위한 기능이라기 보다는, 완성된 디자인을 코드로 구현해야하는 프론트엔드 개발자 분들을 위한 기능이라는 생각이 듭니다.
그래서, 개발을 아예 모르신다면 이런 기능이 있구나 정도로 보시면 될것같아요.

Figma MCP 사용법

저희는 Cursor를 사용할 겁니다.

Cursor란?

커서란?

Cursor는 개발자를 위한 AI 기반 코드 편집기입니다. Visual Studio Code와 유사한 인터페이스를 갖고 있으며, AI 모델(Claude, GPT, gemini 등)과 직접 연결되어 코드 작성, 리팩토링, 디버깅을 보다 빠르게 수행할 수 있도록 도와줍니다.

1. Dev Mode MCP Server 활성화

Figma 앱에서 Preferences > Enable Dev Mode MCP Server 클릭해줍니다.

2. AI 에디터에 MCP 서버 등록

Cursor에서 우측 상단에 있는 설정 버튼 누른 뒤, Tools & integrations를 눌러줍니다. 그럼 MCP Tools가 실행되는데, 여기에 New MCP Server를 누르면 mcp관련 Json 파일이 열리는데, 거기에 아래 내용을 넣어주세요. 

{
  "mcpServers": {
    "Figma": {
      "url": "<http://127.0.0.1:3845/sse>"
    }
  }
}

3. 프로젝트 폴더 생성

테스트 해볼 폴더를 만들어서 오픈해줍니다. 그리고 저는 리액트로 변환해볼거라서, 리액트를 사전에 설치해줬어요.

4. 피그마에서 섹션 카피 및 프롬프트 작성

연결이 완료되었다면, 이제 피그마에 있는 섹션을 그대로 활용할 수 있습니다. 특정 프레임의 우클릭 후 Copy/Paste as > “Copy link to selection” (Cmd + L)을 눌러줍니다.

커서의 프롬프트창에 붙여넣으면 아래와 같은 링크가 들어가집니다. https://www.figma.com/design/LcbV0vFYIchk70166vkESj/figma2025-추가-업데이트?node-id=4653-1743&t=rlwRVLNirD9cXrhE-4

프레임 링크 붙여넣고 프롬프트를 넣어주면 되겠죠. 반응형 웹으로 만들어달라고 해볼게요. 그러면, 연결이 잘 된경우에는 get_code 를 실행할 것인지 나옵니다. Run을 눌러주면 해당 프레임에서 코드를 불러오는 작업이 실행됩니다.

MCP Tools의 기능 설명

1. get_code

의미: 현재 선택된 Figma 노드에 대해 코드를 생성함.

사용 예:

이 컴포넌트를 React + Tailwind로 만들어줘

특징:

MCP 서버에서 해당 노드의 구조·스타일·변수·레이아웃 정보를 가져와 코드로 변환함.
GPT가 “이미지 추론” 대신 “정확한 디자인 메타정보”로 코드를 작성함.

2. get_variable_defs

의미: Figma에서 정의된 모든 변수(variables) 를 가져옴.

사용 예:

디자인에 사용된 색상 변수 전체를 JSON으로 정리해줘

특징:

컬러, 텍스트 스타일, spacing 등의 디자인 시스템 토큰을 자동으로 수집.
변수 이름, 값(hex 등), alias 관계까지 파악 가능.
디자인 시스템 구축에 유용함.

3. get_code_connect_map

의미: 디자인 요소(프레임, 컴포넌트 등)와 이미 존재하는 코드 간 연결 정보를 분석.

사용 예:

이 디자인이 기존 코드와 어떻게 연결되는지 매핑해줘

특징:

예를 들어 Button 컴포넌트가 코드 내 components/Button.tsx와 연결되었는지 시각화하거나 확인 가능.
리팩토링 시 사용되는 연결 참조 구조를 맵으로 만들어줌.

4. get_image

의미: Figma 노드를 이미지(스크린샷) 형태로 추출.

사용 예:

이 프레임을 이미지로 추출해서 docs용으로 사용하고 싶어

특징:

MCP는 원래 메타데이터 기반이지만, get_image는 비주얼 정보가 필요한 경우에 사용.
디자인 리뷰 문서, 프레젠테이션, 또는 비개발자 공유용으로 유용.

언제 어떻게 써야 할까?

목표활용 도구프롬프트 예
코드로 변환get_code“이 로그인 프레임을 React 컴포넌트로 만들어줘”
디자인 시스템 추출get_variable_defs“사용된 색상 변수, spacing 변수 모두 JSON으로 보여줘”
기존 코드 매핑get_code_connect_map“Figma 디자인과 코드 간 연결 관계를 보여줘”
이미지 추출get_image“이 프레임을 png로 추출해줘”

사용 전·후 비교

구분사용 전 (Inspect)사용 후 (MCP)
코드 구조인라인 스타일, 중첩 많은 구조<nav>, 컴포넌트 맵핑된 구조
변수 처리색·간격 등 값만 전송토큰 및 디자인 변수까지 정확하게 사용
코드 클린성비효율적, 손보기 필요깔끔한 Semantically correct 코드
개발 효율단순 참고용실제 구현 가능한 코드 제공

이렇게 Figma MCP를 활용해서 디자인 작업물을 빠르게 코드로 변환하는걸 해봤습니다. 정확도가 완벽하진 않지만, 이정도만 해줘도 작업 효율이 많이 높아지겠죠?! 앞으로도 피그마가 업데이트되어 추가되는 내용들이 있다면, 추가 영상 제작해드리겠습니다.

그리고 밀린 영상들 빠르게 제작해서 공유드릴게요. 구독과 좋아요 해주시면 감사하겠습니다~!

AI피그마FigmaMCPCursorAPI
디자인베이스

누구나 쉽게 배우는 디자인 클래스

피그마 Make
이전 글
Figma Make 기능으로 기획부터 코드 생성까지 한 번에 - 피그마 강좌 4-7

관련 강좌