Figma + Claude 코드

Source: Dev.to

Overview

Figma는 Anthropic과 공식 파트너십을 맺어 Claude AI 기능을 디자인 플랫폼에 통합했습니다. 이 통합을 통해 code‑to‑canvas 워크플로우가 가능해져, AI가 생성한 코드를 완전히 편집 가능한 Figma 디자인으로 변환할 수 있습니다.

Core Feature: “Code to Canvas”

• Purpose: AI 코딩 워크플로우와 협업 디자인 정제 사이의 격차를 메워줍니다.

• Process:

  1. 브라우저 기반 환경에서 Claude Code를 사용해 UI를 구축합니다.
  2. 통합을 통해 화면을 캡처하고, 실시간 브라우저 상태를 Figma 호환 프레임으로 변환합니다.
  3. 프레임을 Figma에 붙여넣어 편집 가능한 디자인 아티팩트(플랫 이미지가 아님)로 사용합니다.

• Collaboration: 팀은 캔버스에서 직접 AI가 만든 옵션을 주석 달고, 복제하고, 재배열하고, 비교할 수 있습니다.

• Technology: Figma의 MCP (Model Context Protocol) Server 위에서 실행되며, AI 도구를 외부 애플리케이션에 연결하기 위한 오픈 표준입니다.

Requirements

• Figma desktop app (브라우저 버전은 지원되지 않음)
• Figma Dev 또는 Full seat 구독
• npm을 통해 설치한 Claude Code

Setup steps

1. Figma 환경설정에서 MCP 서버를 활성화합니다.

2. 터미널 명령어를 사용해 MCP 서버를 Claude Code에 연결합니다. 예:

   # Example command – replace with actual parameters
   npx claude-code --connect-mcp

Benefits

Reverse Workflow

전통적인 디자인 → 코드 파이프라인과는 반대로 code → design 흐름을 가능하게 합니다.

Team Collaboration

비기술적인 이해관계자도 정적인 목업이 아닌 실제 구축된 UI를 검토하고 피드백을 제공할 수 있습니다.

Design System Alignment

디자이너가 AI가 만든 UI가 기존 컴포넌트와 디자인 토큰에 부합하는지 확인할 수 있습니다.

Round‑Trip Workflow

1. Figma에서 디자인 → Claude로 코드 생성.
2. 생성된 UI를 다시 Figma로 캡처 → 추가로 정제.

Considerations

• 터미널/CLI 설정이 필요합니다.
• 데스크톱 앱 전용이며, 브라우저 지원이 없습니다.
• 다중 화면 흐름은 각각 별도로 캡처해야 합니다.
• Claude Code는 직접 코드베이스에서 작동하므로 변경 사항이 프로덕션 파일에 영향을 미칩니다.
• 복잡한 프로젝트의 경우 토큰 비용이 누적될 수 있습니다.

Outlook

이번 파트너십은 AI가 디자인 캔버스를 대체하는 것이 아니라, 더 많은 옵션과 빠른 작업을 제공함으로써 캔버스를 풍부하게 만든다는 Figma의 신념을 반영합니다.