JW's AI_Stash

2.1.2 클라이언트별 설치 가이드

4 min read

클라이언트별 설치 가이드

Claude Code, Cursor, VS Code에서 Figma MCP 서버를 연결하는 방법을 단계별로 설명한다. 업데이트: 2026-03-10

핵심 요약

구분내용
📖 원격 서버 URLhttps://mcp.figma.com/mcp
💡 데스크톱 서버 URLhttp://127.0.0.1:3845/mcp
🎯 인증원격 서버는 첫 연결 시 브라우저 OAuth 인증 필요
⚠️ 주의데스크톱 서버 사용 전 Figma 앱에서 MCP 서버 활성화 필수

목차

  1. Claude Code 설정
  2. Cursor 설정
  3. VS Code 설정
  4. 데스크톱 서버 활성화 (공통)

1. Claude Code 설정

원격 서버 (권장)

# 방법 1: 플러그인으로 자동 설치
claude plugin install figma@claude-plugins-official
 
# 방법 2: 수동 추가
claude mcp add --transport http figma https://mcp.figma.com/mcp

원격 서버 (수동 JSON 설정)

~/.claude/mcp.json 또는 프로젝트 루트 .mcp.json:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

데스크톱 서버

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

또는 JSON:

{
  "mcpServers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

연결 확인

/mcp

→ figma: connected 표시되면 완료.

2. Cursor 설정

원격 서버

Cursor 설정 → MCP 탭 → + Add Server:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Cursor 구버전(SSE 방식만 지원)을 사용하는 경우 "type": "sse" 로 설정한다.

데스크톱 서버

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp",
      "type": "http"
    }
  }
}

연결 확인

Cursor 우측 하단 MCP 아이콘 → Figma 서버 상태 Active 확인.

3. VS Code 설정

VS Code는 GitHub Copilot 에이전트 모드에서 MCP를 지원한다.

사용자 전역 설정 (~/.vscode/mcp.json)

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

프로젝트별 설정 (.vscode/mcp.json)

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

연결 확인

Copilot Chat → Agent 모드 선택 → @figma 또는 도구 목록에서 Figma 확인.

4. 데스크톱 서버 활성화 (공통)

데스크톱 서버를 사용하려면 Figma 앱에서 먼저 활성화해야 한다.

1. Figma 데스크톱 앱 실행
2. 작업할 파일 열기
3. Dev Mode 전환 (우측 상단 토글)
4. 오른쪽 패널 → 검사(Inspect) 탭
5. MCP 서버 섹션 → "Enable desktop MCP server" 토글 ON
6. 포트 3845에서 로컬 서버 시작 확인

데스크톱 앱을 종료하면 서버도 함께 종료된다. AI 에디터 작업 중에는 Figma 앱을 열어두어야 한다.

문서 탐색

이전다음
2.1.1 서버 설정 개요2.1.3 설정 예시

참고 자료

출처URL신뢰도
원격 서버 설치 가이드https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/★★★★★
데스크톱 서버 설치 가이드https://developers.figma.com/docs/figma-mcp-server/desktop-server-installation/★★★★★
Figma MCP GitHub 가이드https://github.com/figma/mcp-server-guide★★★★★
Figma Help Center MCP 가이드https://help.figma.com/hc/en-us/articles/32132100833559★★★★★

Graph View

Backlinks