개발환경 구축

Cursor + Figma MCP 가이드 - Cursor와 Figma MCP 연동하기

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

연동 확인 프로세스

지금까지 우리는:

  1. ✅ Cursor 설치
  2. ✅ Figma 계정 생성
  3. ✅ API 토큰 발급
  4. ✅ Node.js 설치
  5. ✅ MCP 서버 설정

이제 모든 부품이 제대로 연결되었는지 확인할 차례입니다!

Step 1: MCP 서버 상태 상세 확인

1-1. Cursor 설정 열기

  1. Cursor를 실행합니다
  2. 우측 상단의 설정 아이콘 ⚙️ 클릭
  3. 또는 단축키: Ctrl + ,

1-2. MCP 섹션 찾기

  1. 좌측 메뉴에서 다음 중 하나를 찾습니다:
    • "MCP"
    • "Tools"
    • "MCP Servers"
  2. 클릭하여 MCP 설정 페이지를 엽니다

1-3. 서버 상태 확인

"Framelink Figma MCP" 항목을 찾습니다:

정상 상태:

✅ Framelink Figma MCP
   Status: Connected
   Tools: 5 available
   [🟢 ON] [⚙️ Settings] [🗑️ Delete]

문제 상태:

❌ Framelink Figma MCP
   Status: Error - Failed to connect
   [🔴 OFF] [⚙️ Settings] [🗑️ Delete]

1-4. 도구 목록 확인

서버가 연결되면 다음 도구들이 사용 가능해야 합니다:

  • get_figma_file - Figma 파일 정보 가져오기
  • get_figma_node - 특정 노드(요소) 정보 가져오기
  • get_figma_image - 이미지 가져오기
  • 기타 Figma 관련 도구들

Step 2: Composer 모드에서 MCP 사용

2-1. Composer 모드란?

Cursor의 Composer는 AI가 여러 파일을 동시에 수정하고 생성할 수 있는 강력한 모드입니다. MCP는 주로 Composer 모드에서 작동합니다.

2-2. Composer 열기

  1. 단축키: Ctrl + I (아이 대문자)
  2. 또는 상단 메뉴에서 "Cursor > Composer" 클릭
  3. 새로운 Composer 창이 화면 중앙에 나타납니다

2-3. Agent 모드 활성화

Composer 창에서:

  1. 입력창 위쪽의 "Agent" 버튼이 있는지 확인
  2. Agent 모드가 활성화되어 있어야 MCP를 사용할 수 있습니다
  3. 버튼이 파란색이면 활성화된 것입니다

💡 참고: Agent 모드에서만 MCP 도구를 자동으로 사용할 수 있습니다

2-4. MCP 도구 표시 확인

Composer 입력창 하단을 확인하면:

  • 📎 (파일 첨부)
  • 🔧 (도구) ← 이 아이콘을 클릭합니다
  • 사용 가능한 MCP 도구 목록이 나타나야 합니다

Step 3: 첫 번째 연동 테스트

3-1. 테스트용 Figma 파일 준비

실제 연동을 테스트하기 위해 간단한 Figma 파일을 사용합니다.

방법 1: 자신의 파일 사용

  • 2편에서 만든 "Hello Figma!" 디자인 파일 사용

방법 2: 공개 템플릿 사용

  1. Figma Community에서 무료 템플릿 찾기
  2. 예: "Simple Login Screen" 검색
  3. "Open in Figma" 또는 "Duplicate" 클릭

3-2. Figma 파일 링크 복사

  1. Figma에서 사용할 파일을 엽니다
  2. 다음 중 한 가지 방법으로 링크를 복사합니다:

방법 A: 전체 파일 링크

  1. 브라우저 주소창의 URL을 복사합니다
  2. 형태: https://www.figma.com/design/ABC123...

방법 B: 특정 프레임 링크

  1. Figma 캔버스에서 프레임을 선택합니다
  2. 마우스 오른쪽 버튼 클릭
  3. "Copy link to selection" 선택
  4. 형태: https://www.figma.com/design/ABC123...?node-id=1-123

💡 팁: 특정 프레임 링크를 사용하면 더 정확한 결과를 얻을 수 있습니다

3-3. Cursor Composer에서 테스트

  1. Cursor의 Composer를 엽니다 (Ctrl + I)
  2. Agent 모드가 켜져 있는지 확인합니다
  3. 다음과 같이 입력합니다:
 
   이 Figma 디자인을 확인하고 설명해줘:
   [여기에 Figma 링크 붙여넣기]

예시:

이 Figma 디자인을 확인하고 설명해줘:
https://www.figma.com/design/ABC123xyz/Test-Design?node-id=1-2

3-4. AI 응답 확인

