Figma MCP UI 설정 가이드

• Figma MCP를 활용해 디자인 정보를 자동으로 가져오고, 필요한 이미지·아이콘 리소스를 자동 추가하여 UI 개발 속도를 향상합니다.
• 반복 작업을 최소화해 개발 생산성과 효율성을 높입니다.

1. 기본 설정

1.1 Node.js 설치

• Node.js 다운로드 및 설치
  👉 https://nodejs.org/ko/download

---

1.2 Figma Export 환경 구성 (JavaScript)

Figma Export를 위해 Python 또는 JavaScript 사용

📦 필수 npm 패키지 설치

npm install axios        # JavaScript 통신
npm install sharp        # PNG → WebP 변환
npm install svg2vectordrawable   # SVG → VectorDrawable 변환 (선택)

---

2. Figma API Key 발급

1. Figma 접속
2. Profile → Settings 이동
3. Security 메뉴 선택
4. Personal Access Token 발급

---

3. 안드로이드 설정

3.1 Android Studio MCP 연결

Android Studio의 MCP 연결 도구를 사용하여 Figma MCP 연결

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=***발급토큰***",
        "--stdio"
      ]
    }
  }
}

---

3.2 Figma TOKEN KeyChain 등록 (macOS)

✅ 최초 등록

security add-generic-password -a "$USER" -s "FIGMA_TOKEN" -w "***발급토큰***"

🔄 토큰 만료 후 재등록

security add-generic-password -a "$USER" -s "FIGMA_TOKEN" -w "***새 발급토큰***" -U

---

4. Figma Asset Export 스크립트 작성

4.1 figma_export.js 파일 생성

• Figma API를 통해 Node 추출
• Assets 데이터 다운로드 처리

---

4.2 실행 방법

node figma_export.js "Figma URL"

---

5. 정책 및 요구사항 명세

• 요구사항 및 정책은 AGENTS.md 파일에 명세

---

6. 작업 완료 후

• AI Agent를 통해 Figma URL 화면 생성 요청