Claude AI 에이전트 Talk to Figma MCP

AI 에이전트가 Figma 디자인을 읽고, 분석하고, 수정할 수 있도록 지원합니다.

다음과 같은 즐겨 사용하는 에이전트 도구와 함께 작동합니다:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 대상 사용자

UX/UI 팀

수동 작업 없이 반복적인 디자인 작업을 자동화하고 브랜드 일관성을 유지하세요:

• 자동 접근성 감사 - 대비 문제를 몇 초 만에 감지하고 수정

• 일괄 스타일 업데이트 - 단일 명령으로 전체 문서의 색상, 타이포그래피 또는 간격 변경

• 시각적 계층 구조 분석 - 디자인 구조에 대한 즉각적인 피드백 확인

개발자

디자인에서 직접 프로덕션 준비가 완료된 코드를 생성하세요:

• React/Vue/SwiftUI 컴포넌트 - 디자인에서 코드로 한 번에 변환

• 디자인 토큰을 사용한 코드 - 디자인과 개발 간의 동기화 유지

• 핸드오프 마찰 감소 - 디자인 팀과의 반복적인 수정 작업 최소화

주요 장점: Dev Mode 라이선스가 필요한 Figma 공식 MCP와 달리, 이 MCP는 모든 Figma 계정(무료 계정 포함)에서 작동합니다.

Related MCP server: Figma Console MCP Server

💡 실제 활용 사례

접근성:

"대비 비율이 4.5:1 미만인 모든 텍스트를 찾고 WCAG AA를 충족하는 색상을 제안해 줘"

리브랜딩:

"문서 전체의 모든 기본 버튼에서 #FF6B6B를 #E63946으로 변경해 줘"

디자인 분석:

"이 화면의 시각적 계층 구조를 분석하고 디자인 원칙에 기반한 개선 사항을 제안해 줘"

개발자 핸드오프:

"PropTypes와 CSS 모듈 스타일을 포함하여 'CardProduct'에 대한 React 컴포넌트를 생성해 줘"

⚡️ 빠른 설치

설정: 5분 | 첫 자동화: 2분

요구 사항

• Node.js 설치됨

• Figma Desktop 설치됨

• AI 클라이언트:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

1단계: 웹소켓 설치 및 시작

에이전트가 Figma에 명령을 보낼 수 있도록 합니다.

터미널을 열고 도구를 설치할 폴더로 이동한 후 다음을 실행하세요:

npx claude-talk-to-figma-mcp

💡 팁: 이 명령은 "올인원"(복제, 설치, 시작) 방식입니다. 이후 세션에서 이미 프로젝트 폴더 your-project/claude-talk-to-figma-mcp 안에 있다면 bun run socket만 실행하면 됩니다.

2단계: Figma에 플러그인 설치

Figma가 에이전트로부터 명령을 받고 응답을 반환할 수 있도록 합니다.

Figma Desktop에서 메뉴 → Plugins → Development → Import plugin from manifest로 이동한 후, MCP를 설치한 폴더 내의 src/claude_mcp_plugin/manifest.json을 선택하세요.

3단계: 에이전트 도구 구성

에이전트가 MCP의 읽기 및 수정 도구를 사용할 수 있도록 합니다.

Claude Desktop

claude-talk-to-figma-mcp.dxt를 다운로드(최신 릴리스의 Assets 섹션에서)하고 더블 클릭하세요. Claude가 자동으로 구성됩니다.

Cursor

1. Cursor Settings → Tools & Integrations를 엽니다.

2. **"New MCP Server"**를 클릭하여 mcp.json 파일을 엽니다.

3. 다음 구성을 추가합니다:

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

4. 파일을 저장하고 Cursor를 다시 시작합니다.

기타 에이전트 도구

기타 도구(Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code)의 경우, 상세 설치 가이드의 "에이전트 도구 구성" 챕터를 따르세요.

4단계: 작업 시작

