카테고리 없음

Cursor + Figma MCP 가이드 - Figma MCP 서버 설치 및 설정

퇴근하고싶은 2025. 10. 30. 09:00

MCP 서버란?

MCP(Model Context Protocol) 서버는 Cursor와 Figma 사이의 "통역사" 역할을 합니다. Cursor가 "저 Figma 디자인 읽어줘"라고 요청하면, MCP 서버가 Figma API에 접속해서 디자인 정보를 가져와 Cursor에게 전달합니다.

간단한 비유

Cursor (한국어) ←→ MCP 서버 (통역) ←→ Figma (영어)

설치 방법 선택하기

Figma MCP를 설치하는 방법은 크게 두 가지가 있습니다:

  1. Framelink Figma MCP (추천 ⭐) - 간단하고 안정적
  2. Cursor Talk to Figma MCP - 기능이 많지만 복잡함

이 가이드에서는 Framelink Figma MCP를 사용하겠습니다. 설치가 훨씬 쉽고 대부분의 경우에 충분합니다.

Step 1: Cursor 설정 파일 위치 확인

1-1. Cursor 설정 폴더 찾기

Cursor의 MCP 설정은 특정 폴더의 JSON 파일에 저장됩니다.

Windows 11 경로:

C:\Users\사용자이름\.cursor\mcp.json

💡 참고: "사용자이름" 부분은 여러분의 Windows 사용자 이름으로 바꿔야 합니다

1-2. 탐색기로 폴더 열기

  1. 윈도우 탐색기를 엽니다 (Win + E)
  2. 주소 창에 다음을 입력하고 Enter:
 
   %USERPROFILE%\.cursor
  1. .cursor 폴더가 열립니다
  2. 이 폴더에 mcp.json 파일이 있는지 확인합니다

1-3. 파일이 없는 경우

만약 .cursor 폴더나 mcp.json 파일이 없다면:

  1. 폴더가 없으면 직접 만듭니다:
    • 탐색기 상단 주소창에 %USERPROFILE% 입력 후 Enter
    • 빈 공간에서 마우스 오른쪽 버튼 > 새로 만들기 > 폴더
    • 폴더 이름: .cursor
  2. 파일이 없으면 다음 단계에서 만들 것입니다

Step 2: Figma API 토큰 준비

2-1. 토큰 파일 열기

3편에서 저장한 figma_token.txt 파일을 엽니다:

  1. 탐색기로 문서 폴더 이동
  2. figma_token.txt 파일을 메모장으로 엽니다
  3. 토큰을 복사합니다 (Ctrl + A → Ctrl + C)

토큰 형태:

figd_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚠️ 중요: 토큰을 복사할 때 앞뒤 공백이 없도록 주의하세요!

Step 3: MCP 설정 파일 작성

3-1. mcp.json 파일 생성 또는 열기

  1. 메모장을 새로 엽니다
    • 시작 메뉴 > "메모장" 검색 > 실행
  2. 또는 기존 mcp.json 파일이 있다면 메모장으로 엽니다

3-2. 설정 코드 입력

메모장에 다음 코드를 정확히 입력합니다:

json
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_TOKEN_HERE",
        "--stdio"
      ]
    }
  }
}

3-3. 토큰 넣기

  1. 위 코드에서 YOUR_TOKEN_HERE 부분을 찾습니다
  2. 이 부분을 삭제하고 실제 Figma API 토큰을 붙여넣습니다
  3. 최종 결과 예시:
 
json
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=figd_ABC123XYZ789...",
        "--stdio"
      ]
    }
  }
}

