Framelink MCP 설치

01. 설치 — Framelink MCP for Figma

개요

Framelink MCP for Figma (GLips/Figma-Context-MCP)는 오픈소스 커뮤니티가 만든 Figma MCP Server입니다. Figma의 REST API를 활용하므로 Figma Desktop App / 유료 플랜이 필요 없고, Figma Personal Access Token만 있으면 누구나 사용 가능합니다.

공식 vs Framelink 비교

항목	공식 Figma MCP	Framelink MCP
라이선스	Figma 공식	오픈소스(MIT)
요구 환경	Desktop App + Dev Seat	Figma 계정만
입력 방식	현재 선택 노드	Figma URL / fileKey + nodeId
데이터 소스	로컬 파일 + Vector Tree	Figma REST API
Code Connect	지원	미지원
사용성	즉시 워크플로	링크 공유 기반

설치 방법

방법 A — npx 즉시 실행 (권장)

별도 설치 없이 MCP 클라이언트 설정에서 바로 호출.

VS Code (Copilot) — settings.json

{
  "mcp": {
    "servers": {
      "figma-developer-mcp": {
        "type": "stdio",
        "command": "npx",
        "args": [
          "-y",
          "figma-developer-mcp@0.5.0",
          "--figma-api-key=YOUR_FIGMA_PERSONAL_ACCESS_TOKEN",
          "--stdio"
        ],
        "env": {}
      }
    }
  }
}
JSON
복사

Claude Desktop — claude_desktop_config.json

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp@0.5.0",
        "--figma-api-key=YOUR_FIGMA_PERSONAL_ACCESS_TOKEN",
        "--stdio"
      ]
    }
  }
}
JSON
복사

방법 B — 소스 클론 후 빌드

git clone <https://github.com/GLips/Figma-Context-MCP.git>
cd Figma-Context-MCP
npm install -g pnpm
pnpm install
pnpm build
PowerShell
복사

settings.json 예시:

{
  "mcp": {
    "servers": {
      "figma-framelink": {
        "type": "stdio",
        "command": "node",
        "args": [
          "C:/path/to/Figma-Context-MCP/dist/cli.js",
          "--figma-api-key=YOUR_TOKEN",
          "--stdio"
        ]
      }
    }
  }
}
JSON
복사

Figma Personal Access Token 발급

Figma 웹 → 우측 상단 프로필 → Settings

Security 탭 → Personal access tokens

Generate new token

권한 스코프:

•

File content: Read

•

Variables: Read (Variables 사용 시)

•

Library content: Read (라이브러리 분석 시)

발급된 토큰을 안전하게 보관 (한 번만 노출됨)

보안 주의: 토큰은 git에 커밋 금지. .env 또는 OS 환경변수 사용 권장.

명령 팔레트로 추가 (VS Code)

Ctrl+Shift+P → >MCP: Add Server

NPM Package 선택

패키지명: figma-developer-mcp

>MCP: Open User Configuration 으로 설정 파일 열어 API Key 추가

>MCP: Restart Server 또는 자동 시작

동작 확인

Copilot 채팅:

다음 Figma URL의 디자인을 분석해줘:
<https://www.figma.com/design/abcXYZ/My-File?node-id=1-2>
Plain Text
복사

•

도구 목록에 get_figma_data, download_figma_images 등이 보이면 정상

트러블슈팅

증상	원인 / 해결
401 Unauthorized	Token 만료/오타 / 스코프 부족
404 Not Found	fileKey 또는 node-id 잘못 입력
응답 너무 큼	작은 프레임 단위로 nodeId 지정
npx 느림	pnpm install -g figma-developer-mcp로 글로벌 설치