AI/MCP(2026) vs CLI

개발자를 위한 MCP 추천(4) - Figma MCP 설치 및 사용방법 : 자연어로 Figma를 조작하는 법, Figma 디자인을 코드로 자동 변환

2026년 3월 · 개발자를 위한 MCP 추천 시리즈

"MCP가 죽었다"말도 나오는데, 그래도 현시점 쓸만한 MCP 10개

2025년에 썼던 개발자용 MCP 시리즈들이, 이제 상당 부분 구버전이 됐다.
생태계가 빠르게 변했고, 새로 등장한 도구들도 많다.
2026년 3월, 다시 한번 실제로 써보고 쓸 만한 것들만 골라 정리해려고 한다.

이 시리즈를 다시 쓰는 이유

지난 2월 말, "MCP는 죽었다, CLI 만세 — Eric Holmes의 도발적 주장"이라는 글을 정리한 적이 있다. Eric Holmes가 주장한 핵심은 간단하다. LLM은 이미 CLI에 능숙하다. 그렇다면 MCP라는 별도의 추상 계층이 굳이 필요한가?

실제로 Claude Code 환경에서 MCP 대신 CLI로 해결되는 경우가 꽤 많다. 디버깅도 쉽고, 별도 프로세스 관리도 없고, 기존 인증도 그대로 쓸 수 있다. 그 글에서 공감하신 분들이 많았다.
그럼에도 불구하고, MCP만이 줄 수 있는 가치가 분명히 존재한다.

안녕하세요! 갓대희 입니다.

오늘은 개발자를 위한 MCP 시리즈 이어서 Figma MCP를 소개하려 한다.

디자이너와의 협업, 그리고 디자인을 코드로 변환하는 작업이 얼마나 달라지는지 알아보자.

Figma MCP 핵심 정리
Figma MCP는 Claude 같은 AI가 Figma 디자인 파일의 구조, 컴포넌트, 변수, 스타일 정보를 직접 읽어서 코드를 생성할 수 있게 해주는 도구다. 스크린샷으로 디자인을 "보여주는" 방식이 아닌, 레이아웃 제약·색상·간격 등 정확한 메타데이터를 구조적으로 전달한다. Figma 공식 원격 서버(mcp.figma.com)와 데스크탑 앱 로컬 서버 두 가지 방식이 있으며, 2026년 기준 모든 Figma 플랜에서 사용 가능하다.

1. Figma MCP란?

Figma MCP는 Figma가 공식 제공하는 MCP 서버로, AI 에이전트가 Figma 디자인 파일의 세부 정보를 직접 읽어올 수 있게 해준다. 기존에는 디자이너가 스크린샷을 캡처해서 개발자에게 전달하거나, Figma Dev Mode에서 수치를 하나씩 확인해가며 코드를 작성했다.

Figma MCP를 사용하면 Claude에게 "이 Figma 프레임 링크를 보고 React 컴포넌트를 만들어줘"라고 말하는 것만으로, AI가 실제 디자인의 레이아웃, 색상, 타이포그래피, 간격 등 정확한 수치를 읽어서 코드를 생성한다.

왜 스크린샷보다 나은가?
스크린샷을 보고 AI가 코드를 생성하면 "버튼 패딩이 12px인지 16px인지" 정확히 알 수 없다. 하지만 Figma MCP는 구조화된 메타데이터를 통해 정확한 수치, 폰트 이름, 색상 hex 값, 자동 레이아웃 설정 등을 전달한다. 픽셀 퍼펙트 구현이 훨씬 쉬워진다.

Figma MCP는 양방향 도구다
Figma → Code 방향만 있는 게 아니다. generate_figma_design Tool을 사용하면 이미 만들어진 웹 페이지를 편집 가능한 Figma 레이어로 역변환할 수 있다. Stitch나 Claude Code로 먼저 개발한 프로젝트를 Figma로 역캡처해서 디자인 관리를 시작하거나, 기존 레거시 UI를 Figma 자산으로 정리하는 데도 활용할 수 있다.

2. 설치 방법

Figma MCP는 두 가지 서버 타입이 있다. 어떤 것을 선택할지는 사용 환경에 따라 결정한다.

(출처: Figma 공식 개발자 문서)

구분	원격 서버 (Remote)	데스크탑 서버 (Desktop)
서버 위치	Figma 호스팅 (mcp.figma.com)	로컬 (Figma 데스크탑 앱)
Figma 앱 필요	불필요 (웹 브라우저로도 OK)	필요 (데스크탑 앱 실행 중이어야 함)
컨텍스트 제공 방식	URL 링크 복사/붙여넣기	데스크탑 앱에서 레이어 선택
플랜 요건	모든 플랜 사용 가능	Dev 또는 Full 시트 (유료 플랜)
Starter 플랜 제한	월 6회 Tool 호출	해당 없음 (유료 플랜 전용)

Starter 플랜 또는 View/Collab 시트 사용자는 원격 서버를 통해 월 최대 6회 Tool 호출만 가능하다. 활발히 사용할 계획이라면 유료 플랜을 고려해야 한다.