AI가 다음과 같은 과정을 거칩니다:

  1. MCP 도구 호출:
 
   🔧 Using tool: get_figma_node
  1. Figma 정보 가져오기:
 
   Fetching Figma design...
  1. 분석 및 설명:
 
   이 디자인은 다음과 같은 요소로 구성되어 있습니다:
   - 배경색: #F5F5F5
   - 텍스트: "Hello Figma!" (32px, Bold)
   - 버튼: 파란색 배경 (#0066FF), 모서리 반경 8px
   - 레이아웃: 수직 중앙 정렬
   ...

성공적으로 Figma 정보를 가져와서 설명했다면 연동이 완료된 것입니다! 🎉

Step 4: 연동 문제 해결

문제 1: AI가 MCP를 사용하지 않음

증상: Figma 링크를 제공했는데 AI가 "Figma 파일을 직접 볼 수 없습니다"라고 응답

해결방법:

  1. Agent 모드가 켜져 있는지 확인합니다
  2. Composer 대신 일반 채팅을 사용하고 있지 않은지 확인합니다
  3. 프롬프트를 더 명확하게 작성합니다:
 
   Figma MCP 도구를 사용해서 이 링크의 디자인을 분석해줘:
   [링크]

문제 2: "Failed to fetch Figma file" 오류

원인 1: API 토큰 오류

  1. mcp.json 파일을 엽니다
  2. API 토큰이 정확한지 확인합니다
  3. Figma 설정에서 토큰이 여전히 활성 상태인지 확인합니다

원인 2: 파일 권한 문제

  1. Figma 파일이 비공개인 경우 접근이 안 될 수 있습니다
  2. 파일을 "Anyone with the link can view"로 공유 설정 변경:
    • Figma 우측 상단 "Share" 클릭
    • "Anyone with the link" 선택
    • "Can view" 권한 부여

문제 3: "Rate limit exceeded" 오류

원인: API 호출 횟수 제한 초과

해결방법:

  1. 잠시 기다린 후 (1-2분) 다시 시도합니다
  2. 무료 Figma 계정의 경우 API 호출 제한이 있습니다
  3. 한 번에 너무 많은 요청을 보내지 않습니다

Step 5: 성능 최적화

5-1. MCP 응답 속도 개선

mcp.json 파일에 타임아웃 설정을 추가할 수 있습니다:

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

timeout: 30000 = 30초 (밀리초 단위)

5-2. 캐시 활용

Figma MCP는 자동으로 일부 데이터를 캐시합니다. 같은 파일을 여러 번 조회하면 두 번째부터는 더 빠릅니다.

5-3. 선택적 데이터 요청

큰 Figma 파일의 경우, 전체 파일 대신 특정 프레임만 요청하세요:

  • ✅ 좋음: 프레임 링크 사용 (node-id 포함)
  • ❌ 나쁨: 전체 파일 링크 사용

Step 6: 고급 MCP 기능 활용

6-1. 여러 프레임 동시 분석

다음 두 Figma 프레임을 비교해줘:
1. [프레임1 링크]
2. [프레임2 링크]

차이점과 공통점을 설명해줘.

6-2. 디자인 변수 추출

이 Figma 디자인에서 사용된 모든 색상, 폰트, 간격을 추출해줘:
[Figma 링크]

6-3. 컴포넌트 구조 파악

이 Figma 파일의 컴포넌트 구조를 분석하고 계층도를 만들어줘:
[Figma 링크]

Step 7: 일반 채팅과 Composer 차이 이해

일반 채팅 (Ctrl + L)

  • 간단한 질문과 답변
  • 코드 스니펫 생성
  • MCP 사용 제한적

Composer (Ctrl + I)

  • 여러 파일 동시 수정
  • 복잡한 프로젝트 생성
  • MCP 완전 활용 가능 ⭐

💡 중요: Figma MCP를 사용할 때는 반드시 Composer 모드를 사용하세요!

Step 8: 설정 백업

8-1. mcp.json 백업

설정이 완료되었으니 파일을 백업해둡니다:

  1. .cursor\mcp.json 파일을 복사합니다
  2. 다음 위치에 붙여넣기:
 
   문서\Backups\mcp_backup.json
  1. 날짜를 파일명에 추가하면 좋습니다:
 
   mcp_backup_20251027.json

8-2. 복원 방법

문제가 생기면 백업 파일을 다시 .cursor 폴더로 복사하고 Cursor를 재시작합니다.

유용한 프롬프트 템플릿

디자인 분석

이 Figma 디자인을 분석하고 다음 정보를 추출해줘:
- 사용된 색상 팔레트
- 타이포그래피 (폰트, 크기)
- 레이아웃 구조
- 간격 및 패딩

[Figma 링크]

코드 생성 준비

이 Figma 디자인의 구조를 HTML/CSS로 변환하기 위해 필요한 정보를 정리해줘:
[Figma 링크]

디자인 비교

다음 두 디자인의 차이점을 분석해줘:
버전 1: [링크1]
버전 2: [링크2]

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

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

  • MCP 서버 상태가 "Connected"로 표시된다
  • Composer 모드를 열 수 있다 (Ctrl + I)
  • Agent 모드가 활성화되어 있다
  • MCP 도구 목록을 확인했다
  • Figma 파일 링크를 복사할 수 있다
  • AI가 Figma 링크를 분석할 수 있다
  • 테스트가 성공적으로 완료되었다
  • mcp.json 파일을 백업했다
반응형