Figma 디자인을 Next.js 코드로 자동 생성하는 MCP & Windsurf 활용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자 및 UI/UX 디자이너
• Next.js 프로젝트 사용자
• AI 도구와 Figma 연동을 원하는 개발자
• 난이도: 중급~고급 (MCP 설정, API 토큰 관리, CLI 명령어 사용 기초 필요)

핵심 요약

• ⚡ MCP 서버 설정으로 Figma 디자인 자동 코드 생성
• figma-developer-mcp 명령어를 통해 Figma의 색상, 폰트, 레이아웃 데이터를 Next.js 컴포넌트로 변환
• 🎨 디자인 시스템과 완전히 동기화된 React 컴포넌트 생성
• Sonnet 3.7 AI 모델이 Figma의 실제 스타일 토큰을 기반으로 코드 생성
• 🔁 반복적 디자인 업데이트 시 자동 재생성
• Figma 디자인 변경 시 MCP: Reload Servers 명령어로 즉시 컴포넌트 갱신 가능

섹션별 세부 요약

1. MCP 서버 설정 절차

• Figma Personal Access Token 생성
• Figma 프로필 > 설정 > 보안 > 개인 액세스 토큰 생성 (이름: "MCP Access")
• MCP 서버 구성 파일 생성
• .codeium/windsurf/mcp_config.json 파일에 아래 내용 추가:

```json

{"mcpServers":{"figma-developer-mcp":{"command":"npx","args":["-y","figma-developer-mcp","--stdio"],"env":{"FIGMA_API_KEY":"YOUR_FIGMA_API_KEY_HERE"}}}}

```

• VS Code 구성을 위한 .vscode/mcp.json 파일 생성
• 동일한 JSON 구조로 구성 후 Reload Window 명령어로 적용

2. AI 기반 코드 생성 예제

• Figma 디자인 파일 연결
• mcp-demo-2 폴더에 새 Next.js 프로젝트 생성
• figma-developer-mcp 명령어로 Figma 파일의 UI 구조 분석
• Tailwind CSS 사용한 컴포넌트 생성
• 이미지 파일은 public 폴더에 복사 후 img 태그로 참조
• SVG 생성은 제외하고 이미지 사용 권장

3. 작업 흐름 및 성능 개선

• 디자인-코드 전달 시간 절감
• 기존 SVG 내보내기/수동 CSS 복사 대신 2초 이내 자동 생성
• 디자인 시스템 일관성 유지
• Figma의 실제 색상, 폰트, 레이아웃 토큰을 기반으로 React 컴포넌트 생성
• 반복 작업 최소화
• 디자이너가 Figma를 업데이트하면 개발자는 MCP: Reload Servers 명령어로 즉시 반영

결론

• 핵심 팁: figma-developer-mcp 명령어와 Sonnet 3.7 AI 모델을 활용해 Figma 디자인을 Next.js 코드로 자동 생성
• 필수 구성 요소: Figma API 토큰, MCP 서버 설정, VS Code/Windsurf 플러그인 설치
• 효율성: 디자인-코드 전달 시간 70% 이상 단축, 반복 작업 최소화 가능