(출처: Figma Plans, access, and permissions)

ex) 공식 문서 링크를 주거나 https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ 그냥 자연어로 figma mcp 설치해줘.

( 반대로 내 블로그 링크를 주고 해당 mcp 설치 해줘 라고 진행해도 진행 된다. )

방법 1: Claude Code 대화형 설치 — 원격 서버 (권장)

터미널에서 아래 명령어를 실행한다. Figma는 HTTP transport 방식의 원격 서버를 사용한다:

# 현재 프로젝트에만 설치

claude mcp add --transport http figma https://mcp.figma.com/mcp

# 모든 프로젝트에서 사용 (--scope user)

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

설치 후 Claude Code를 새로 시작하고 /mcp를 입력한다. Figma 항목을 선택하고 Authenticate를 눌러 OAuth로 Figma 계정에 로그인하면 완료이다.

인증 방식 안내
Figma MCP 원격 서버는 Personal Access Token(PAT)이 아닌 OAuth 인증을 사용한다. 브라우저가 자동으로 열려 Figma 로그인 화면이 나타나며, Allow Access를 클릭하면 인증이 완료된다. (출처: Figma Remote Server Installation 공식 문서)

방법 2: Claude Code settings.json 직접 설정 — 원격 서버

~/.claude/settings.json 또는 프로젝트의 .claude/settings.json에 추가한다:

// ~/.claude/settings.json

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

방법 3: Claude Desktop 설정 — 원격 서버

Claude Desktop 설정 파일에 추가한다:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

// claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

데스크탑 서버 사용 방법 (로컬)

Figma 데스크탑 앱(Dev 또는 Full 시트 필요)에서 로컬 MCP 서버를 활성화하는 방법은 아래와 같다:

Figma 데스크탑 앱 실행
메뉴에서 Figma > Settings > MCP Server 찾기
로컬 서버 활성화 토글 켜기
Claude Code settings.json에 로컬 서버 주소(http://127.0.0.1:PORT) 추가

데스크탑 서버는 Figma 앱에서 레이어를 선택한 상태로 Claude에게 요청하면 선택한 레이어 기반으로 컨텍스트를 제공한다는 장점이 있다. (출처: Figma Desktop server 공식 문서)

설치 이후: OAuth 인증 방법

설치 이후 아래와 같이 한 번의 인증이 필요하다. Personal Access Token(PAT) 없이 OAuth 방식으로 간단하게 처리된다.

Claude Code에서 /mcp 명령어를 입력한다.
목록에서 figma 항목을 선택한다.
Authenticate 버튼을 클릭한다.
브라우저가 자동으로 열리면 Figma 계정으로 로그인한다.
Allow Access 버튼을 클릭하면 인증이 완료된다.

⚠️ 인증 성공 후 이런 메시지가 뜰 수 있다

Authentication successful, but server reconnection failed.
You may need to manually restart Claude Code for the changes to take effect.

인증 자체는 성공한 것이므로 당황하지 않아도 된다. Claude Code를 완전히 종료했다가 다시 실행하면 /mcp에서 Figma가 connected 상태로 표시된다.

3. 주요 Tools 소개

Figma MCP가 제공하는 Tool들은 디자인 정보를 단계적으로 읽어오도록 설계되어 있다. (출처: Figma MCP Tools and prompts 공식 문서)

핵심 Tool 목록

Figma MCP는 총 13개의 Tool을 제공한다. 그 중 코드 생성 워크플로우에서 자주 쓰이는 핵심 Tool들을 먼저 살펴보자. (출처: Figma MCP Tools and prompts 공식 문서)

`get_design_context`

가장 핵심이 되는 Tool이다. 특정 노드(프레임, 컴포넌트, 레이어)의 상세 디자인 메타데이터를 가져온다. 컴포넌트 트리, 변수 바인딩, 레이아웃 제약, 스타일 정보가 포함된다.

이 Tool을 가장 먼저 호출해야 한다. URL 또는 노드 ID를 인자로 전달한다.

`get_screenshot`

특정 노드의 스크린샷 이미지를 가져온다. 레이어 ID, 이름, 타입, 위치, 크기 같은 기본 속성도 함께 반환된다.

get_design_context로 구조를 파악한 후, 시각적 참조가 필요할 때 함께 사용한다.

`get_metadata`

get_design_context의 응답이 너무 크거나 잘린 경우에 사용한다. 전체 파일의 고수준 노드 맵(노드 ID, 이름, 타입 목록)을 반환하며, 이후 필요한 노드만 선택적으로 get_design_context로 다시 가져올 수 있다.

`get_variable_defs`

선택한 Figma 노드에서 사용된 변수와 스타일(색상, 간격, 타이포그래피 등)을 반환한다. 디자인 토큰을 코드의 CSS 변수나 테마 설정으로 변환할 때 유용하다.

`get_code_connect_map`

Figma 노드 ID와 실제 코드베이스의 컴포넌트를 매핑한다. Code Connect가 설정된 경우, AI가 새로운 컴포넌트를 만들지 않고 기존 코드 컴포넌트를 재사용하도록 안내한다.

`create_design_system_rules`

AI가 디자인을 프론트엔드 코드로 변환할 때 참조할 규칙 파일을 생성한다. 디자인 시스템 일관성을 유지하는 데 도움을 준다.

전체 Tool 목록 (13개)

Tool명	설명	비고
`get_design_context`	노드의 상세 디자인 메타데이터 획득	핵심 Tool
`get_screenshot`	노드 스크린샷 이미지 획득
`get_metadata`	고수준 노드 맵(ID, 이름, 타입) 반환
`get_variable_defs`	디자인 변수/토큰 반환
`get_code_connect_map`	Figma 노드 ↔ 코드 컴포넌트 매핑 조회
`add_code_connect_map`	Figma 노드 ↔ 코드 컴포넌트 매핑 추가
`get_code_connect_suggestions`	Code Connect 매핑 후보 제안
`send_code_connect_mappings`	제안된 Code Connect 매핑 확정
`create_design_system_rules`	디자인→코드 변환 규칙 파일 생성
`get_figjam`	FigJam 다이어그램을 XML로 변환
`generate_diagram`	Mermaid 구문으로 FigJam 다이어그램 생성
`generate_figma_design`	웹앱 UI를 Figma 디자인 레이어로 역변환	원격 서버 전용
`whoami`	인증된 사용자 정보 반환 (플랜, 시트 포함)	원격 서버 전용

권장 Tool 호출 순서
1. get_design_context — 상세 메타데이터 획득
2. (응답이 너무 클 경우) get_metadata → 필요한 노드만 다시 get_design_context
3. get_screenshot — 시각적 참조 이미지 확보
4. 필요 시 get_variable_defs로 디자인 토큰 확인
5. 위 정보를 바탕으로 코드 생성 시작

`generate_figma_design` — 역방향 워크플로우의 핵심

지금까지 소개한 Tool들이 Figma → Code 방향이라면, generate_figma_design은 반대 방향이다. 이미 만들어진 웹 페이지(localhost 또는 외부 URL)를 Figma 편집 가능 레이어로 역변환한다. 단순 스크린샷이 아니라 컴포넌트 구조가 레이어로 분리된 편집 가능한 Figma 파일이 생성된다.

동작 방식:

generate_figma_design() 호출 → captureId 발행
브라우저가 열리거나 지정한 URL에서 캡처 스크립트 실행
폴링으로 캡처 완료 대기
Figma 파일 생성 (편집 가능한 레이어 구조)

outputMode 옵션:

newFile      → 새 Figma 파일로 생성 (기본값)
existingFile → 기존 Figma 파일에 추가
clipboard    → 클립보드에 복사 (Figma에서 직접 붙여넣기)

⚠️ Starter 플랜 주의: 캡처 1회 실행 시 whoami 1회 + generate_figma_design 약 3회 = 총 4회 Tool 호출 소모. 월 6회 한도의 대부분이 한 번의 캡처에 소진될 수 있다.

4. 활용 예시

어떻게 하면 예시를 통해 이 글의 이해도를 높일 수 있을까 고민했는데 내 실제 바이브 코딩용 사이트를 예시로 사용해볼까 고민 하였다. 이렇게 진행하다보니 정방향이 아닌 역방향 엔지니어링과 같이 처음부터 진행하는게 아닌 이미 있는 사이트를 다시 figma로 관리하는 것 같은 예시가 될수도 있을 것 같다.

ex) goddaehee.co.kr

실제 Next.js 프로젝트를 Figma로 역캡처한 뒤, 그 결과물로 Figma→Code 변환까지 실습하는 양방향 흐름을 따라가 보려고 한다. Hub 프로젝트(Next.js, ServiceCard 그리드, 카테고리 필터 기반)를 예시로 사용해보려 한다.

Figma URL에서 파일 키와 노드 ID 추출하기

Figma MCP에 URL을 전달할 때 구조를 이해하면 특정 노드를 정확히 지정할 수 있다. Figma URL의 형식은 다음과 같다.

# Figma URL 구조

https://www.figma.com/design/[파일키]/[파일명]?node-id=[노드ID]

예시:
https://www.figma.com/design/AbCdEfGhIjKl1234/MyDesign?node-id=1%3A234

파일 키: AbCdEfGhIjKl1234  ← /design/ 뒤의 값
노드 ID: 1:234             ← node-id= 뒤의 값 (%3A는 콜론 : 의 URL 인코딩)

노드 URL 복사 방법
Figma에서 특정 레이어나 프레임을 선택한 뒤 우클릭 → Copy/Paste as → Copy link를 누르면 해당 노드의 URL이 클립보드에 복사된다. 이 URL을 그대로 Claude에게 붙여넣으면 된다.

예시 1: 기존 웹앱을 Figma로 역캡처

먼저 이미 만들어진 Next.js 프로젝트를 Figma로 역캡처해보자. 개발 먼저 하고 Figma 자산을 나중에 정리하거나, 레거시 UI를 Figma로 옮기는 상황에 유용하다. 이 예시에서 생성된 Figma 파일이 이후 예시들의 기반이 된다.

