Repolode
제출하기
grab

grab/cursor-talk-to-figma-mcp

Cursor와 Claude Code 같은 AI 에이전트가 Figma 디자인을 프로그래밍 방식으로 읽고 수정할 수 있게 해 주는 MCP 서버 및 Figma 플러그인입니다.

GitHub에서 보기웹사이트
스타
7,065
포크
782
열린 이슈
93
마지막 커밋
3개월 전

어떤 프로젝트인가요?

Talk to Figma MCP는 Cursor, Claude Code 같은 AI 코딩 에이전트를 Figma에 연결합니다. TypeScript MCP 서버와 WebSocket 서버를 실행해 디자인 파일 안에서 작동하는 Figma 플러그인으로 명령을 전달합니다. 연결이 완료되면 에이전트가 문서, 선택 항목, 노드 속성을 살펴보고 프레임, 사각형, 텍스트를 만들거나 채우기, 스트로크, 자동 레이아웃 설정을 변경하고 노드를 내보낼 수 있습니다.

대용량 파일에서 텍스트 일괄 교체, 텍스트 노드를 일정 단위로 스캔하는 작업, 소스 인스턴스 하나의 컴포넌트 인스턴스 오버라이드를 여러 대상에 전파하는 작업도 지원합니다. 헬퍼 프롬프트는 기존 주석을 Figma 기본 주석으로 변환하거나 프로토타입 반응을 FigJam 커넥터로 바꾸는 등의 작업을 안내합니다.

설정하려면 Bun을 설치하고 setup 명령을 실행한 뒤 소켓 서버를 시작하고 Figma 플러그인을 설치해야 합니다. 명령을 보내기 전에 플러그인에서 채널에 참여하면 됩니다. 프로젝트에는 소켓 호스트 이름을 변경하는 Windows 및 WSL 가이드도 포함되어 있습니다.

핵심 기능

  • 01MCP 도구를 통해 Figma의 문서, 선택 항목, 노드 세부 정보를 읽습니다.
  • 02프레임, 사각형, 텍스트 노드, 섹션, 컴포넌트 인스턴스를 생성합니다.
  • 03채우기, 스트로크, 모서리 반경, 자동 레이아웃 여백, 간격, 크기를 수정합니다.
  • 04텍스트를 일괄 교체하고 인스턴스 오버라이드를 여러 대상에 전파합니다.
  • 05프로토타입 반응을 바탕으로 기본 주석과 FigJam 커넥터를 생성합니다.
  • 06노드를 PNG, JPG, SVG 또는 PDF로 내보냅니다.

활용 사례

  • 대규모 마케팅 또는 현지화 디자인 파일의 문구를 일괄 업데이트합니다.
  • Cursor 또는 Claude Code에서 에이전트 프롬프트를 사용해 레이아웃이나 프레임의 뼈대를 만듭니다.
  • 기존 주석과 프로토타입 흐름을 Figma의 기본 기능으로 이전합니다.
  • 컴포넌트 인스턴스 하나의 사용자 지정 내용을 유사한 여러 인스턴스에 전파합니다.

빠른 시작

  1. 1

    README의 공식 설치 스크립트를 사용해 Bun을 설치합니다

  2. 2

    setup을 실행해 MCP server를 Cursor 프로젝트에 설치합니다

    bun setup
  3. 3

    WebSocket server를 시작합니다

    bun socket
  4. 4

    Figma 커뮤니티 페이지에서 Figma plugin을 설치합니다

사용 전 알아둘 점

  • 에이전트가 Figma를 사용하려면 WebSocket server를 계속 실행하고 Figma plugin에서 채널에 참여해야 합니다.
  • WSL을 사용하는 Windows에서는 연결을 허용하도록 src/socket.ts를 직접 수정해야 합니다.

토픽

#figma#mcp#ai-agents#design-automation#websocket#typescript#agent#agentic#agentic-ai#ai

자주 묻는 질문

cursor-talk-to-figma-mcp은(는) 무엇인가요?
Cursor와 Claude Code 같은 AI 에이전트가 Figma 디자인을 프로그래밍 방식으로 읽고 수정할 수 있게 해 주는 MCP 서버 및 Figma 플러그인입니다. Talk to Figma MCP는 Cursor, Claude Code 같은 AI 코딩 에이전트를 Figma에 연결합니다. TypeScript MCP 서버와 WebSocket 서버를 실행해 디자인 파일 안에서 작동하는 Figma 플러그인으로 명령을 전달합니다. 연결이 완료되면 에이전트가 문서, 선택 항목, 노드 속성을 살펴보고 프레임, 사각형, 텍스트를 만들거나 채우기, 스트로크, 자동 레이아웃 설정을 변경하고 노드를 내보낼 수 있습니다.
cursor-talk-to-figma-mcp은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
cursor-talk-to-figma-mcp은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
cursor-talk-to-figma-mcp은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. cursor-talk-to-figma-mcp의 마지막 커밋은 2026년 7월 26일입니다.
cursor-talk-to-figma-mcp은(는) 어디에 사용할 수 있나요?
대규모 마케팅 또는 현지화 디자인 파일의 문구를 일괄 업데이트합니다. Cursor 또는 Claude Code에서 에이전트 프롬프트를 사용해 레이아웃이나 프레임의 뼈대를 만듭니다. 기존 주석과 프로토타입 흐름을 Figma의 기본 기능으로 이전합니다. 컴포넌트 인스턴스 하나의 사용자 지정 내용을 유사한 여러 인스턴스에 전파합니다.
cursor-talk-to-figma-mcp는 어떻게 설치하나요?
README의 공식 설치 스크립트를 사용해 Bun을 설치합니다 setup을 실행해 MCP server를 Cursor 프로젝트에 설치합니다: bun setup WebSocket server를 시작합니다: bun socket Figma 커뮤니티 페이지에서 Figma plugin을 설치합니다
cursor-talk-to-figma-mcp은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/grab/cursor-talk-to-figma-mcp

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트