converting-figma-designs skill

---
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 도구 상세](references/mcp-tools.md) - 각 도구의 파라미터 및 응답 형식
- [워크플로우 예시](references/workflows.md) - 실제 사용 사례
- [트러블슈팅](references/troubleshooting.md) - 일반적인 문제 해결