⚠️ 주의사항:

  • 따옴표("), 콤마(,), 대괄호([]), 중괄호({})를 정확히 입력하세요
  • 토큰은 따옴표 안에 넣지 않습니다
  • 오타가 있으면 작동하지 않습니다!

3-4. 파일 저장

  1. 파일 > 다른 이름으로 저장 클릭
  2. 저장 위치를 다음으로 설정:
 
   C:\Users\사용자이름\.cursor\
  1. 파일 이름: mcp.json
  2. 파일 형식: 모든 파일 (.) ← 중요!
  3. 인코딩: UTF-8
  4. 저장 버튼 클릭

💡 중요: 파일 형식을 "모든 파일"로 선택하지 않으면 mcp.json.txt로 저장될 수 있습니다!

3-5. 파일명 확인

탐색기에서 다음을 확인합니다:

  • 파일 이름이 mcp.json (확장자 없이)
  • .txt가 붙어있지 않은지 확인
  • 파일 아이콘이 JSON 파일 아이콘으로 표시됨

Step 4: 설정 적용 및 확인

4-1. Cursor 완전히 종료

  1. Cursor 창의 X 버튼을 클릭합니다
  2. 작업 표시줄에 Cursor 아이콘이 남아있다면 마우스 오른쪽 버튼 클릭 > "종료"
  3. 작업 관리자에서도 확인 (선택사항):
    • Ctrl + Shift + Esc로 작업 관리자 열기
    • "Cursor" 프로세스가 있다면 선택하고 "작업 끝내기"

4-2. Cursor 다시 실행

  1. 바탕화면 또는 시작 메뉴에서 Cursor 실행
  2. 완전히 로드될 때까지 기다립니다 (약 5-10초)

4-3. MCP 설정 확인

  1. Cursor 우측 상단의 설정 아이콘 ⚙️ 클릭
  2. 왼쪽 메뉴에서 "MCP" 또는 "Tools" 찾기
  3. "MCP Servers" 또는 "MCP Tools" 섹션을 확인합니다
  4. 다음과 같이 표시되어야 합니다:
 
   Framelink Figma MCP  [토글 스위치]

4-4. MCP 서버 활성화

  1. "Framelink Figma MCP" 옆의 토글 스위치를 ON 으로 전환합니다
  2. 스위치가 파란색 또는 초록색으로 변합니다
  3. 잠시 기다리면 아래에 연결 상태가 표시됩니다:
    • ✅ "Connected" - 성공!
    • 🟢 "Running" - 성공!
    • 🔴 "Error" - 문제 발생 (아래 문제 해결 참조)

Step 5: 연결 테스트

5-1. AI 채팅 열기

  1. 왼쪽 사이드바의 채팅 아이콘 🤖 클릭
  2. 또는 단축키: Ctrl + L
  3. 오른쪽에 AI 채팅창이 열립니다

5-2. MCP 도구 확인

채팅창 하단에 작은 아이콘들이 표시됩니다:

  • 📎 파일 첨부
  • 🔧 도구 (Tools)
  • 기타 아이콘들

"🔧 Tools" 아이콘을 클릭하면 사용 가능한 MCP 도구 목록이 나타나야 합니다:

  • get_figma_file
  • get_figma_node
  • 기타 Figma 관련 도구들

이 도구들이 보이면 MCP 연결이 성공한 것입니다! 🎉

5-3. 간단한 테스트 (선택사항)

채팅창에 다음과 같이 입력해봅니다:

Figma MCP 서버가 연결되어 있나요?

AI가 다음과 같이 응답하면 정상입니다:

네, Framelink Figma MCP 서버가 성공적으로 연결되어 있습니다.
현재 사용 가능한 도구는 다음과 같습니다:
- get_figma_file
- get_figma_node
...

자주 발생하는 문제 해결

문제 1: "Error" 또는 "Failed to connect" 표시

원인 1: API 토큰이 잘못됨

  • mcp.json 파일을 다시 열어서 토큰을 확인합니다
  • 토큰에 공백이나 줄바꿈이 없는지 확인합니다
  • Figma 설정에서 토큰이 삭제되지 않았는지 확인합니다

원인 2: JSON 문법 오류

  • mcp.json 파일의 콤마(,), 중괄호, 대괄호를 다시 확인합니다
  • 온라인 JSON 검증기로 확인: https://jsonlint.com
  • Step 3-2의 코드를 다시 복사해서 붙여넣습니다

원인 3: Node.js 경로 문제 명령 프롬프트에서 다음을 확인:

node --version
npm --version

버전이 표시되지 않으면 4편으로 돌아가서 Node.js를 다시 설치합니다

문제 2: mcp.json 파일이 "텍스트 문서"로 표시됨

  1. 탐색기에서 파일을 찾습니다
  2. 파일명을 mcp.json에서 mcp (확장자 제거)로 변경합니다
  3. 다시 mcp.json으로 변경합니다
  4. 또는 탐색기 설정에서 "파일 확장명" 표시를 활성화하고 .txt 부분을 삭제합니다

문제 3: MCP 메뉴가 Cursor 설정에 없음

  1. Cursor 버전을 확인합니다:
    • Help > About Cursor
    • 최신 버전으로 업데이트합니다
  2. 설정 검색창에 "mcp" 입력해봅니다
  3. 여전히 없다면 Cursor를 재설치합니다

문제 4: "npx: command not found" 오류

해결방법:

  1. PowerShell을 관리자 권한으로 실행
  2. 다음 명령어 실행:
 
powershell
npm install -g npm@latest
  1. Cursor를 재시작합니다

고급 설정 (선택사항)

여러 MCP 서버 추가

하나의 mcp.json 파일에 여러 MCP 서버를 설정할 수 있습니다:

json
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR_TOKEN", "--stdio"]
    },
    "GitHub MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github", "--stdio"]
    }
  }
}

로그 확인

문제가 발생하면 Cursor의 개발자 도구에서 로그를 확인할 수 있습니다:

  1. Cursor에서 Ctrl + Shift + P (명령 팔레트)
  2. "Toggle Developer Tools" 입력하고 Enter
  3. "Console" 탭에서 MCP 관련 오류 메시지 확인

체크리스트: 5편 완료 확인

다음 항목을 모두 완료했는지 확인하세요:

  • .cursor 폴더 위치를 확인했다
  • Figma API 토큰을 준비했다
  • mcp.json 파일을 작성했다
  • 토큰을 정확히 입력했다
  • 파일을 올바른 위치에 저장했다
  • 파일 확장자가 .json인지 확인했다
  • Cursor를 재시작했다
  • MCP 설정에서 서버를 활성화했다
  • "Connected" 또는 "Running" 상태가 표시된다
  • AI 채팅에서 MCP 도구가 보인다
반응형