Figma MCP Server + Claude Code/Cursor 연동: 디자인 URL 하나로 React 컴포넌트 만들기

디자이너가 Figma 링크를 Slack에 던져주면, 그때부터 개발자의 손이 바빠지죠. 브라우저 탭 열고, 스펙 읽고, 색상값 복사하고, 레이아웃 구조 파악하고... 솔직히 이 과정이 꽤 번거롭습니다. 그래서 AI한테 이걸 시키고 싶다는 생각, 다들 한 번쯤 해보셨을 겁니다. Figma 스크린샷을 Claude나 ChatGPT에 붙여넣고 "이거 React로 짜줘" 해본 경험도 있을 테고요. 저도 그렇게 많이 시도해봤는데, 생성된 코드가 팀에서 실제로 쓰는 컴포넌트와 동떨어진 경우가 너무 많았습니다.

Figma MCP Server는 그 접근 방식 자체를 바꿉니다. 이미지 대신 구조화된 설계 데이터를 AI 에이전트에게 직접 공급해서, Claude Code나 Cursor가 Figma URL 하나로 팀의 실제 코드베이스와 맞는 프로덕션 코드를 생성할 수 있게 됩니다. 이 글을 다 읽고 나면 오늘 안에 기존 프로젝트에 MCP Server를 연결해볼 수 있습니다. 연결 구조가 어떻게 동작하는지, 실제 워크플로는 어떻게 생겼는지, 그리고 도입 전에 반드시 알아야 할 현실적인 제약들을 함께 살펴보겠습니다.

이 글의 대상 독자: React와 TypeScript를 사용하는 프런트엔드 개발자, 또는 디자인 시스템을 운영하는 팀. 시작 전 체크: Figma Professional 이상 계정, 프런트엔드 코드베이스 접근 권한이 있어야 합니다.

핵심 개념

MCP: AI 에이전트의 USB 포트

**Model Context Protocol(MCP)**은 Anthropic이 2024년 11월 오픈 스탠다드로 공개한 프로토콜입니다. USB 포트처럼, MCP를 지원하는 AI 에이전트라면 MCP를 지원하는 어떤 서버에도 꽂을 수 있습니다. 2025년 3월에 OpenAI도 공식 채택하면서 Cursor, Claude Code, VS Code Copilot, Windsurf 등 주요 AI IDE에서 공용 인터페이스로 자리잡았습니다.

Figma MCP Server는 이 프로토콜을 통해 Figma REST API의 원시 데이터를 LLM이 소화할 수 있는 형태로 변환해서 에이전트에 넘겨줍니다. 스크린샷에는 담기지 않는 정보들—레이아웃이 Flexbox인지 Grid인지, 간격이 8px인지 12px인지, 어떤 디자인 토큰이 적용됐는지—이 모두 구조화된 데이터로 AI에게 전달됩니다.

Code Connect: "우리 팀 Button 써줘"를 가능하게 하는 레이어

저도 처음엔 MCP Server만 연결하면 다 해결될 줄 알았는데, 그렇지 않았습니다. MCP Server 연결만으로는 레이아웃 정보는 잘 오지만, 팀이 실제로 쓰는 컴포넌트가 아닌 제네릭 <div> 코드가 나옵니다.

Code Connect: Figma 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 매핑 레이어. 이 설정이 있으면 AI가 <div className="bg-blue-500"> 대신 import { Button } from '@/components/ui/button'처럼 팀이 실제로 쓰는 코드를 생성합니다.

서버 구성 방식: Remote vs Desktop

구분	Remote MCP Server	Desktop MCP Server
인증	OAuth 기반	Figma 데스크탑 앱 경유
접근 방식	인터넷 경유 (SSE)	로컬 (`http://127.0.0.1:3845/mcp`)
권장 대상	대부분의 팀	기업·조직 내부망 환경
보안 특성	설계 데이터가 외부 서버를 거침	네트워크 격리, 데이터 외부 전송 없음

