cursor-talk-to-figma-mcp MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

현재 선택, 노드 트리 및 문서 메타데이터 읽기
로컬라이제이션을 위한 일괄 텍스트 업데이트 (scan_text_nodes + set_multiple_text_contents)
자동 레이아웃 및 간격 툴 (set_layout_mode, set_padding, set_axis_align)
프레임, 직사각형, 텍스트 생성; 컴포넌트 인스턴스화; 오버라이드 설정
모든 노드를 PNG/SVG로 내보내기하여 다른 곳에서 사용

라이브 데모

실제 사용 모습

cursor-talk-to-figma.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: cursor-talk-to-figma-mcp

한 프롬프트로 Figma 문서의 모든 텍스트 레이어를 업데이트하는 방법

👤 복사 검토 또는 로컬라이제이션을 실행하는 디자이너 및 PM ⏱ ~20 min intermediate

언제 쓸까: 50개 문자열을 이름 변경하는 사양이 있고 50번 클릭하고 싶지 않은 경우입니다.

사전 조건

Bun 설치됨 — curl -fsSL https://bun.sh/install | bash
플러그인이 연결된 Figma 데스크톱 열기 — Plugins > Development > Link existing plugin > src/cursor_mcp_plugin/manifest.json 지정
WebSocket 브리지 실행 중 — 복제된 저장소에서 bun run start 실행

흐름

플러그인 패널에서 채널에 가입하기

Figma 채널 X7F2에 가입하고 현재 페이지의 모든 텍스트 노드를 나열하세요.✓ 복사됨

→ 현재 텍스트가 포함된 노드 ID 목록
이전 복사와 새 복사 매핑

old_string,new_string의 CSV가 있습니다. 콘텐츠가 old_string과 일치하는 모든 텍스트 노드에 대해 set_multiple_text_contents를 사용하여 new_string으로 바꾸세요.✓ 복사됨

→ 적용된 업데이트 수, 차이 미리보기
시각적으로 스팟 확인

가장 많은 편집이 있었던 3개 프레임을 PNG로 내보내기하여 검토할 수 있도록 하세요.✓ 복사됨

→ PNG URL / 파일 경로

결과: 모든 문자열이 업데이트되고 증거를 제공하는 사전/사후 내보내기가 있는 복사 검토된 파일입니다.

함정

플러그인이 작업 중에 연결 해제됨 — set_multiple_text_contents는 멱등성을 갖습니다 — 동일한 매핑으로 다시 실행하세요. 이미 올바른 노드는 건너뜁니다.
컴포넌트의 텍스트 대 인스턴스 업데이트 혼동 — 먼저 get_instance_overrides를 사용하여 어떤 인스턴스가 기본 텍스트를 오버라이드하는지 확인하세요.

함께 쓰기: filesystem

한 번에 PRD에서 Figma 사양에 주석을 달기 위한 방법

👤 문서와 목업을 쌍으로 하는 설계 엔지니어 ⏱ ~25 min intermediate

언제 쓸까: PRD에 '클릭 유도 문안이 X를 명시하고 Y 도움말 복사를 포함해야 함'이 있고 이를 Figma 주석으로 원하는 경우입니다.

흐름

PRD 공유하기

PRD는 다음과 같습니다 [붙여넣기]. 모든 UI 주석 요구사항을 추출하세요.✓ 복사됨

→ {node_hint, annotation_text}의 구조화된 목록
힌트를 실제 노드에 매핑

get_selection과 scan_nodes_by_types를 사용하여 각 주석을 현재 페이지의 구체적인 노드 ID와 일치시키세요.✓ 복사됨

→ 노드 ID + 주석 준비됨
주석 적용

set_multiple_annotations으로 적용하세요.✓ 복사됨

→ 플러그인 오버레이에 표시된 주석

결과: 엔지니어가 탭을 전환하지 않고 읽을 수 있는 자체 문서화된 Figma 파일입니다.

함정

Claude가 이름을 공유하는 여러 노드 중 잘못된 노드와 일치시킴 — 상위 프레임 이름을 명확한 힌트로 포함하세요.

함께 쓰기: notion · github

컴포넌트 변형 (다크 모드, 크기)을 프로그래밍 방식으로 생성하는 방법

👤 설계 시스템 팀 ⏱ ~20 min advanced

언제 쓸까: 기본 버튼을 12개 변형으로 복제하고 채우기/스트로크를 조정해야 하는 경우입니다.

흐름

기본 노드 복제

Button/Primary 프레임을 4번 복제하고 16px 간격으로 가로 정렬하세요.✓ 복사됨

→ 문서에 4개의 새 노드
채우기/스트로크 다시 색칠

각 복제본에 대해 set_fill_color를 #3B82F6의 500, 600, 700, 800 음영으로 설정하세요.✓ 복사됨

→ 보이는 색상 진행
변형으로 변환

이들을 'Button / Intensity'라는 컴포넌트 세트로 그룹화하세요.✓ 복사됨

→ 자산에 나타나는 새 컴포넌트 세트

결과: 설계 시스템에 사용할 준비가 된 변형 세트입니다.

함정

색상 토큰이 원시 16진수와 다름 — 시스템에서 변수를 사용하는 경우 원시 16진수가 아닌 변수 ID로 set_fill_color를 사용하세요.

