converting-figma-designs

name	converting-figma-designs
description	Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.

Figma Dev Mode MCP Support

Figma Dev Mode MCP 서버 도구를 활용하여 디자인에서 코드로의 변환을 지원합니다.

핵심 원칙

1. 정확한 도구 선택: 작업 목적에 맞는 MCP 도구 사용
2. 컨텍스트 우선: 디자인 컨텍스트 파악 후 작업 진행
3. 점진적 접근: 컨텍스트 → 메타데이터 → 변수/토큰 순서로 진행

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 도구 상세 - 각 도구의 파라미터 및 응답 형식
• 워크플로우 예시 - 실제 사용 사례
• 트러블슈팅 - 일반적인 문제 해결