Figma MCP 웹퍼블리싱 자동화 강의

강의 개요

강의 목표

• Figma 디자인을 AI를 활용해 자동으로 웹퍼블리싱할 수 있다
• 실무에 즉시 투입 가능한 수준의 결과물 제작
• 바이브코딩 워크플로우를 통한 생산성 70% 향상

준비물

• 본인이 작업한 Figma 디자인 파일 (반응형 포함)
• Claude AI Pro 계정 (유료)
• 기본적인 HTML/CSS 이해도

강사 소개

• 이온디: 웹퍼블리싱 10년차 이상
• 금융/엔터/병의원/회사/오픈CMS 스킨 제작자로 활동
• 바이브코딩으로 50여개 프로젝트 진행
• 커뮤니티 사이트 약 5개, 자체 서비스 20여개 이상 진행
• 바이브코딩 경력: 25년 봄부터 업무에 10% 활용, 가을부터 70% 이상 활용
• 바이브코딩으로 인한 수익: n천만원

Figma MCP 설치 및 설정 가이드

사전 준비사항

필수 요구사항 - Claude AI Pro 계정 (유료) - Figma 계정 (무료/유료 모두 가능) - Figma Personal Access Token

1단계: Figma Access Token 발급

1-1. Figma 설정 페이지 접속

1. Figma 로그인 후 우측 상단 프로필 클릭
2. Settings 선택
3. 좌측 메뉴에서 Account 선택

1-2. Personal Access Token 생성

1. Personal access tokens 섹션 찾기
2. Generate new token 클릭
3. Token 이름 입력 (예: "Claude MCP")
4. Scopes 설정:
   • ✅ File content (파일 읽기)
   • ✅ Comments (코멘트 읽기/쓰기)
5. Generate token 클릭

중요: 생성된 토큰을 복사해서 안전한 곳에 보관 ⚠️ 이 토큰은 다시 볼 수 없습니다!

2단계: Claude에서 Figma MCP 연동

2-1. Claude.ai 설정

1. Claude.ai 접속 (https://claude.ai)
2. 좌측 하단 설정 아이콘(⚙️) 클릭
3. Feature Preview 선택
4. Model Context Protocol (MCP) 활성화
5. MCP Servers 섹션으로 이동

2-2. Figma MCP 서버 추가

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "여기에_발급받은_토큰_입력"
      }
    }
  }
}

입력 방법: 1. MCP Servers 설정 화면에서 Add Server 클릭 2. 위 JSON 내용 붙여넣기 3. FIGMA_PERSONAL_ACCESS_TOKEN 값을 실제 토큰으로 교체 4. Save 클릭

2-3. 연결 확인

1. 새 대화 시작
2. 좌측 상단 MCP 아이콘 클릭
3. Figma 서버가 연결됨(초록색) 상태인지 확인
4. 사용 가능한 도구:
   • add_figma_file
   • view_node
   • read_comments
   • post_comment

3단계: Figma에서 노드 링크 가져오기

3-1. 레이어 선택 및 링크 복사

방법 1: 우클릭 메뉴 1. Figma에서 원하는 레이어/프레임 선택 2. 우클릭 → Copy/Paste → Copy link to selection 3. 링크가 클립보드에 복사됨

방법 2: 단축키 - Mac: Cmd + L - Windows: Ctrl + L

3-2. 복사된 링크 형식

https://www.figma.com/design/JFGurHe7UNMrJr3L3yXOln/DEV_KDA-공유용-?node-id=2029-9385&m=dev

링크 구조 분석: - JFGurHe7UNMrJr3L3yXOln: 파일 키 (file key) - node-id=2029-9385: 노드 ID - m=dev: 개발자 모드 (선택사항)

4단계: Claude Code에서 Figma MCP 설치

4-1. Node.js 환경 확인

# Node.js 버전 확인 (v18 이상 권장)
node --version

# npm 버전 확인
npm --version

4-2. Figma MCP 서버 설치

# 전역 설치
npm install -g @modelcontextprotocol/server-figma

# 또는 프로젝트별 설치
npm install @modelcontextprotocol/server-figma

