---
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) - 일반적인 문제 해결


---
Source attribution: jeongsk
Original project: https://github.com/jeongsk/claude-skills/blob/a7696087bafc092b2d82ed543e5484444912608d/figma-helper/skills/converting-figma-designs/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 jeongsk

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: jeongsk
Original project: https://github.com/jeongsk/claude-skills/blob/a7696087bafc092b2d82ed543e5484444912608d/figma-helper/skills/converting-figma-designs/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design, Development & Engineering, Product Management
Roles: Frontend Developer, Growth Product Manager, Product Designer, UI Designer, UX Designer
Specialties: Design, Frontend
Tools: Figma
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: b520337ee1aff4024e5a4038198cc47aab3a378d07f7b293be978020df53c124
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.