Claude AI 에이전트가 Figma MCP와 대화하기

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

이 Git 저장소에서 설치하기

이 포크는 Codex, Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Roo Code 및 로컬 stdio MCP 서버를 지원하는 모든 클라이언트용으로 패키징되어 있습니다.

Codex:

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

일반 MCP 클라이언트: 루트의 .mcp.json을 사용하거나 GitHub에서 명령을 구성하세요:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop: GitHub Releases에서 desrid-html-to-figma.dxt를 다운로드하세요.

모든 클라이언트에는 로컬 Figma 개발 플러그인과 WebSocket 브리지도 필요합니다. 크로스 에이전트 설치 가이드 또는 Codex 가이드를 참고하세요.

선호하는 에이전트 도구와 함께 사용할 수 있습니다:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 사용 대상

UX/UI 팀

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

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

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

• 시각적 위계 분석 - 디자인 구조에 대한 즉각적인 피드백을 받습니다

개발자

디자인에서 바로 프로덕션용 코드를 생성하세요:

• React/Vue/SwiftUI 컴포넌트 - 디자인에서 코드까지 한 단계로

• 디자인 토큰이 포함된 코드 - 디자인과 개발의 동기화 유지

• 핸드오프 마찰 감소 - 디자인 팀과의 왕복 커뮤니케이션 최소화

핵심 장점: Figma의 공식 MCP는 Dev Mode 라이선스가 필요하지만, 이 MCP는 모든 Figma 계정(무료 계정 포함) 에서 작동합니다.

💡 실제 사용 사례

사보 기능:

"Use all texts with contrast ratio <4.5:1 and suggest colors that meet WCAG AA"

브랜드 리뉴얼:

"Change #FF6B6B to #E63946 in all primary buttons throughout the document"

디자인 분석:

"Analyze the visual hierarchy of this screen and suggest improvements based on design principles"

개발자 핸드오프:

"Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules"

⚡️ 빠른 설치

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

사전 요구 사항

• Node.js 설치

• Figma Desktop

• AI 클라이언트:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

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

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

터미널을 열고 도구를 설치하려는 폴더로 이동한 다음 실행합니다:

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

💡 팁: 이 명령은 버전이 고정된 GitHub Release 패키지를 다운로드하고 로컬 브리지를 시작합니다. 클론한 저장소라면 이후 세션에서 npm run socket을 실행하세요.

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

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

Figma 데스크톱에서 메뉴 → 플러그인 → 개발 → 매니페스트에서 플러그인 가져오기 → MCP를 설치한 폴더 안에서 src/claude_mcp_plugin/manifest.json을 선택합니다.

Step 3: 에이전트 도구 구성

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

Claude Desktop

최신 릴리스에서 desrid-html-to-figma.dxt를 다운로드하고 더블클릭합니다. Claude가 자동으로 구성됩니다.

Cursor

1. Cursor 설정 → 도구 및 통합화를 엽니다

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

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

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

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

기타 에이전트 도구

다른 도구(Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code)는 자세한 설치 가이드의 "Configure your Agentic Tool" 챕터에 있는 지침을 따르세요.

4단계: 작업 시작

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

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

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

✅ AI로 디자인할 준비 완료!

이후 작업 세션

일상 작업에서 MCP를 다시 사용할 때 전체 과정을 반복할 필요는 없습니다:

1. 소켓 시작: 터미널에서 your-project/desrid-html-to-figma 폴더에 들어가 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_tima)을 실행할 때 의도한 parentId 파라미터를 명시적으로 제공해야 합니다.

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

🐳 대안: Docker 사용

Docker를 선호하거나 팀 환경에서 WebSocket 서버를 실행해야 한다면 자세한 설치 문서의 Docker 설치 가이드를 참조하세요.

🛠️ 기능

디자인 분석

• 문서 정보, 현재 선택 영역, 스타일 정보 획득

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

요소 생성

• 도형, 텍스트, 프레임 — 원하는 스타일 완전 제어

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

수정

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

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

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

전체 명령 목록을 참조하세요.

📚 문서

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

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

• 문제 해결 — 자주 발생하는 오류와 해결 방법

• 로한은가 — 아키텍처, 테스트, 규약 가이드

• 변경 로그 — 버전 이력

🙏 크레딧

Sonny Lazuardi의 cursor-talk-to-figma-mcp를 기반으로 제작되었습니다. Xúlio Zé가 Claude Desktop에 맞게 개발하고 확장했습니다.

프로젝트의 모든 기여를 확인하고 싶다면 기여 가이드의 "Contributors" 챕터를 방문하세요.

MIT 라이선스

📊 프로젝트 상태

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

🚀 적극 개발 중:

• Figma Variables 완전 지원

• Tailwind CSS/SwiftUI 내보내기 개선

원하는 기능이 있으신가요?

GitHub Issues에 새롭게 제안하세요

여러분의 피드백과 기여가 이 프로젝트를 살아있게 만듭니다. ❤️