4-3. 환경 변수 설정

Mac/Linux (.zshrc 또는 .bashrc):

export FIGMA_PERSONAL_ACCESS_TOKEN="your_token_here"

Windows (PowerShell):

$env:FIGMA_PERSONAL_ACCESS_TOKEN="your_token_here"

5단계: Claude에서 Figma 디자인 불러오기

5-1. 기본 사용법

이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/JFGurHe7UNMrJr3L3yXOln/DEV_KDA-공유용-?node-id=2029-9385&m=dev

5-2. Claude의 처리 과정

1. Figma URL 인식
2. 파일 키 추출: JFGurHe7UNMrJr3L3yXOln
3. 노드 ID 추출: 2029-9385
4. Figma API 호출: add_figma_file 도구 사용
5. 디자인 정보 분석 (레이어 구조, 스타일, 크기, 텍스트)
6. HTML/CSS 생성

6단계: Figma MCP 도구 상세 설명

7단계: 문제 해결 (Troubleshooting)

문제 1: "413 Request too large" 오류

• 원인: Figma 파일이 8000px 초과
• 해결: 섹션별로 분리 (Header, Hero, Content, Footer)

문제 2: "MCP 서버 연결 실패"

• 원인: Access Token 오류
• 해결: Token 재확인/재발급, MCP 설정 업데이트, Claude 재시작

문제 3: "Figma API rate limit"

• 원인: API 요청 횟수 초과
• 해결: 1-2분 대기, 동시 요청 줄이기

문제 4: "노드를 찾을 수 없음"

• 원인: node-id 오류
• 해결: Figma에서 링크 다시 복사, node-id 형식 확인 (숫자-숫자)

figma-desktop MCP (로컬 서버) 설정 가이드

개요

figma-desktop MCP는 Figma 데스크톱 앱과 직접 통신하여 더 상세한 디자인 정보(CSS 코드, 정확한 색상 값 등)를 추출할 수 있는 로컬 MCP 서버입니다.

Step 1: Figma 데스크톱 앱에서 MCP 서버 활성화

1. Figma 데스크톱 앱 실행 (최신 버전 필수)
2. Design 파일 열기
3. Shift+D 눌러 Dev Mode 전환
4. 우측 패널에서 "Enable desktop MCP server" 토글 ON

Figma 앱 상단 메뉴 → Plugins → Development → MCP Server에서도 확인 가능

Step 2: Claude Code에서 MCP 서버 추가

터미널에서 다음 명령어 실행:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Step 3: Claude Code 재시작

설정 변경사항이 반영되도록 Claude Code를 완전히 종료 후 재시작합니다.

Step 4: 설정 확인

claude mcp list

출력 결과:

figma-desktop: http://127.0.0.1:3845/mcp (HTTP) - ✓ Connected

figma-desktop MCP 도구 목록

figma-desktop vs figma (웹 API) 비교

문제 해결

"No session found for sessionId" 오류

• 원인: Figma 앱과 Claude Code 간 세션 연결 끊김
• 해결:
  1. Figma 데스크톱 앱에서 Dev Mode가 활성화되어 있는지 확인
  2. "Enable desktop MCP server" 토글 OFF → ON
  3. Claude Code 완전 종료 후 재시작
  4. 새 대화 시작

"Failed to connect" 오류

• 원인: Figma 앱이 실행 중이지 않거나 MCP 서버 비활성화
• 해결:
  1. Figma 데스크톱 앱 실행 확인
  2. Dev Mode 활성화 (Shift+D)
  3. MCP 서버 활성화 확인

포트 충돌

• 원인: 포트 3845가 다른 프로세스에서 사용 중

• 해결:

  # 포트 사용 확인
  lsof -i :3845
  
  # 해당 프로세스 종료
  kill -9 <PID>
  

권장 워크플로우

1. 구조 파악: figma (웹 API)로 전체 구조 확인
2. 상세 구현: figma-desktop으로 CSS 코드 추출
3. 코멘트 확인: figma (웹 API)로 디자이너 코멘트 확인

// 사용 예시
이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/파일키/파일명?node-id=노드ID&m=dev