Figma REST API MCP Server

Figma 시안을 분석하여 HTML/CSS/JavaScript 코드로 변환하는 MCP(Model Context Protocol) 서버입니다

This project is a customized version based on: https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

🚀 빠른 설치 가이드

1. 프로젝트 클론 및 의존성 설치

git clone <your-repo-url>
cd figmaMCP_server
npm install

2. 환경변수 설정 (중요!)

# .env.example을 복사하여 .env 파일 생성
cp .env.example .env

# .env 파일을 열어서 실제 Figma 토큰으로 수정
# FIGMA_ACCESS_TOKEN=your-actual-figma-token-here

Figma Personal Access Token 발급 방법:

1. Figma 웹사이트 로그인
2. Settings → Personal Access Tokens
3. "Generate new token" 클릭
4. 생성된 토큰을 .env 파일에 입력

3. 빌드

npm run build

4. MCP 클라이언트 연결

Claude Desktop에서 사용:

claude_desktop_config.json 파일에 추가:

{
  "mcpServers": {
    "figma-rest-api": {
      "command": "node",
      "args": ["/절대/경로/figmaMCP_server/dist/server.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

Cursor에서 사용:

Settings → User Settings (JSON)에 추가:

{
  "mcp": {
    "servers": {
      "figma-rest-api": {
        "command": "node",
        "args": ["/절대/경로/figmaMCP_server/dist/server.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-figma-token"
        }
      }
    }
  }
}

🛠️ 사용 가능한 도구들

1. get_figma_file - 전체 파일 구조 분석
2. get_figma_components - 컴포넌트 목록 조회
3. get_figma_styles - 디자인 시스템 (색상, 폰트) 조회
4. get_figma_nodes - 특정 노드들 상세 분석
5. extract_text_content - 개발 설명 & FTP 정보 추출
6. get_node_styles - CSS 스타일 & HTML 제안
7. export_figma_images - 🖼️ 이미지 파일 다운로드 (아이콘, 로고 등)

💡 사용 예시

AI에게 다음과 같이 요청하세요:

"이 Figma 시안을 웹페이지로 만들어줘:
https://www.figma.com/file/ABC123DEF456/My-Design

1. 시안에 적힌 개발 설명을 읽어줘
2. FTP 정보도 확인해줘
3. 각 버튼의 CSS 스타일을 분석해줘
4. 아이콘과 이미지들을 PNG로 다운로드해줘
5. React 컴포넌트로 만들어줘"

🖼️ 이미지 다운로드 예시

"로고와 아이콘들을 모두 PNG로 다운받아줘.
노드 ID는: ['1:123', '1:124', '1:125']
고해상도로 2배 크기로 받고 싶어"

결과:

• 📁 downloads/ABC123DEF456_images/
  • 로고_1:123.png
  • 홈_아이콘_1:124.png
  • 검색_버튼_1:125.png

🔧 개발 스크립트

npm run build    # TypeScript 빌드
npm run dev      # 개발 모드 실행
npm start        # 프로덕션 모드 실행

📁 프로젝트 구조

Comp/
├── server.ts           # MCP 서버 메인 코드
├── dist/              # 빌드 결과 (Git 제외)
├── .env               # 환경변수 (Git 제외)
├── .env.example       # 환경변수 예시
├── package.json       # 프로젝트 설정
└── tsconfig.json      # TypeScript 설정

⚠️ 주의사항

• 절대로 .env 파일을 Git에 커밋하지 마세요 (Figma 토큰 유출 위험)
• Figma Personal Access Token은 개인별로 발급받아야 합니다
• MCP 클라이언트 재시작 후 도구가 활성화됩니다

🐛 문제해결

"Cannot find module" 오류 발생 시:

rm -rf node_modules package-lock.json
npm install
npm run build

환경변수 인식 안됨:

# .env 파일이 프로젝트 루트에 있는지 확인
ls -la .env

# .env 파일 내용 확인 (토큰 제외하고)
cat .env

MCP 도구가 나타나지 않음:

1. 클라이언트(Claude Desktop/Cursor) 재시작
2. 설정 파일의 경로가 절대경로인지 확인
3. dist/server.js 파일이 존재하는지 확인

📞 지원

문제가 발생하면 의견을 남겨주세요!