기업 환경에서 Desktop 서버를 권장하는 실질적인 이유가 있습니다. Remote 서버는 SSE(Server-Sent Events) 기반으로 Figma 클라우드를 거치는 반면, Desktop 서버는 로컬에서만 동작해 내부망 정책을 위반하지 않고 설계 데이터 외부 유출 우려도 없습니다. 보안 정책이 엄격한 환경이라면 Desktop 서버를 검토해보시면 좋습니다.

실전 적용

예시 1: Claude Code에서 Figma 디자인을 React 컴포넌트로

Claude Code에 Figma MCP를 연결하는 공식 방법은 claude mcp add 명령어 또는 설정 파일 직접 편집 방식입니다. 정확한 최신 명령어는 공식 Figma 도움말에서 확인하시는 것을 권장합니다—명령어 형식이 버전마다 조금씩 달라질 수 있어서, 공식 문서를 직접 참조하는 게 가장 안전합니다.

MCP 연결 후 워크플로는 이렇게 흘러갑니다.

1. Figma에서 구현할 프레임(또는 컴포넌트) 선택
2. 우클릭 → "Copy link to selection"으로 URL 복사
3. Claude Code 채팅창에 URL 붙여넣기
4. 프롬프트 입력

실제로 이렇게 입력해볼 수 있습니다:

https://www.figma.com/file/xxxx/Design?node-id=123%3A456
 
이 디자인을 React + Tailwind로 구현해줘.
우리 프로젝트의 Button, Card, Typography 컴포넌트를 재사용해줘.

백그라운드에서는 MCP Server가 get_design_context, get_variable_defs, get_image 툴을 자동 호출해 Claude Code에 컨텍스트를 공급합니다.

생성 결과물의 차이를 보면 이렇습니다:

방식	생성 코드 예시
스크린샷 기반	`<div className="bg-blue-500 p-4 rounded-lg">버튼</div>`
MCP만 연결	`<button class="bg-blue-500 p-4 rounded-lg text-white">버튼</button>`
MCP + Code Connect	`<Button variant="primary" size="md">버튼</Button>`

중간 단계 예시를 함께 보면 알 수 있듯이, MCP만 연결해도 레이아웃 정확도는 올라가지만 팀 컴포넌트와의 통합은 Code Connect까지 있어야 완성됩니다.

예시 2: Cursor에서 MCP 연결 설정

Cursor는 .cursor/mcp.json 파일로 MCP 서버를 관리합니다. 프로젝트 루트 또는 ~/.cursor/ 경로에 파일을 추가하면 됩니다.

json

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/v1/sse",
      "headers": {
        "Authorization": "Bearer YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    }
  }
}

Figma Personal Access Token은 Figma 계정 설정 → Security → Personal access tokens에서 발급받을 수 있습니다. Cursor를 재시작하면 Composer Agent 모드에서 MCP 도구가 자동 활성화됩니다.

Cursor에서는 @figma 멘션으로 MCP 도구를 명시적으로 호출할 수 있습니다. 이 @figma 멘션 문법은 Cursor 전용입니다—Claude Code에서는 URL을 그냥 채팅에 붙여넣는 방식을 사용합니다.

@figma https://www.figma.com/file/xxxx?node-id=789
 
이 카드 컴포넌트를 Next.js + Tailwind로 만들어줘.
반응형이어야 하고, 모바일 breakpoint는 디자인에 있는 모바일 프레임 참고해줘.

예시 3: Code Connect 설정으로 디자인 시스템 연결

이게 실제로 가장 효과가 큰 부분입니다. Code Connect는 별도 설정 파일로 관리하며, Figma의 Button 컴포넌트가 코드베이스의 어떤 컴포넌트인지 알려주는 방식입니다.

typescript

// figma.config.ts
import figma from '@figma/code-connect';
import { Button } from '@/components/ui/button';
 
figma.connect('https://www.figma.com/file/xxxx?node-id=Button', {
  component: Button,
  imports: ["import { Button } from '@/components/ui/button'"],
  props: {
    variant: figma.enum('Variant', {
      primary: 'primary',
      secondary: 'secondary',
      destructive: 'destructive',
    }),
    size: figma.enum('Size', {
      sm: 'sm',
      md: 'md',
      lg: 'lg',
    }),
    disabled: figma.boolean('Disabled'),
    children: figma.string('Label'),
  },
  example: ({ variant, size, disabled, children }) => (
    <Button variant={variant} size={size} disabled={disabled}>
      {children}
    </Button>
  ),
});

