majiayu000 Figma Dev Mode MCP Support
Figma Dev Mode MCP 서버 도구를 활용하여 디자인에서 코드로의 변환을 지원합니다.
핵심 원칙
- 정확한 도구 선택: 작업 목적에 맞는 MCP 도구 사용
- 컨텍스트 우선: 디자인 컨텍스트 파악 후 작업 진행
- 점진적 접근: 컨텍스트 → 메타데이터 → 변수/토큰 순서로 진행
MCP 서버 설정
이 플러그인은 .mcp.json 파일을 통해 Figma Dev Mode MCP 서버를 자동으로 설정합니다.
플러그인 설치 시 다음 MCP 서버가 활성화됩니다:
- figma-dev-mode-mcp-server:
http://127.0.0.1:3845/mcp
사용 가능한 MCP 도구
1. get_design_context (핵심 도구)
용도: 디자인 요소의 전체 컨텍스트 정보 조회 및 코드 생성
가장 먼저 사용해야 하는 도구입니다. 선택된 Figma 요소의 구조, 스타일, 레이아웃 정보를 종합적으로 파악하고 React + Tailwind CSS 코드를 생성합니다.
지원 파일: Figma Design, Figma Make
사용 시점:
- Figma 디자인을 처음 분석할 때
- 컴포넌트 구조를 파악해야 할 때
- 레이아웃 및 스타일 정보가 필요할 때
- 디자인을 코드로 변환할 때
2. get_metadata
용도: Figma 요소의 메타데이터 조회
요소의 ID, 이름, 타입, 위치, 크기 등 기본 정보를 Sparse XML 형식으로 가져옵니다.
지원 파일: Figma Design
사용 시점:
- 특정 요소의 기본 정보가 필요할 때
- 요소 식별이 필요할 때
- 요소 타입을 확인해야 할 때
3. get_screenshot
용도: 디자인 화면 스크린샷 캡처
현재 Figma 화면 또는 선택된 영역의 스크린샷을 캡처합니다.
지원 파일: Figma Design, FigJam
사용 시점:
- 디자인 전체 화면을 캡처할 때
- 디자인 리뷰용 이미지가 필요할 때
- 레이아웃 정확도 검증이 필요할 때
- 문서화를 위한 스크린샷이 필요할 때
4. get_variable_defs
용도: 디자인 시스템 변수 및 스타일 정의 조회
색상, 간격, 타이포그래피 등의 디자인 토큰을 가져옵니다.
지원 파일: Figma Design
사용 시점:
- 디자인 토큰/변수를 확인할 때
- 테마 시스템을 구현할 때
- 일관된 스타일 적용이 필요할 때
5. get_code_connect_map
용도: Figma 노드와 코드 컴포넌트 매핑 조회
Figma 디자인 요소가 어떤 코드 컴포넌트에 연결되어 있는지 확인합니다.
지원 파일: Figma Design
사용 시점:
- 기존 컴포넌트 재사용 가능 여부 확인 시
- 디자인-코드 연결 상태 파악 시
6. add_code_connect_map
용도: Figma 노드와 코드 컴포넌트 매핑 설정
Figma 디자인 요소와 실제 코드 컴포넌트를 연결합니다.
지원 파일: Figma Design
사용 시점:
- 컴포넌트 라이브러리 연동 시
- 디자인 시스템과 코드베이스 동기화 시
7. create_design_system_rules
용도: 디자인 시스템 규칙 파일 생성
에이전트 가이드를 위한 규칙 파일을 생성합니다.
사용 시점:
- 프로젝트 초기 설정 시
- 팀 협업 규칙 정의 시
8. get_figjam
용도: FigJam 다이어그램 메타데이터 조회
FigJam 다이어그램을 XML 형식의 메타데이터로 변환합니다.
지원 파일: FigJam
사용 시점:
- FigJam 다이어그램 분석 시
- 플로우차트, 와이어프레임 해석 시
워크플로우 가이드
디자인 → 코드 변환 워크플로우
1. get_design_context 호출
→ 전체 구조, 스타일 파악 + 코드 생성
2. 필요시 get_metadata 호출
→ 특정 요소 상세 정보 확인
3. 생성된 코드를 프로젝트 컨벤션에 맞게 수정
디자인 토큰 기반 구현 워크플로우
1. get_variable_defs 호출
→ 디자인 토큰/변수 확인
2. get_design_context 호출
→ 컨텍스트 파악 + 코드 생성
3. 토큰을 적용하여 코드 최적화
컴포넌트 재사용 확인 워크플로우
1. get_code_connect_map 호출
→ 기존 컴포넌트 매핑 확인
2. 매핑된 컴포넌트가 있으면 재사용
→ 없으면 get_design_context로 새로 생성
디자인 문서화 워크플로우
1. get_screenshot 호출
→ 화면 캡처
2. get_design_context 호출
→ 컴포넌트 정보 수집
3. 문서 작성
레이아웃 검증 워크플로우
1. get_screenshot 호출
→ 원본 디자인 캡처
2. get_design_context 호출
→ 코드 생성 및 구현
3. 구현 결과와 스크린샷 비교 검증
트리거 패턴
이 스킬은 다음과 같은 상황에서 자동 활성화됩니다:
- Figma 링크 공유 시
- "피그마", "Figma" 언급
- "디자인 코드로", "디자인 구현" 요청
- "컴포넌트 추출", "에셋 추출" 요청
- "스크린샷", "캡처" 요청 (디자인 컨텍스트에서)
베스트 프랙티스
Do's
- 작업 전 항상
get_design_context로 컨텍스트 파악 및 코드 생성 - 코드 생성 후 프로젝트 스타일에 맞게 조정
- 반복되는 패턴은 컴포넌트로 분리
get_variable_defs로 디자인 토큰 활용get_screenshot으로 레이아웃 정확도 검증
Don'ts
- 컨텍스트 파악 없이 바로 코드 작성 시도
- 생성된 코드를 검토 없이 그대로 사용
- 모든 디자인 요소를 한 번에 처리 시도
- 디자인 토큰 무시하고 하드코딩
참고 문서
- MCP 도구 상세 - 각 도구의 파라미터 및 응답 형식
- 워크플로우 예시 - 실제 사용 사례
- 트러블슈팅 - 일반적인 문제 해결