사용자: 내 Next.js 프로젝트의 /hub 페이지를 Figma로 캡처해줘. 새 파일로 만들어줘.

Claude는 내부적으로 아래 순서로 Tool을 호출한다.

# 내부 Tool 호출 흐름

1. whoami()
   → 플랜 확인 (Starter/Professional), Tool 호출 한도 체크

2. generate_figma_design(outputMode: "newFile", fileName: "Hub-Design")
   → captureId 발행
   → 캡처 스크립트를 layout.tsx <head>에 임시 추가 요청

3. 브라우저에서 지정된 hash URL로 /hub 페이지 열기
   → 캡처 스크립트가 실행되어 DOM 구조 전송

4. generate_figma_design(captureId: "abc123...")  ← 폴링 (최대 수회)
   → 완료 시 Figma 파일 URL 반환

Claude 응답 (요약):

/hub 페이지를 Figma로 캡처했습니다. 아래 Figma 파일에서 확인하실 수 있습니다:

https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS

layout.tsx에 임시로 추가한 캡처 스크립트는 제거했습니다.

핵심 포인트: 단순 이미지가 아닌 편집 가능한 레이어
캡처 결과는 스크린샷 이미지가 아니다. Figma를 열면 ServiceCard 그리드, Badge, 카테고리 탭 등이 개별 레이어로 분리되어 편집 가능한 상태로 생성된다. 이 Figma 파일을 다시 get_design_context로 읽어 코드를 개선하거나, 디자이너에게 전달해 피드백을 받는 양방향 워크플로우가 가능해진다.

⚠️ Starter 플랜 호출 비용 분석
캡처 1회에 소모되는 Tool 호출 횟수:

whoami: 1회
generate_figma_design (captureId 발행 + 폴링): 약 3회
합계: 약 4회 → 월 6회 한도의 약 67% 소진

Starter 플랜에서 역캡처를 1~2회 이상 시도하면 한도를 초과할 수 있다. 적극적으로 활용할 계획이라면 유료 플랜이 필요하다.

ex) 생성 결과

이제 이 Figma 파일을 기반으로 나머지 예시들을 실습해보려 한다.

예시 2: Figma 프레임을 React 컴포넌트로 변환

방금 역캡처한 Hub Figma 파일을 기반으로, 특정 프레임을 React 컴포넌트로 변환해보자.

사용자: 이 Figma 프레임을 보고 React + Tailwind CSS 컴포넌트를 만들어줘:
https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS/Hub-Design?node-id=1%3A234

Pretendard 폰트를 사용하고, 기존 src/components/ 폴더의 Button 컴포넌트를 재사용해줘.

Claude 응답 (요약):

get_design_context로 node 1:234를 조회했습니다. Figma에서 읽어온 정보:

컴포넌트: Badge (pill 형태의 "NEW" 뱃지)
배경: #6366f1 (인디고), padding 12px/4px, 완전한 원형 border-radius
그림자: rgba(97,95,255,0.3) 이중 그림자
텍스트: Bold, 10px, uppercase, letter-spacing 0.5px, 흰색 — Noto Sans KR → Pretendard로 교체

src/components/Badge.tsx 파일을 생성했습니다:

// Claude가 생성한 코드 (src/components/Badge.tsx)

interface BadgeProps {
  label?: string;
}

export function Badge({ label = 'New' }: BadgeProps) {
  return (
    <div className="inline-flex items-center justify-center px-3 py-1 rounded-full
                    bg-[#6366f1] shadow-[0px_10px_15px_0px_rgba(97,95,255,0.3),
                    0px_4px_6px_0px_rgba(97,95,255,0.3)]">
      <span className="text-[10px] font-bold uppercase tracking-[0.5px]
                       leading-[15px] text-white whitespace-nowrap"
            style={{ fontFamily: "'Pretendard', sans-serif" }}>
        {label}
      </span>
    </div>
  );
}

ex) 실제 결과

Claude는 내부적으로 아래 순서로 Tool을 호출한다:

# 내부 Tool 호출 흐름

1. get_design_context({ nodeId: "1:234", fileKey: "qXsGdXcWtoumOjynB2NnRS" })
   → Tailwind 기반 참조 코드 + 스크린샷 동시 반환
   → 배경색, 그림자, 타이포그래피 메타데이터 포함
2. 프로젝트 스타일에 맞게 적응
   → Noto Sans KR → Pretendard 폰트 교체
   → data-node-id 속성 제거
   → props 인터페이스 추가 (label)

예시 3: 디자인 토큰을 CSS 변수로 추출

같은 Hub Figma 파일에서 디자인 토큰을 추출할 수도 있다.

사용자: 이 Figma 파일에서 사용된 색상 변수와 타이포그래피 스타일을 CSS 커스텀 프로퍼티(변수)로 변환해줘:
https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS/Hub-Design

ex)

Claude 응답 (요약):

get_variable_defs를 시도했으나 이 파일에는 Figma Variables가 정의되어 있지 않았습니다. 대신 get_design_context로 ServiceCard 노드를 분석하여 실제 사용된 색상과 타이포그래피를 추출했습니다:

텍스트 계열: #0f172b (제목), #62748e (설명), #1d293d (배지)
태그/배지 배경: #eef2ff, 텍스트: #4f39f6
카드 테두리: #e2e8f0, 이미지 플레이스홀더: #f1f5f9
타이포그래피: 제목 20px Bold / 설명 14px Regular (line-height 1.625) / 태그 10px Bold uppercase

/* Claude가 생성한 CSS 변수 (styles/tokens.css) — Hub 실제 디자인 기반 */

:root {
  /* Colors — ServiceCard에서 추출 */
  --color-text-primary:   #0f172b;   /* 카드 제목 */
  --color-text-secondary: #62748e;   /* 카드 설명 */
  --color-text-badge:     #1d293d;   /* ACTIVE 배지 텍스트 */
  --color-bg-card:        #ffffff;
  --color-border-card:    #e2e8f0;
  --color-bg-image:       #f1f5f9;   /* 이미지 플레이스홀더 */
  --color-bg-tag:         #eef2ff;   /* 카테고리 태그 배경 */
  --color-text-tag:       #4f39f6;   /* 카테고리 태그 텍스트 */

  /* Shadows */
  --shadow-card: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px rgba(0,0,0,0.1);

  /* Border Radius */
  --radius-card:  32px;
  --radius-image: 24px;
  --radius-tag:   9999px;  /* pill */

  /* Typography — Pretendard 적용 */
  --font-family-base: 'Pretendard', sans-serif;
  --font-size-title:  20px;
  --font-size-desc:   14px;
  --font-size-tag:    10px;
  --font-weight-bold:    700;
  --font-weight-regular: 400;
  --line-height-title: 1.4;    /* 28px / 20px */
  --line-height-desc:  1.625;  /* 22.75px / 14px */
  --letter-spacing-tag:   0.25px;
  --letter-spacing-badge: 0.5px;

  /* Spacing */
  --spacing-card-pad: 20px;
}

Figma Variables vs 코드 추출 차이
Figma에서 Variables(변수 컬렉션)를 미리 설정해두었다면 get_variable_defs로 한 번에 가져올 수 있다. 설정이 없는 파일이라면 이 예시처럼 get_design_context로 주요 컴포넌트를 분석하고 실제 사용된 값을 직접 추출하는 방식을 쓴다.

예시 4: 반응형 레이아웃 구현

Hub 파일에 데스크탑 프레임만 있을 때 — Claude가 그리드 구조를 분석해 반응형 코드를 추론하는 과정을 살펴보자.

사용자: 데스크탑 버전:
https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS/Hub-Design?node-id=1%3A100

모바일 버전:
https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS/Hub-Design?node-id=1%3A200

두 프레임을 보고 반응형 CSS Grid 레이아웃을 만들어줘. breakpoint는 768px을 기준으로 해줘.

ex) 지금 부터는 limit에 걸렸는데 이 내용도 남겨두려고 한다.

Claude 응답 (실제 상황):

node 1:100을 조회했습니다. 단, 두 가지 사항을 확인했습니다:

node 1:100은 "2048 게임" ServiceCard 컴포넌트 (276×366px) — 별도 데스크탑 레이아웃 프레임이 아닙니다
node 1:200은 MCP 호출 한도 초과 (Starter 플랜 제한)로 조회 불가했습니다
Hub 파일에는 모바일 전용 프레임이 없습니다 — 데스크탑 4컬럼 그리드 하나뿐입니다

대신 get_metadata로 파악한 그리드 구조에서 반응형 레이아웃을 추론했습니다: 카드 4개 (각 276px), x 좌표 간격 308px → gap 32px, 컨테이너 1200px.

/* metadata 분석으로 추론한 반응형 그리드 (styles/hub-grid.css) */

.service-grid {
  display: grid;
  /* 데스크탑: Figma 측정값 — 카드 276px, gap 32px, 4컬럼 */
  grid-template-columns: repeat(4, 276px);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 768px ~ 1200px: 2컬럼 (모바일 프레임 없어 구조에서 추론) */
@media (max-width: 1200px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 24px;
  }
}

/* 768px 이하: 1컬럼 */
@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
}

모바일 프레임이 없을 때 팁
Figma 파일에 모바일 전용 프레임이 없어도 Claude는 데스크탑 레이아웃의 컴포넌트 크기와 간격을 분석해 반응형 코드를 추론할 수 있다. 단, MCP 플랜에 따라 호출 횟수 제한이 있으므로 복잡한 파일은 핵심 노드를 선별해서 조회하는 것이 좋다.

예시 5: 복잡한 디자인 — 응답이 잘리는 경우 대처

Hub처럼 레이어가 많은 페이지에서는 응답이 잘릴 수 있다.

사용자: 이 Figma 페이지 전체를 React 컴포넌트로 만들어줘:
https://www.figma.com/design/qXsGdXcWtoumOjynB2NnRS/Hub-Design?node-id=0%3A1

Claude 응답 (요약):

get_design_context 응답이 너무 커서 일부가 잘렸습니다. get_metadata로 전체 구조를 먼저 파악하겠습니다.