이 설정이 있으면 AI가 Figma에서 Button 컴포넌트를 만났을 때 올바른 임포트 경로와 prop 인터페이스를 자동으로 활용합니다. 컴포넌트 하나씩 매핑할 때마다 생성 코드 품질이 눈에 띄게 달라지는 걸 느낄 수 있습니다.

예시 4: Code → Figma 역방향 변환 (별도 기능)

Figma 블로그에서 소개된 기능으로, 프로덕션 코드를 Figma 레이어로 역변환하는 흐름도 존재합니다. 다만 이건 Figma MCP Server 자체가 아니라, "Claude Code to Figma" 별도 제품 흐름입니다—둘을 혼동하면 막상 따라 해봤을 때 동작하지 않아서 당황할 수 있습니다.

이 기능은 code-first 팀이 구현 결과물을 디자이너와 공유하거나 디자인 산출물을 사후 생성할 때 유용하게 쓰일 수 있으며, 정확한 설정 방법은 Figma 공식 블로그 포스트를 참조하시는 것을 권장합니다.

장단점 분석

장점

항목	내용
구조적 설계 이해	픽셀 이미지 대신 노드 트리·레이아웃 제약·디자인 토큰을 AI가 직접 받아 코드 정확도가 향상됩니다
코드 일관성	Code Connect 적용 시 팀의 실제 컴포넌트 임포트 경로와 prop 인터페이스가 자동 반영됩니다
반복 속도	초기 설정 이후 디자인-코드 반복 속도가 빨라진다는 보고가 있습니다 (팀 규모와 디자인 시스템 성숙도에 따라 차이가 큽니다)
양방향 지원	Figma → 코드, 코드 → Figma 양방향 흐름을 모두 지원합니다
표준 기반	W3C DTCG 1.0 기반 디자인 토큰으로 장기적 유지보수가 용이합니다

단점 및 주의사항

항목	내용	대응 방안
요금제 제약	무료 플랜은 월 6회 API 호출 제한으로 실무 사용이 어렵습니다	Professional($15/월) 이상을 진입점으로 보시면 됩니다
초기 셋업 비용	Code Connect 구성, 디자인 토큰 정리, 컴포넌트 매핑에 상당한 시간이 필요합니다	핵심 컴포넌트 10개부터 시작해 점진적으로 넓혀가는 것을 권장합니다
디자인 시스템 전제	Code Connect의 효과를 보려면 Figma 파일 구조와 컴포넌트 라이브러리가 어느 정도 정리돼 있어야 합니다	디자인 시스템이 없는 상태라면 MCP 단독 연결로 가치를 먼저 확인해보시면 좋습니다
생성 코드 품질 한계	복잡한 인터랙션, 접근성(aria 속성, 키보드 내비게이션), 에러 상태는 Figma에 표현되지 않아 수동 보완이 필요합니다	생성 코드를 초안으로 보고 반드시 개발자 검토 후 사용하는 것이 좋습니다
보안 고려사항	MCP 프로토콜의 tool poisoning, cross-server tool shadowing 등 취약점이 존재합니다	신뢰할 수 있는 공식 서버만 연결하고, 기업 환경 도입 시 별도 보안 검토를 권장합니다

Tool Poisoning: 악의적인 MCP 서버가 AI 에이전트에게 잘못된 도구 설명을 제공해 의도치 않은 동작을 유발하는 공격 유형. 공식 Figma MCP 서버 외에 서드파티 서버를 연결할 때는 특히 주의가 필요합니다.

실무에서 가장 흔한 실수

