Figma Plugin MCP 실행하지 않고 클로드 데스크탑(코드) 연결하는 방법

피그마 계정이 관리자 권한이 아닐경우 사용하는 방법입니다.

Figma-developer-mcp 와 Figma API를 통해 디자인 데이터를 불러오거나 수정할 수 있습니다. 이를 위해서는 설정 파일 작성과 Figma 개인 액세스 토큰 발급이 필요합니다.

 

Figma Developer MCP 소개
  Figma Developer MCP는 Figma 디자인을 AI 코딩 도구(Claude, Cursor 등)와 연결하는 Model Context Protocol 서버입니다.
 [Claude/Cursor] → [MCP 서버] → [Figma API] → [디자인 데이터] → [디자인 메타데이터] → [AI 처리] → [생성된 코드] 

 

주요 기능
  1. Figma 디자인 데이터 접근
    - Figma 파일, 프레임, 그룹의 메타데이터 가져오기
    - 레이아웃과 스타일 정보 추출
    - 디자인 구조 분석
  2. AI 최적화
    - 불필요한 정보 필터링
    - 관련성 높은 디자인 정보만 제공
    - AI 응답 정확도 향상

 

  사용 방법
  1. Figma 링크 붙여넣기
    - 파일, 프레임, 그룹 링크 지원
  2. 디자인 구현 요청
    - "이 디자인을 구현해줘"
    - "이 컴포넌트를 React로 만들어줘"
  3. 자동 코드 생성
    - Figma 메타데이터 기반 코드 작성
    - 레이아웃, 스타일, 구조 반영

 

  활용 예시
  - Figma 디자인 링크 제공 → HTML/CSS/React 코드 생성
  - 컴포넌트 스타일 추출 → 코드 스타일 적용
  - 레이아웃 구조 분석 → 컴포넌트 구조 생성
  이제 Figma 링크를 제공하시면 해당 디자인을 코드로 변환할 수 있습니다.

 

  plugin MCP 서버 방식
  기존 플러그인 방식
  - Figma 내에서 플러그인 실행 필요
  - Figma UI에서 작업
  - 제한된 기능

  Figma Developer MCP + Figma API 방식 (현재)
  - 코드 에디터에서 직접 사용
  - Figma 링크만 붙여넣으면 됨
  - 플러그인 실행 불필요

 

1. Claude Desktop 설정

1.1 설정 파일 위치 (해당 파일이 없으면 새로 생성)

 

클로드와 상관없이 설치하는 방법 

https://apidog.com/kr/blog/figma-mcp-kr/

npm install -g figma-developer-mcp

 

위 명령어를 실행하면 전역 환경에 Figma MCP 서버가 설치됩니다. 설치 후 경로를 확인하여 Claude Desktop 설정에 반영해야 합니다.

 

하지만 claude 에서는 npx 방법으로 임시로 다운로드해서 사용하기 때문에  Claude에서는 npx가 더 좋습니다. (인터넷 필요)
  

이유:
  1. 버전 고정: @0.5.0으로 안정성 보장
  2. 자동 관리: 설치/업데이트 신경 안 써도 됨
  3. 격리된 환경: 다른 프로그램과 충돌 없음

 

자동차로 비유하면:
  - claude_desktop_config.json = 자동차 키 + 시동 버튼
  - figma-developer-mcp = 실제 엔진

  프로그램으로 비유하면:
  - claude_desktop_config.json = 바로가기 아이콘 + 실행 옵션
  - figma-developer-mcp = 실제 .exe 프로그램

  작동 과정
  1. Claude가 설정 파일 읽기
     ↓
  2. "npx -y figma-developer-mcp@0.5.0" 명령 실행
     ↓
  3. MCP 서버 시작 (Figma 토큰 사용)
     ↓
  4. Figma API와 통신 가능

  요약: 설정 파일은 "실행 방법"을 정의하고, npm 패키지는 "실제 프로그램"입니다.

 

 

클로드 설정 파일

"C:\Users\{사용자}\AppData\Roaming\Claude\claude_desktop_config.json"

 

1.2 설정 파일 내용

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp@0.5.0"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "{피그마에서 발급받은 키}"
      }
    }
  }
}

 

2. 피그마 개인 액세스 토큰 발급

2.1 토큰 발급 과정

1. Figma → Settings (로그인 후 프로필 클릭) → Security → 스크롤 제일 아래 Personal access tokens에서 Generate new token 클릭
2. 토큰명 입력 (예: "Claude Code Integration") → Expiration 및 권한 체크
3. 발급받은 토큰을 설정 파일에 저장

 

3. AI에 명령

AI에게 다음과 같이 명령:

피그마 API 와 Figma Developer MCP 를 사용하기 위해서 키를 알려줄게 {key} 그리고 피그마 API 연결을 위해 C:\Users\{사용자}\AppData\Roaming\Claude\claude_desktop_config.json 파일을 고 Figma Developer MCP 도구를 이용해서 연결해 줘. 그리고 전달한 URL을 읽을 때마다 저장하는 figma_node.json 파일은 전역 관리를 위해 C:\Users\{사용자}\AppData\Roaming\Claude\figma_node.json 여기에 만들고 새로운 URL을 줄 때마다 파일을 새로 만들지 말고 덮어쓰기로 해줘.

 

4. 실제 작업에 사용하기

4.1 원하는 부분 선택

1. 피그마 웹 브라우저에서 요소 선택 → 우클릭 → Copy as → Copy link to selection
2. 피그마 데스크톱 앱에서 요소 선택 → 우클릭 → Copy link to selection
3. 단축키: 요소 선택 후 Ctrl+L (Windows) 또는 Cmd+L (Mac)

4.2 복사한 링크를 Claude 프롬프트에 붙여넣기

1. AI에게 "URL 분석해서 정보 가져와줘"
2. 정보 확인 후 원하는 작업 시작

끝으로, 이 방법은 피그마 플러그인 MCP 서버보다는 절차가 길고 복잡해 보일 수 있지만, 관리자 권한이 필요 없고 이미지를 다운로드할 수 있다는 장점이 있습니다.

피그마와 AI를 연동해 작업하시는 분들에게 도움이 되길 바랍니다.