파일 내 주요 노드 목록:

1:100 — Header (Frame)
1:200 — Sidebar (Frame)
1:300 — MainContent (Frame)
1:400 — Footer (Frame)

각 섹션을 순서대로 get_design_context로 가져와서 개별 컴포넌트로 구현하겠습니다. Header부터 시작할까요?

복잡한 디자인 대처 팁
페이지 전체를 한 번에 요청하면 응답이 잘리거나 정확도가 떨어질 수 있다. 대신 Figma에서 섹션별(Header, Content, Footer)로 프레임을 나누고, 각 프레임의 URL을 따로 전달하는 것이 효과적이다. Claude가 get_metadata로 자동 분류해주기도 한다.

예시 6: 디자인 시스템 규칙 자동 생성

캡처된 Hub Figma 파일을 기반으로 디자인 시스템 규칙도 자동 생성할 수 있다.

사용자: 우리 Figma 디자인 시스템을 기반으로 AI 코드 생성 규칙 파일을 만들어줘. 프레임워크는 React + Tailwind이고, 기존 컴포넌트 라이브러리는 src/components/ui/ 아래에 있어.

Claude 응답 (요약):

create_design_system_rules를 호출하여 .claude/rules/figma-design-system.md 파일을 생성했습니다. 이 파일에는 다음 규칙이 포함됩니다:

색상은 Tailwind 커스텀 테마(--color-primary 등)를 사용할 것
Button, Input, Card 등은 src/components/ui/의 기존 컴포넌트를 재사용
간격은 Tailwind 유틸리티 클래스(p-4, gap-6 등)로 변환

이후 Figma 프레임을 변환할 때 이 규칙이 자동으로 참조됩니다.

5. Figma MCP vs 대안 방법 비교

Figma 디자인 정보를 코드에 활용하는 방법은 MCP 외에도 여러 가지가 있다. 각 방법의 특성을 비교해보자. (출처: Figma Guide to the MCP server)

Figma MCP vs Figma Dev Mode

구분	Figma MCP	Figma Dev Mode
코드 생성	AI가 컨텍스트를 읽고 실제 코드 생성	수치 확인 후 개발자가 직접 코딩
기존 코드 통합	코드베이스와 연동해 기존 컴포넌트 재사용 가능	독립적인 코드 스니펫만 제공
워크플로우	Claude Code 안에서 전체 구현까지 완결	Figma 앱 ↔ 에디터 왔다갔다 필요
반복 작업	"수정된 디자인 반영해줘"로 즉시 업데이트	변경사항마다 수동으로 수치 재확인 필요
플랜 요구사항	원격 서버: 모든 플랜 (무료 포함, 단 월 6회 제한)	Dev 또는 Full 시트 (유료)

Figma MCP와 Dev Mode는 대체 관계가 아니다
Dev Mode는 정확한 수치 확인, 레이어 검색, Handoff 주석 확인 등에 여전히 유용하다. Figma MCP는 "AI가 디자인을 읽고 코드를 생성하는" 자동화 워크플로우에서 진가를 발휘한다. 둘을 함께 사용하면 더 효율적이다.

Figma REST API 직접 사용

MCP 없이 Figma REST API를 직접 호출해서 디자인 정보를 가져오는 것도 가능하다. 자동화 스크립트나 CI/CD 파이프라인에서 유용하다. (출처: Figma REST API 공식 문서)

# Figma REST API로 파일 정보 가져오기 (Personal Access Token 사용)

# 파일 전체 정보 조회
curl -H "X-Figma-Token: YOUR_PERSONAL_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/FILE_KEY"

# 특정 노드만 조회
curl -H "X-Figma-Token: YOUR_PERSONAL_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/FILE_KEY/nodes?ids=1:234,1:567"

# 이미지(PNG/SVG) 내보내기
curl -H "X-Figma-Token: YOUR_PERSONAL_ACCESS_TOKEN" \
  "https://api.figma.com/v1/images/FILE_KEY?ids=1:234&format=svg"

REST API vs MCP 인증 방식 차이
Figma REST API는 Personal Access Token(PAT)을 사용한다. 반면 Figma MCP 원격 서버는 OAuth만 지원한다. PAT는 Figma 계정 설정에서 발급할 수 있으며, 서버 사이드 자동화에 적합하다.

세 가지 방법 종합 비교

방법	특징	인증	추천 상황
Figma MCP	자연어로 디자인 분석 및 코드 변환, AI 코딩 보조	OAuth	Claude Code와 연동한 AI 코딩 워크플로우
Figma REST API	완전한 프로그래밍 제어, 모든 파일 데이터 접근	PAT	자동화 스크립트, CI/CD, 디자인 토큰 동기화
Figma Dev Mode	브라우저에서 즉시 수치 확인, 코드 스니펫 복사	Figma 로그인	빠른 단발성 수치 확인, 레이어 검색, Handoff

6. 주의사항 및 트러블슈팅

트러블슈팅 1: 인증 오류 (401 Unauthorized)