Code Connect 없이 MCP만 연결하고 결과가 실망스럽다고 판단하는 경우 — MCP Server 단독으로는 레이아웃 정보는 잘 오지만 팀 컴포넌트가 반영되지 않습니다. 제네릭 HTML/CSS가 나온다면 Code Connect 설정이 빠진 것입니다.
Figma 파일 레이어 이름이 정리되지 않은 채로 MCP를 붙이는 경우 — AI가 해석하는 건 Figma의 레이어 구조 그대로입니다. Frame 1234, Rectangle copy 3 같은 이름이 수두룩하면 생성 코드 품질이 크게 떨어집니다. MCP 도입 전에 Figma 파일 정리를 먼저 하시면 효과가 확연히 달라집니다.
생성 코드를 검토 없이 바로 머지하는 경우 — 반복 속도가 빨라진다는 것이 검토를 생략해도 된다는 뜻은 아닙니다. 특히 접근성과 에러 상태처럼 Figma에 표현되지 않는 부분은 반드시 수동으로 보완하시는 것이 좋습니다.

마치며

이 도구의 진짜 가치는 "빠른 코드 생성" 자체보다, Figma 파일 구조 정리와 Code Connect 설정에 투자한 만큼 결과물 품질이 올라가는 구조에 있습니다. 디자인 시스템을 AI가 이해할 수 있는 형태로 유지하는 것 자체가 팀의 새로운 역량이 되는 방향입니다.

저라면 이 순서로 시작하겠습니다:

Figma 파일의 레이어 이름을 점검합니다 — Frame 1, Rectangle copy 같은 자동 생성 이름을 의미 있는 이름으로 바꾸는 것부터 시작하면 됩니다.
공식 문서를 참조해 Claude Code 또는 Cursor에 MCP 서버를 연결합니다 — 기존 프로젝트의 작은 컴포넌트 하나를 Figma URL로 재생성해보면 현재 설정의 간극이 바로 보입니다.
Button, Input, Card 세 개에 Code Connect 설정을 추가합니다 — 핵심 컴포넌트 세 개만 매핑해도 생성 코드 품질이 얼마나 달라지는지 바로 체감할 수 있습니다.

참고 자료

Figma MCP Server + Claude Code/Cursor 연동: 디자인 URL 하나로 React 컴포넌트 만들기 | DEV BAK - 기술블로그

Figma MCP Server + Claude Code/Cursor 연동: 디자인 URL 하나로 React 컴포넌트 만들기

이 글의 대상 독자: React와 TypeScript를 사용하는 프런트엔드 개발자, 또는 디자인 시스템을 운영하는 팀. 시작 전 체크: Figma Professional 이상 계정, 프런트엔드 코드베이스 접근 권한이 있어야 합니다.

핵심 개념

MCP: AI 에이전트의 USB 포트

Code Connect: "우리 팀 Button 써줘"를 가능하게 하는 레이어

Code Connect: Figma 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 매핑 레이어. 이 설정이 있으면 AI가 <div className="bg-blue-500"> 대신 import { Button } from '@/components/ui/button'처럼 팀이 실제로 쓰는 코드를 생성합니다.

서버 구성 방식: Remote vs Desktop

구분	Remote MCP Server	Desktop MCP Server
인증	OAuth 기반	Figma 데스크탑 앱 경유
접근 방식	인터넷 경유 (SSE)	로컬 (`http://127.0.0.1:3845/mcp`)
권장 대상	대부분의 팀	기업·조직 내부망 환경
보안 특성	설계 데이터가 외부 서버를 거침	네트워크 격리, 데이터 외부 전송 없음

실전 적용

예시 1: Claude Code에서 Figma 디자인을 React 컴포넌트로

MCP 연결 후 워크플로는 이렇게 흘러갑니다.

1. Figma에서 구현할 프레임(또는 컴포넌트) 선택
2. 우클릭 → "Copy link to selection"으로 URL 복사
3. Claude Code 채팅창에 URL 붙여넣기
4. 프롬프트 입력

실제로 이렇게 입력해볼 수 있습니다:

https://www.figma.com/file/xxxx/Design?node-id=123%3A456
 
이 디자인을 React + Tailwind로 구현해줘.
우리 프로젝트의 Button, Card, Typography 컴포넌트를 재사용해줘.

백그라운드에서는 MCP Server가 get_design_context, get_variable_defs, get_image 툴을 자동 호출해 Claude Code에 컨텍스트를 공급합니다.

생성 결과물의 차이를 보면 이렇습니다:

방식	생성 코드 예시
스크린샷 기반	`<div className="bg-blue-500 p-4 rounded-lg">버튼</div>`
MCP만 연결	`<button class="bg-blue-500 p-4 rounded-lg text-white">버튼</button>`
MCP + Code Connect	`<Button variant="primary" size="md">버튼</Button>`

중간 단계 예시를 함께 보면 알 수 있듯이, MCP만 연결해도 레이아웃 정확도는 올라가지만 팀 컴포넌트와의 통합은 Code Connect까지 있어야 완성됩니다.

예시 2: Cursor에서 MCP 연결 설정

Cursor는 .cursor/mcp.json 파일로 MCP 서버를 관리합니다. 프로젝트 루트 또는 ~/.cursor/ 경로에 파일을 추가하면 됩니다.

json

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/v1/sse",
      "headers": {
        "Authorization": "Bearer YOUR_FIGMA_PERSONAL_ACCESS_TOKEN"
      }
    }
  }
}

@figma https://www.figma.com/file/xxxx?node-id=789
 
이 카드 컴포넌트를 Next.js + Tailwind로 만들어줘.
반응형이어야 하고, 모바일 breakpoint는 디자인에 있는 모바일 프레임 참고해줘.

예시 3: Code Connect 설정으로 디자인 시스템 연결

typescript

// figma.config.ts
import figma from '@figma/code-connect';
import { Button } from '@/components/ui/button';
 
figma.connect('https://www.figma.com/file/xxxx?node-id=Button', {
  component: Button,
  imports: ["import { Button } from '@/components/ui/button'"],
  props: {
    variant: figma.enum('Variant', {
      primary: 'primary',
      secondary: 'secondary',
      destructive: 'destructive',
    }),
    size: figma.enum('Size', {
      sm: 'sm',
      md: 'md',
      lg: 'lg',
    }),
    disabled: figma.boolean('Disabled'),
    children: figma.string('Label'),
  },
  example: ({ variant, size, disabled, children }) => (
    <Button variant={variant} size={size} disabled={disabled}>
      {children}
    </Button>
  ),
});

예시 4: Code → Figma 역방향 변환 (별도 기능)

장단점 분석

장점

항목	내용
구조적 설계 이해	픽셀 이미지 대신 노드 트리·레이아웃 제약·디자인 토큰을 AI가 직접 받아 코드 정확도가 향상됩니다
코드 일관성	Code Connect 적용 시 팀의 실제 컴포넌트 임포트 경로와 prop 인터페이스가 자동 반영됩니다
반복 속도	초기 설정 이후 디자인-코드 반복 속도가 빨라진다는 보고가 있습니다 (팀 규모와 디자인 시스템 성숙도에 따라 차이가 큽니다)
양방향 지원	Figma → 코드, 코드 → Figma 양방향 흐름을 모두 지원합니다
표준 기반	W3C DTCG 1.0 기반 디자인 토큰으로 장기적 유지보수가 용이합니다

단점 및 주의사항

항목	내용	대응 방안
요금제 제약	무료 플랜은 월 6회 API 호출 제한으로 실무 사용이 어렵습니다	Professional($15/월) 이상을 진입점으로 보시면 됩니다
초기 셋업 비용	Code Connect 구성, 디자인 토큰 정리, 컴포넌트 매핑에 상당한 시간이 필요합니다	핵심 컴포넌트 10개부터 시작해 점진적으로 넓혀가는 것을 권장합니다
디자인 시스템 전제	Code Connect의 효과를 보려면 Figma 파일 구조와 컴포넌트 라이브러리가 어느 정도 정리돼 있어야 합니다	디자인 시스템이 없는 상태라면 MCP 단독 연결로 가치를 먼저 확인해보시면 좋습니다
생성 코드 품질 한계	복잡한 인터랙션, 접근성(aria 속성, 키보드 내비게이션), 에러 상태는 Figma에 표현되지 않아 수동 보완이 필요합니다	생성 코드를 초안으로 보고 반드시 개발자 검토 후 사용하는 것이 좋습니다
보안 고려사항	MCP 프로토콜의 tool poisoning, cross-server tool shadowing 등 취약점이 존재합니다	신뢰할 수 있는 공식 서버만 연결하고, 기업 환경 도입 시 별도 보안 검토를 권장합니다

