flowchart TD
A[AI 에디터] --> B[mcp.figma.com/mcp]
B --> C[Figma 클라우드 API]
C --> D[Figma 파일]
데스크톱 서버 흐름
flowchart TD
A[AI 에디터] --> B[127.0.0.1:3845/mcp]
B --> C[Figma 데스크톱 앱]
C --> D[Figma 파일\n현재 선택 영역 포함]
2. 전송 프로토콜 선택
MCP는 두 가지 전송 방식을 지원한다. 에디터에 따라 지원 여부가 다르다.
프로토콜
설명
지원 에디터
Streamable HTTP
HTTP 요청 기반. 최신 표준
Claude Code, VS Code, Cursor 등 대부분
SSE (Server-Sent Events)
스트리밍 이벤트 기반. 구형
일부 구형 Cursor 버전
에디터가 Streamable HTTP를 지원하면 "type": "http" 설정을 사용한다. 연결이 안 될 경우 SSE 방식("type": "sse")으로 전환해 본다.
3. 설정 방식 선택 기준
flowchart TD
A{유료 Dev/Full 시트?} --> |아니오| B[원격 서버만 사용 가능]
A --> |예| C{로컬에서 현재\n선택 영역 참조 필요?}
C --> |예| D[데스크톱 서버 권장]
C --> |아니오| E{generate_figma_design\n도구 필요?}
E --> |예| F[원격 서버 필수]
E --> |아니오| G[둘 다 가능\n원격 서버 권장]