문제: Figma MCP 연결 시 401 오류가 발생한다.
원인: OAuth 인증이 만료되었거나, 초기 인증을 완료하지 않은 경우
해결: Claude Code에서 /mcp를 입력하고 Figma 항목을 선택해 다시 Authenticate를 진행한다. Figma MCP는 PAT(Personal Access Token) 인증을 지원하지 않으며 OAuth만 사용한다. (출처: Figma Forum)

트러블슈팅 2: Tool 호출 한도 초과 (Starter 플랜)

문제: "Tool call limit exceeded" 오류가 발생한다.
원인: Figma Starter 플랜 또는 View/Collab 시트는 월 6회 Tool 호출로 제한된다.
해결: 유료 플랜으로 업그레이드하거나, 한 번의 요청에서 최대한 많은 정보를 가져오도록 프롬프트를 최적화한다.

트러블슈팅 3: 응답이 너무 크거나 잘리는 경우

문제: get_design_context 응답이 너무 크거나 잘린다.
원인: 프레임이 너무 복잡하거나 레이어가 많은 경우
해결: get_metadata로 고수준 노드 맵을 먼저 가져온 뒤, 필요한 노드만 선택해서 get_design_context를 다시 호출한다. 또는 특정 서브 노드의 URL이나 ID를 직접 지정해 범위를 좁혀서 요청한다.

주의사항

파일 접근 권한: Figma MCP는 OAuth로 로그인한 계정의 기존 Figma 권한을 그대로 사용한다. 즉, 내 계정으로 열람 가능한 파일(비공개 파일 포함)은 MCP에서도 접근 가능하다. 반대로 권한이 없는 파일은 접근이 차단된다. 인증 계정 확인은 whoami Tool로 할 수 있다.
Code Connect: get_code_connect_map이 효과적으로 작동하려면 Figma Code Connect 설정이 필요하다. 설정이 없으면 AI가 기존 컴포넌트를 찾지 못하고 새로 생성할 수 있다.
생성 코드 검증: AI가 생성한 코드는 반드시 검토가 필요하다. 특히 복잡한 인터랙션이나 애니메이션은 정확하지 않을 수 있다.
클라이언트 제한: 2026년 기준 Figma MCP 원격 서버는 지원하는 클라이언트(Claude Code, Cursor, VS Code 등)가 제한적이다. 커스텀 클라이언트에서는 OAuth 스코프 관련 이슈가 있을 수 있다.

트러블슈팅 4: `generate_figma_design` — 캡처 스크립트 관련 문제

문제 1: 페이지가 캡처되지 않는다
원인: generate_figma_design은 브라우저에서 캡처 스크립트가 실행되어야 한다. Next.js 프로젝트의 경우 layout.tsx <head> 안에 Claude가 임시 스크립트 태그를 추가하도록 요청해야 한다.
해결: Claude에게 "캡처 스크립트를 layout.tsx에 추가해줘"라고 명시적으로 요청하거나, Claude가 자동으로 수정 제안을 할 때 승인한다. 캡처 완료 후 반드시 스크립트를 제거한다.

문제 2: 개발 서버 포트 충돌
원인: dev 서버가 이미 다른 포트에서 실행 중인 경우
해결: lsof -i :3000 또는 lsof -i :3001로 실행 중인 프로세스를 확인하고, 빈 포트에서 서버를 시작한다.

문제 3: 캡처 후 스크립트 제거를 잊은 경우
원인: 캡처 과정에서 임시로 추가된 스크립트가 프로덕션 빌드에 포함될 수 있다.
해결: 캡처 완료 후 layout.tsx에서 캡처 스크립트 태그를 즉시 제거한다. Claude에게 "캡처 스크립트 제거해줘"라고 요청하면 자동으로 처리해준다. 배포 전 git diff로 잔여 스크립트 여부를 확인하는 것을 권장한다.

7. 개발자 커뮤니티 반응 (2026년 초 기준)

2026년 초 기준으로 Figma MCP에 대한 개발자 피드백은 "유용하지만 만능은 아니다"로 요약된다.

긍정적 반응

디자인 시스템이 잘 갖춰진 팀에서는 초기 개발 시간을 50~70% 단축할 수 있다는 평가가 있다.
"Figma를 완벽하게 읽고 매우 빠르게 작업하는 주니어 개발자"에 비유되며, 반복적인 레이아웃 스캐폴딩에 효과적이라는 의견이 많다.

실무 한계 지적

AI 도구 출력의 정확성을 불신하는 개발자(46%)가 신뢰하는 개발자(33%)보다 많다는 조사 결과가 있다. 생성된 코드의 리뷰는 필수라는 점이 강조되고 있다.
Figma MCP의 Rate Limit이 공격적이라는 피드백이 있으며, MCP 서버 주변의 개발자 경험(서버 상태 확인, 실패 원인 파악 등)이 아직 미성숙하다는 의견도 있다.