개발 인계를 위해 표시된 모든 프레임을 PNG로 내보내기하는 방법

👤 인계 문서를 준비하는 설계 엔지니어 ⏱ ~10 min beginner

언제 쓸까: 스프린트 킥오프 또는 클라이언트 검토 전입니다.

흐름

인계 태그가 있는 프레임 찾기

현재 페이지에서 FRAME 유형의 노드를 스캔하고 이름이 '[HANDOFF]'로 시작하는 경우✓ 복사됨

→ 대상 프레임 목록
2배 크기로 내보내기

각각을 2배 PNG로 내보내기하고 /handoff/2026-04/에 저장하세요.✓ 복사됨

→ 반환된 파일 경로

결과: Notion 또는 Linear에 드롭할 준비가 된 날짜 스탬프가 있는 인계 폴더입니다.

함께 쓰기: filesystem · notion

조합

다른 MCP와 조합해 10배 효율

cursor-talk-to-figma + notion

엔지니어를 위해 설계 주석을 Notion 사양 페이지로 동기화

현재 Figma 페이지의 모든 주석을 추출하고 Notion 문서 'Checkout Spec v3'에 체크리스트로 미러링하세요.✓ 복사됨

cursor-talk-to-figma + filesystem

프레임을 날짜별로 버전 관리되는 로컬 인계 폴더로 내보내기

모든 [HANDOFF] 프레임을 /design-handoff/2026-04/로 PNG 2배로 내보내기하세요.✓ 복사됨

cursor-talk-to-figma + github

설계 변경을 코드 PR 참조와 쌍으로

CTA 버튼에 프론트엔드 저장소의 PR #4421에 연결하는 주석을 추가하세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
get_document_info		새 파일에서 방향 설정하기	무료
get_selection		사용자가 방금 클릭한 항목에 작동	무료
scan_text_nodes	root_id?: str	일괄 복사 변경 전	무료
set_multiple_text_contents	updates: {id, text}[]	일괄 텍스트 교체	무료
set_fill_color	id: str, color: {r,g,b,a}	노드 재스타일링	무료
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	자동 레이아웃 전환	무료
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	라이브러리 컴포넌트를 캔버스에 배치	무료
set_multiple_annotations	annotations: {id, text}[]	일괄 사양 주석	무료
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	인계, 검토, 인라인 미리보기	무료
join_channel	channel: str	플러그인 실행 후 첫 호출	무료

비용 및 제한

운영 비용

API 쿼터: Figma는 플러그인 작업에 대한 공개된 속도 제한이 없습니다. 실제 한계는 WebSocket 처리량입니다.
호출당 토큰: 노드 정보: 자식에 따라 100-1500 토큰
금액: 무료 (Figma 계정 필수; 무료 계획 작동)
팁: 항상 스캔을 특정 루트 노드 ID로 범위 지정하세요. 큰 파일에서 페이지 전체 스캔은 컨텍스트를 초과합니다.

보안

권한, 시크릿, 파급범위

최소 스코프: 데스크톱/웹 앱에서 실행되는 Figma 플러그인; API 토큰 필요 없음

자격 증명 저장: 없음 — 플러그인은 Figma에서 인프로세스로 실행되고, MCP는 localhost WebSocket을 통해 통신합니다.

데이터 외부 송신: Figma 문서 노드는 플러그인에서 로컬 MCP로, 그 다음 선택한 LLM으로 흐릅니다. 민감한 설계는 LLM 호출을 통해서만 머신을 떠납니다.

절대 부여 금지: WebSocket 포트를 localhost 범위를 넘어 노출하지 마세요

일괄 편집은 원자적이지 않습니다 — 부분 실패는 혼합 상태를 남깁니다. 큰 실행 전에 Figma 버전을 커밋하세요.

문제 해결

자주 발생하는 오류와 해결

플러그인이 WebSocket에 연결할 수 없습니다

bun run start가 활성 상태이고 플러그인 채널 ID가 에이전트가 가입한 것과 일치하는지 확인하세요.

확인: bun --version && lsof -i :3055

set_multiple_text_contents는 일부 노드만 업데이트합니다

잠긴 레이어 또는 컴포넌트 내의 노드는 건너뜁니다. 잠금을 해제하거나 인스턴스 오버라이드를 대상으로 하세요.

Figma 플러그인이 '매니페스트를 찾을 수 없음'을 표시합니다

Plugins > Development > Link existing plugin을 통해 다시 링크하고 src/cursor_mcp_plugin/에서 manifest.json을 선택하세요.

내보내기가 빈 URL을 반환합니다

일부 노드 (마스크 그룹, 특정 효과)는 서버 측에서 렌더링할 수 없습니다. 먼저 병합하거나 SVG로 내보내기하세요.

대안

cursor-talk-to-figma-mcp 다른 것과 비교

대안	언제 쓰나	단점/장점
Official Figma Dev Mode MCP	Figma 유료 Dev Mode 좌석이 있고 공식 지원을 원하는 경우	읽기 전용; 일괄 편집 불가능
Framelink Figma MCP	읽기 전용 REST API 기반 서버를 선호하는 경우	변경 불가, WebSocket 플러그인 필요 없지만 편집할 수 없음

cursor-talk-to-figma-mcp