Claude로 Figma 디자인하게 하기

**“Claude가 Figma에서 직접 디자이너처럼 모든 화면을 자동 제작한다”**고 생각하면 과장이고, 실제로는 아래 3가지 방식으로 이해하는 게 맞습니다. Figma는 현재 Claude Code / Claude를 MCP 클라이언트로 지원하고, Figma Design, Figma Make, FigJam과 연결할 수 있게 안내하고 있습니다.

가장 실용적인 방법은 Claude Code + Figma MCP 서버입니다. 이 방식에서는 Claude Code가 Figma 파일의 디자인 맥락, 변수, 컴포넌트, 레이아웃 정보를 읽고, 그 정보를 바탕으로 코드를 만들거나 수정합니다. 또 지원 클라이언트에서는 실제 브라우저 UI를 편집 가능한 Figma 프레임으로 보내는 code-to-canvas도 가능합니다.

정리하면 이렇게 보시면 됩니다.

1) 웹/앱 디자인을 코드로 구현하게 하기

이건 가장 일반적인 흐름입니다. Figma 디자인 파일이나 특정 프레임 링크를 Claude Code에 주고, “이 화면을 React + Tailwind로 구현해라”처럼 지시하는 방식입니다. Figma MCP 서버는 selected frame의 디자인 컨텍스트, 변수, 스타일, 컴포넌트 매핑 등을 agent에 전달할 수 있게 되어 있고, Code Connect를 붙이면 실제 코드베이스의 컴포넌트 정보까지 함께 반영할 수 있습니다.

이 방식이 좋은 이유는, Claude Code가 그냥 스크린샷 보고 추측하는 게 아니라 Figma의 구조화된 정보를 읽는다는 점입니다. 그래서 spacing, typography, color token, component usage 같은 걸 더 정확하게 반영할 수 있습니다.

2) 이미 만든 웹 화면을 Figma 디자인 파일로 되돌려 보내기

이건 최근에 꽤 쓸만해진 흐름입니다. Figma의 generate_figma_design 도구와 code-to-canvas 기능을 쓰면, production / staging / localhost에서 렌더링된 실제 UI를 편집 가능한 Figma 프레임으로 가져올 수 있습니다. 즉 “코드로 먼저 만든 화면”을 캔버스로 다시 올려서 디자이너와 함께 다듬는 식입니다.

이건 특히 프론트엔드 개발자에게 유용합니다. 먼저 Claude Code로 화면을 빠르게 만든 뒤, 그 결과를 Figma에 보내고, 거기서 팀이 리뷰하고, 다시 변경사항을 코드에 반영하는 식으로 왕복할 수 있습니다. Figma도 이 흐름을 “UI rendered from code → canvas for alignment → back to code”라고 설명합니다.

3) Claude에서 FigJam 다이어그램 만들기

이건 “디자인 파일 제작”과는 조금 다릅니다. 현재 Figma 도움말 기준으로, Claude integration은 FigJam 다이어그램 생성도 지원합니다. flowchart, decision tree, sequence diagram, gantt chart 같은 걸 프롬프트로 만들 수 있습니다. 다만 Figma 도움말은 이 Claude integration이 현재는 FigJam만 지원하고, Figma의 다른 제품용 파일은 만들 수 없다고 명시합니다.

즉, “Claude 채팅창에서 바로 Figma 디자인 파일을 만든다”는 기대는 맞지 않습니다. Claude에서 바로 가능한 건 FigJam 쪽이 더 명확하고, 실제 UI 디자인 파일 작업은 보통 Claude Code + Figma MCP 쪽이 핵심입니다.

4) Figma Make로 프롬프트 기반 프로토타입 만들기

또 다른 길은 Figma Make입니다. 이건 Claude Code가 아니라 Figma 자체의 AI 제작 기능에 가깝습니다. Figma는 Make를 통해 prompt-to-UI, prompt-to-app, prototype generation을 제공한다고 설명하고 있고, Anthropic도 최근 모델 소개에서 Claude가 Figma Make의 복잡한 인터랙티브 앱/프로토타입 생성에 강하다고 홍보하고 있습니다.

그래서 “Figma 안에서 AI로 빠르게 시안 만들기”가 목적이면 Figma Make가 더 맞고, “내 코드베이스와 연결해서 구현/수정/왕복하기”가 목적이면 Claude Code + Figma MCP가 더 맞습니다.

가장 추천하는 실제 사용법

당신이 웹 개발자라면, 아래 흐름이 제일 현실적입니다.

  1. Figma MCP를 Claude Code에 연결
  2. Figma 프레임 링크를 Claude Code에 주고 구현 요청
  3. Claude Code가 컴포넌트, 토큰, 레이아웃 맥락을 반영해 코드 작성
  4. 필요하면 localhost 화면을 다시 Figma로 전송
  5. Figma에서 리뷰 후, 수정사항을 다시 Claude Code에 반영 지시

이 흐름은 Figma가 공식 문서에서 소개하는 MCP 서버, Code Connect, code-to-canvas 흐름과 정확히 맞습니다.

설정은 어떻게 하나

Figma는 remote MCP server와 desktop MCP server 두 가지 연결 방식을 제공합니다. remote는 Figma의 hosted endpoint에 OAuth로 연결하는 방식이고, desktop은 Figma desktop app에서 로컬 MCP 서버를 켜는 방식입니다. Claude Code는 둘 다 지원 대상으로 안내됩니다.

Figma 개발 문서 기준으로 Claude Code에서는 Figma plugin 사용이 권장되고, remote server의 경우 https://mcp.figma.com/mcp 엔드포인트를 쓰는 구성이 안내됩니다. 데스크톱 방식은 Figma 데스크톱 앱에서 Dev Mode로 들어가 MCP server를 enable하는 절차가 공식 문서에 나와 있습니다.

제한도 있습니다

몇 가지는 분명히 알아두는 게 좋습니다.

  • Claude가 Figma에서 완전한 제품 디자이너 역할을 자동 대체하는 수준은 아닙니다. 지금 공식 문서가 강하게 미는 건 “design-informed code generation”과 “code-to-canvas”입니다.
  • Claude integration으로 바로 만드는 산출물은 현재 FigJam이 가장 명확히 지원됩니다. 일반 Figma Design 파일 작업은 MCP 기반 워크플로가 중심입니다.
  • 사용량 제한도 있습니다. Figma 문서 기준으로 seat type과 plan에 따라 MCP tool call 한도가 다릅니다. 예를 들어 Enterprise는 최대 600 calls/day, Organization·Pro의 Full/Dev seat는 최대 200 calls/day, Starter 또는 View/Collab seat는 월 6 calls로 안내됩니다.

한마디로 결론

가능은 하지만, 방식이 다릅니다.

  • UI를 구현하고 수정하게 하려면: Claude Code + Figma MCP
  • 코드 화면을 다시 Figma로 보내려면: code-to-canvas
  • 아이디어 다이어그램을 Claude에서 바로 만들려면: Claude + FigJam
  • 프롬프트로 빠르게 시안을 만들려면: Figma Make

가장 실무적인 답은 Claude Code를 Figma MCP에 연결해서 “Figma → 코드 → Figma” 왕복 루프를 만드는 것입니다.

Related