(참고: AIMultiple - Figma MCP Server Tested 2026, Vadim's Blog - Pixel-Perfect UI with Figma MCP, LogRocket - How to Structure Figma Files for MCP)

8. 결론

Figma MCP는 디자인과 코드 사이의 간극을 줄여주는 도구다. 스크린샷을 보여주며 "이렇게 만들어줘"라고 하는 것보다, 실제 디자인 메타데이터를 AI가 직접 읽어서 처리하기 때문에 훨씬 정확한 결과물을 얻을 수 있다.

특히 디자인 시스템이 잘 갖춰진 팀이라면 get_code_connect_map과 get_variable_defs를 적극 활용하면 기존 컴포넌트를 재사용하면서 일관성 있는 코드를 빠르게 생성할 수 있다.

이런 분께 추천한다:

Figma 디자인을 React/Vue 등 코드로 자주 변환해야 하는 프론트엔드 개발자
디자이너와의 Handoff 비용을 줄이고 싶은 팀
디자인 토큰을 코드베이스에 자동으로 동기화하고 싶은 분
픽셀 퍼펙트 구현이 중요한 프로젝트를 진행 중인 개발자
코드를 먼저 개발하고 나중에 Figma 자산을 정리하고 싶은 분 — generate_figma_design으로 역캡처 가능

양방향 워크플로우로 활용하기

"Figma 없이 개발부터 시작했는데 이제 디자인 문서가 필요하다"는 상황에서도 Figma MCP가 해답이 될 수 있다. generate_figma_design으로 기존 웹앱을 Figma로 역캡처한 뒤, 해당 Figma 파일을 다시 get_design_context로 읽어 코드를 개선하는 선순환 구조가 가능하다.

Code → Figma → Code 방향으로 프로젝트 전반의 디자인 일관성을 유지할 수 있다.

시작은 간단하다. claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp 한 줄로 설치하고, Figma 프레임 URL을 Claude에 붙여넣어 보자.

참고 자료

저작자표시 비영리 변경금지 (새창열림)

'AI > MCP(2026) vs CLI' 카테고리의 다른 글

개발자를 위한 MCP 추천(5-2) - Supabase CLI와 MCP 비교 분석 해보기 (0)	2026.03.18
개발자를 위한 MCP 추천(5-1) - Supabase MCP 설치 및 사용방법 : 자연어로 PostgreSQL을 다루는 법, AI가 데이터베이스를 직접 설계 (2)	2026.03.16
개발자를 위한 MCP 추천(3-2) - Playwright CLI와 MCP 비교 분석 해보기 (0)	2026.03.06
개발자를 위한 MCP 추천(3-1) - Playwright MCP 설치 및 사용방법 : 자연어로 브라우저를 조종한다, 코드 없이 웹 자동화 (1)	2026.03.06
개발자를 위한 MCP 추천(2) - GitHub MCP 설치 및 사용방법 : 자연어로 GitHub를 조작하는 법, 개발 워크플로우 자동화하기 (0)	2026.03.06

Contents

개발자를 위한 MCP 추천(4) - Figma MCP 설치 및 사용방법 : 자연어로 Figma를 조작하는 법, Figma 디자인을 코드로 자동 변환

"MCP가 죽었다"말도 나오는데, 그래도 현시점 쓸만한 MCP 10개

목차

1. Figma MCP란?

2. 설치 방법

방법 1: Claude Code 대화형 설치 — 원격 서버 (권장)

방법 2: Claude Code settings.json 직접 설정 — 원격 서버

방법 3: Claude Desktop 설정 — 원격 서버

데스크탑 서버 사용 방법 (로컬)

설치 이후: OAuth 인증 방법

3. 주요 Tools 소개

핵심 Tool 목록

get_design_context

get_screenshot

get_metadata

get_variable_defs

get_code_connect_map

create_design_system_rules

전체 Tool 목록 (13개)

generate_figma_design — 역방향 워크플로우의 핵심

4. 활용 예시

Figma URL에서 파일 키와 노드 ID 추출하기

예시 1: 기존 웹앱을 Figma로 역캡처

예시 2: Figma 프레임을 React 컴포넌트로 변환

예시 3: 디자인 토큰을 CSS 변수로 추출

예시 4: 반응형 레이아웃 구현

예시 5: 복잡한 디자인 — 응답이 잘리는 경우 대처

예시 6: 디자인 시스템 규칙 자동 생성

5. Figma MCP vs 대안 방법 비교

Figma MCP vs Figma Dev Mode

Figma REST API 직접 사용

세 가지 방법 종합 비교

6. 주의사항 및 트러블슈팅

트러블슈팅 1: 인증 오류 (401 Unauthorized)

트러블슈팅 2: Tool 호출 한도 초과 (Starter 플랜)

트러블슈팅 3: 응답이 너무 크거나 잘리는 경우

주의사항

트러블슈팅 4: generate_figma_design — 캡처 스크립트 관련 문제

7. 개발자 커뮤니티 반응 (2026년 초 기준)

8. 결론

'AI > MCP(2026) vs CLI' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바

`get_design_context`

`get_screenshot`

`get_metadata`

`get_variable_defs`

`get_code_connect_map`

`create_design_system_rules`

`generate_figma_design` — 역방향 워크플로우의 핵심

트러블슈팅 4: `generate_figma_design` — 캡처 스크립트 관련 문제