Tool Poisoning: 악의적인 MCP 서버가 AI 에이전트에게 잘못된 도구 설명을 제공해 의도치 않은 동작을 유발하는 공격 유형. 공식 Figma MCP 서버 외에 서드파티 서버를 연결할 때는 특히 주의가 필요합니다.

실무에서 가장 흔한 실수

Code Connect 없이 MCP만 연결하고 결과가 실망스럽다고 판단하는 경우 — MCP Server 단독으로는 레이아웃 정보는 잘 오지만 팀 컴포넌트가 반영되지 않습니다. 제네릭 HTML/CSS가 나온다면 Code Connect 설정이 빠진 것입니다.
Figma 파일 레이어 이름이 정리되지 않은 채로 MCP를 붙이는 경우 — AI가 해석하는 건 Figma의 레이어 구조 그대로입니다. Frame 1234, Rectangle copy 3 같은 이름이 수두룩하면 생성 코드 품질이 크게 떨어집니다. MCP 도입 전에 Figma 파일 정리를 먼저 하시면 효과가 확연히 달라집니다.
생성 코드를 검토 없이 바로 머지하는 경우 — 반복 속도가 빨라진다는 것이 검토를 생략해도 된다는 뜻은 아닙니다. 특히 접근성과 에러 상태처럼 Figma에 표현되지 않는 부분은 반드시 수동으로 보완하시는 것이 좋습니다.

마치며

저라면 이 순서로 시작하겠습니다:

Figma 파일의 레이어 이름을 점검합니다 — Frame 1, Rectangle copy 같은 자동 생성 이름을 의미 있는 이름으로 바꾸는 것부터 시작하면 됩니다.
공식 문서를 참조해 Claude Code 또는 Cursor에 MCP 서버를 연결합니다 — 기존 프로젝트의 작은 컴포넌트 하나를 Figma URL로 재생성해보면 현재 설정의 간극이 바로 보입니다.
Button, Input, Card 세 개에 Code Connect 설정을 추가합니다 — 핵심 컴포넌트 세 개만 매핑해도 생성 코드 품질이 얼마나 달라지는지 바로 체감할 수 있습니다.

핵심 개념

MCP: AI 에이전트의 USB 포트

Code Connect: "우리 팀 Button 써줘"를 가능하게 하는 레이어

서버 구성 방식: Remote vs Desktop

실전 적용

예시 1: Claude Code에서 Figma 디자인을 React 컴포넌트로

예시 2: Cursor에서 MCP 연결 설정

예시 3: Code Connect 설정으로 디자인 시스템 연결

예시 4: Code → Figma 역방향 변환 (별도 기능)

장단점 분석

장점

단점 및 주의사항

실무에서 가장 흔한 실수

마치며

참고 자료

핵심 개념

MCP: AI 에이전트의 USB 포트

Code Connect: "우리 팀 Button 써줘"를 가능하게 하는 레이어

서버 구성 방식: Remote vs Desktop

실전 적용

예시 1: Claude Code에서 Figma 디자인을 React 컴포넌트로

예시 2: Cursor에서 MCP 연결 설정

예시 3: Code Connect 설정으로 디자인 시스템 연결

예시 4: Code → Figma 역방향 변환 (별도 기능)

장단점 분석

장점

단점 및 주의사항

실무에서 가장 흔한 실수

마치며

참고 자료

Recommended Posts

Five Inference Optimization Techniques to Double or Quadruple LLM Serving Throughput on the Same GPU — From Quantization to Speculative Decoding

Building an AI Agent Monitoring & Evaluation System: Catching Quality That Silently Breaks in Production with DeepEval and Langfuse

Boosting AI Component Reuse with Figma Code Connect — From Mapping to Measurement in Large-Scale Design Systems

Cutting the Design-to-Code Iteration Cycle by Up to 80% with Figma MCP: Practical Integration of Model Context Protocol and AI Coding Agents

Applying Coding Rules and Design Rules Simultaneously to AI Agents — How to Use CLAUDE.md and DESIGN.md Together for Claude Code Team Setup

DESIGN.md: The Agent-Native File Format That Makes AI Coding Agents Follow Brand Design Rules on Their Own