1. Figma에서 플러그인을 엽니다.

2. 채널 ID(녹색 상자 안의 굵은 코드)를 복사합니다.

3. 채팅창에 입력합니다: Connect to Figma, channel {your-ID}

✅ AI와 함께 디자인할 준비가 되었습니다!

후속 작업 세션

일상적인 작업에서 MCP를 다시 사용하기 위해 전체 과정을 반복할 필요는 없습니다:

1. 소켓 시작: 터미널에서 프로젝트 폴더 your-project/claude-talk-to-figma-mcp로 이동하여 bun run socket(또는 npm run socket)을 실행합니다.

2. Figma에서 플러그인 열기: 최근 플러그인 목록에서 찾을 수 있습니다.

3. AI 연결: 채널 ID를 복사하여 에이전트에게 말합니다: Connect to Figma, channel {your-ID}.

🤖 멀티 에이전트 및 병렬 실행

이 MCP 서버는 안전한 병렬 실행을 기본적으로 지원하여, 여러 AI 에이전트(예: Claude Code의 하위 에이전트 또는 팀 스웜)가 플러그인을 잠그지 않고 Figma 파일에서 동시에 작업할 수 있도록 합니다. 내장된 명령 큐가 서버 측에서 요청을 순차적으로 처리하여 Figma API의 시간 초과를 방지합니다.

참고: 여러 에이전트가 동시에 문서를 수정할 수 있으므로, 암시적인 페이지 컨텍스트에 의존하는 것은 안전하지 않습니다. 결과적으로 set_current_page와 같은 상태 저장 명령은 차단됩니다. 모든 에이전트는 생성 또는 구조적 수정 명령(예: create_frame, create_text)을 실행할 때 의도한 parentId 매개변수를 명시적으로 제공해야 합니다.

(이 기능을 설계하고 기여해 주신 @mmabas77 님께 특별한 감사를 드립니다!)

🐳 대안: Docker 사용

Docker를 선호하거나 팀 환경에서 WebSocket 서버를 실행해야 하는 경우, 상세 설치 문서의 Docker 설치 가이드를 참조하세요.

🛠️ 기능

디자인 분석

• 문서 정보, 현재 선택 항목, 스타일 가져오기

• 텍스트 스캔, 컴포넌트 감사, 에셋 내보내기

요소 생성

• 전체 스타일 제어가 가능한 도형, 텍스트, 프레임

• 요소 복제, 그룹화, 정리

수정

• 색상, 테두리, 모서리, 그림자

• 오토 레이아웃, 고급 타이포그래피

• 로컬 컴포넌트 및 팀 라이브러리 컴포넌트

전체 명령 목록을 확인하세요.

📚 문서

• 상세 설치 — 수동 설정, Cursor, Windsurf 및 기타 IDE

• 사용 가능한 명령 — 전체 도구 참조

• 문제 해결 — 일반적인 오류 및 해결 방법

• 기여하기 — 아키텍처, 테스트, 기여 가이드

• 변경 로그 — 버전 기록

🙏 크레딧

Sonny Lazuardi의 cursor-talk-to-figma-mcp를 기반으로 합니다. Claude Desktop용으로 조정되었으며 Xúlio Zé에 의해 새로운 도구들이 추가되었습니다.

모든 프로젝트 기여에 대해 알고 싶다면 기여 가이드의 "기여자" 챕터를 방문하세요.

MIT 라이선스

📊 프로젝트 상태

✅ 안정적인 프로덕션 - 디자인 및 개발 팀의 일상 업무에 바로 사용할 수 있는 도구

🚀 활발한 개발 중:

• Figma 변수에 대한 완벽한 지원

• Tailwind CSS/SwiftUI로의 내보내기 기능 강화

특정 기능이 필요하신가요?

GitHub Issues에서 새로운 기능을 제안하세요

여러분의 피드백과 기여가 프로젝트를 유지하는 원동력입니다. ❤️