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

이온디 2026.04.27 126 0

강의 개요

항목 내용
강의명 Figma MCP를 활용한 AI 웹퍼블리싱 실무
기간 4주 (주 1회, 회당 2시간)
수강료 200만원
강사 이온디 (웹퍼블리싱 10년차, 바이브코딩 전문가)
수강 대상 웹디자이너, 퍼블리셔, 프론트엔드 개발자

강의 목표

  • 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 도구 상세 설명

도구 용도
add_figma_file Figma 파일을 Claude 컨텍스트에 추가
view_node 특정 노드의 상세 정보 및 스크린샷 (⚠️ 8000px 제한)
read_comments 파일의 모든 코멘트 가져오기
post_comment Figma에 코멘트 남기기

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 서버입니다.

MCP 타입 연결 방식 기능
figma (웹 API) 클라우드 썸네일, 코멘트, 기본 구조
figma-desktop (로컬) 로컬 HTTP CSS 코드, 디자인 토큰, Code Connect

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 도구 목록

도구 용도
get_design_context 선택된 노드의 CSS 코드 및 디자인 정보 추출
get_screenshot 노드 스크린샷 캡처
get_metadata 페이지/노드 구조 메타데이터 (XML 형식)
get_variable_defs 디자인 변수 정의 (색상, 간격 등)
create_design_system_rules 디자인 시스템 규칙 자동 생성
get_figjam FigJam 노드 정보 (FigJam 파일 전용)

figma-desktop vs figma (웹 API) 비교

기능 figma-desktop figma (웹 API)
CSS 코드 추출 ✅ 가능 ❌ 불가
정확한 색상/간격 값 ✅ 가능 △ 제한적
썸네일 이미지 ✅ 가능 ✅ 가능
코멘트 읽기/쓰기 ❌ 불가 ✅ 가능
디자인 변수 추출 ✅ 가능 ❌ 불가
오프라인 사용 ❌ 불가 ❌ 불가
연결 안정성 △ 세션 관리 필요 ✅ 안정적

문제 해결

"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

댓글 0

목록 보기
댓글을 작성하려면 로그인하세요.
  • 첫 댓글을 남겨보세요.
목록으로