claudekit / tools / figma
[ MCP · Design ]

Figma MCP

Figma 공식 MCP 서버. 디자인 파일 읽기/쓰기, 코드 변환, 컴포넌트 추출을 Claude Code에서 직접 수행.

figma/mcp-server-guide ·updated
$ /plugin install figma copy

Figma 공식 MCP 서버

왜 필요한가?

디자인 시안을 코드로 구현할 때 Figma와 에디터를 끊임없이 오가며 레이아웃, 색상, 간격을 확인해야 합니다. Figma MCP 서버를 사용하면 Claude Code에서 직접 Figma 디자인을 읽고, 코드로 변환하고, 캔버스에 쓸 수도 있습니다.

주요 기능

  • 캔버스 읽기/쓰기 — Figma 디자인을 조회하고, 콘텐츠를 직접 생성/수정
  • 코드 변환 — 선택한 프레임을 프론트엔드 코드로 변환
  • 변수/컴포넌트 추출 — 디자인 토큰, 컴포넌트 속성, 레이아웃 데이터 추출
  • Code Connect — 기존 코드 컴포넌트와 Figma 컴포넌트를 연결하여 재사용
  • 웹 → Figma — 웹페이지를 Figma 디자인으로 변환

Before / After

Before: Figma에서 프레임 선택 → 속성 패널에서 색상/간격 확인 → 에디터에서 수동 코딩 → 비교/수정 반복

After: “이 Figma 프레임을 React 컴포넌트로 변환해줘” → 디자인 토큰과 레이아웃이 반영된 코드 즉시 생성

실제 사용 시나리오

  1. Figma 디자인 시안을 그대로 React/Tailwind 컴포넌트로 변환
  2. 디자인 시스템의 변수와 토큰을 추출하여 코드에 일괄 적용
  3. 기존 웹페이지를 Figma 디자인으로 역변환하여 디자인 시스템 정리
§ 5

See also

same category · curated
[01]
[Tool] HyperFrames · Write HTML. Render video. Built for agents. HTML, CSS, 미디어, 애니메이션을 결정적(deterministic) MP4 영상으로 렌더링하는 오픈소스 프레임워크입니다. 에이전트가 평범한 HTML 컴포지션을 작성하면 비대화형 CLI가 영상으로 출력하며, npx skills add로 Claude Code 같은 코딩 에이전트에 스킬로 설치합니다. HeyGen이 Apache-2.0으로 공개했습니다.
tool · claudekit.io / tools / hyperframes
[02]
[Plugin] Frontend Design · 프론트엔드 UI를 전문 디자이너 수준으로 생성하도록 가이드하는 플러그인.
tool · claudekit.io / tools / frontend-design
§ 6

자주 묻는 질문

자주 묻는 질문
§ 6.1
Figma MCP는 무엇인가요?
Figma 공식 MCP 서버로, Claude Code에서 직접 Figma 디자인을 읽고 코드로 변환하거나 캔버스에 콘텐츠를 쓸 수 있게 해줍니다.
§ 6.2
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
§ 6.3
어떻게 설치하나요?
Claude Code에서 `/plugin install figma`로 설치합니다. claude-plugins-official 마켓플레이스에 포함되어 있습니다.
§ 6.4
주요 기능은 무엇인가요?
캔버스 읽기/쓰기, 선택한 프레임을 프론트엔드 코드로 변환, 디자인 토큰·컴포넌트 속성·레이아웃 데이터 추출, Code Connect로 코드 컴포넌트와 Figma 컴포넌트 연결, 웹페이지를 Figma 디자인으로 역변환을 지원합니다.
§ 6.5
어떤 작업에 적합한가요?
Figma 시안을 그대로 React/Tailwind 컴포넌트로 변환, 디자인 시스템의 변수·토큰을 코드에 일괄 적용, 기존 웹페이지를 Figma로 역변환하여 디자인 시스템 정리에 적합합니다.