arinspunk/claude-talk-to-figma-mcp

AI 에이전트가 Figma 디자인을 읽고, 분석하고, 수정할 수 있도록 설정하세요.

여러분이 선호하는 에이전트 도구(agentic tools)와 함께 작동합니다:

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

자동 접근성 감사 (Automated accessibility audits) - 몇 초 만에 대비(contrast) 문제를 감지하고 수정합니다.
일괄 스타일 업데이트 (Bulk style updates) - 단 한 번의 명령으로 문서 전체의 색상, 타이포그래피 또는 간격을 변경합니다.
시각적 계층 구조 분석 (Visual hierarchy analysis) - 디자인 구조에 대한 즉각적인 피드백을 받습니다.

디자인에서 즉시 프로덕션 수준의 코드를 생성하세요:

React/Vue/SwiftUI 컴포넌트 - 디자인에서 코드로 한 단계 만에 전환합니다.
디자인 토큰 (Design tokens) 기반 코드 생성 - 디자인과 개발의 동기화를 유지합니다.
핸드오프 마찰 감소 (Reduce handoff friction) - 디자인 팀과의 반복적인 피드백 과정을 줄입니다.

핵심 장점: Dev Mode 라이선스가 필요한 Figma의 공식 MCP와 달리

Figma 데스크톱 앱에서 Menu → Plugins → Development → Import plugin from manifest로 이동한 뒤, MCP를 설치한 폴더 내부의 src/claude_mcp_plugin/manifest.json을 선택하세요.

에이전트(Agent)가 MCP의 읽기(read) 및 수정(modify) 도구를 사용할 수 있게 합니다.

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

• Cursor Settings → Tools & Integrations를 엽니다. - **"New MCP Server"**를 클릭하여 mcp.json 파일을 엽니다. - 다음 설정을 추가합니다:

{
"mcpServers": {
"ClaudeTalkToFigma": {
...

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

다른 도구들(Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code)의 경우, 상세 설치 가이드의 "Configure your Agentic Tool" 장에 있는 지침을 따를 수 있습니다.

• Figma에서 플러그인을 엽니다.
• 채널 ID(초록색 박스 안의 굵은 코드)를 복사합니다.
• 채팅창에 다음과 같이 입력합니다:
  Connect to Figma, channel {your-ID}

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

일상적인 업무에서 MCP를 다시 사용하려면 전체 과정을 반복할 필요가 없습니다:

소켓(Socket) 시작: 터미널에서 프로젝트 폴더 your-project/claude-talk-to-figma-mcp로 이동하여 bun run socket (또는 npm run socket)을 실행합니다. Figma에서 플러그인 열기: 최근 사용한 플러그인 목록에서 찾을 수 있습니다. AI 연결: 채널 ID를 복사하고 에이전트에게 다음과 같이 말합니다: Connect to Figma, channel {your-ID}.

이 MCP 서버는 별도의 설정 없이도 **안전한 병렬 실행 (safe parallel execution)**을 지원하여, 여러 AI 에이전트(예: Claude Code의 서브 에이전트 또는 팀 스웜(team swarms))가 플러그인을 잠그지 않고 Figma 파일에서 동시에 작업할 수 있도록 합니다. 내장된 명령 큐(command queue)가 서버 측에서 요청을 순차적으로 처리하여 Figma API의 타임아웃(timeout)을 방지합니다.

참고: 여러 에이전트가 동시에 문서를 수정할 수 있으므로, 암시적인 페이지 컨텍스트(implicit page context)에 의존하는 것은 안전하지 않습니다. 결과적으로 set_current_page와 같은 상태 유지 명령(stateful commands)은 차단됩니다. 모든 에이전트는 의도한 parentId를 명시적으로 제공해야 합니다.

모든 생성 또는 구조적 수정 명령(예: create_frame, create_text)을 실행할 때 매개변수(parameter)를 지정해야 합니다.

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

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

디자인 분석 (Design analysis)

• 문서 정보, 현재 선택 항목, 스타일 가져오기
• 텍스트 스캔, 컴포넌트 감사(audit), 에셋(assets) 내보내기

요소 생성 (Element creation)

• 스타일을 완벽하게 제어할 수 있는 도형, 텍스트, 프레임 생성
• 요소 복제, 그룹화, 정리

수정 (Modification)

• 색상, 테두리(borders), 모서리(corners), 그림자(shadows)

• 오토 레이아웃(Auto-layout), 고급 타이포그래피(typography)

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

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

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

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

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

• 변경 이력 (Changelog) — 버전 히스토리

Sonny Lazuardi의 cursor-talk-to-figma-mcp를 기반으로 합니다. Xúlio Zé가 Claude Desktop에 맞게 조정하고 새로운 도구들을 추가했습니다.

모든 프로젝트 기여 사항에 대해 알고 싶다면, 기여 가이드의 "Contributors" 장을 방문할 수 있습니다.

✅ 안정적인 프로덕션 (Stable production) - 디자인 및 개발 팀에서 일상적으로 사용할 준비가 된 도구

🚀 활발히 개발 중인 기능:

• Figma Variables에 대한 완전한 지원
• Tailwind CSS/SwiftUI로의 내보내기 기능 강화

여러분의 피드백과 기여가 이 프로젝트를 지속하게 합니다. ❤️