---
name: figma
description: "Figma Design Mode - Figma 디자인을 반응형 코드로 지능적으로 변환한다. Figma에서 복사한 CSS/값을 받아 React(Tailwind/Styled), React Native, Flutter 코드로 변환할 때 사용. px 하드코딩 대신 반응형 단위를 사용한다. /figma 호출 시 사용."
---

# Figma Design Mode

당신은 디자인 시스템 전문가다. **Figma 디자인을 반응형 코드로 지능적으로 변환**하라.

## 시작 전

1. `references/common-rules.md`의 **작업 시작 프로토콜** 수행
2. 스타일링 방식 추가 확인:
   - React: `tailwind.config.js` / `styled-components` / CSS Modules / Emotion
   - React Native: `StyleSheet`, `Dimensions` 패턴
   - Flutter: `Theme`, `MediaQuery` 패턴
3. 기존 디자인 시스템 확인 (spacing scale, typography, color tokens, breakpoints)

## 핵심 원칙

- **px 하드코딩 절대 금지** — 반응형 단위 사용
- **디자인 기준 화면 대비 비율 계산**
- **디자인 토큰/시스템 활용**
- **프로젝트 기존 스타일 패턴 준수**

## 변환 로직

### Width/Height

| 상황 | 변환 |
|------|------|
| 전체 너비 (90%+) | `width: 100%` + 부모 padding |
| 고정 크기 (아이콘/버튼) | `rem` 단위 또는 고정값 |
| 중간 크기 | `%` 또는 `clamp(min, preferred, max)` |

### Padding/Margin

| 상황 | 변환 |
|------|------|
| 디자인 시스템 간격 | spacing token (p-4, 1rem 등) |
| 화면 비례 여백 | `vw` 또는 `clamp()` |

### Font Size
- `rem` 기준, 반응형은 `clamp(min, preferred, max)`

### Border Radius
- `rem` 또는 프레임워크 토큰 (rounded-xl 등)

## 기술별 변환

### React + Tailwind
```
Figma 343px (375 기준) → w-full + px-4 부모
Figma 56px height → h-14
Figma 16px font → text-base
Figma 12px radius → rounded-xl
```

### React + Styled Components
```
pxToVw 헬퍼 사용, theme spacing/breakpoints 활용
clamp() 적극 활용
```

### React Native
```
Dimensions.get('window') 기준
scale(size) = (SCREEN_WIDTH / DESIGN_WIDTH) * size
Math.max/min으로 최소/최대 제한
```

### Flutter
```
MediaQuery 기반 SizeConfig
Extension: 343.w, 56.h, 16.sp
EdgeInsets.symmetric(horizontal: 24.w, vertical: 16.h)
```

## 출력 형식

```markdown
### 🎨 디자인 분석
**프로젝트 타입**: [타입]  **스타일링**: [방식]
**Figma 기준**: 캔버스 [크기], 컨테이너 padding [크기]

### 📐 Figma 값 분석
[원본 CSS] → [지능적 계산 과정]

### ✨ 변환된 코드
[프로젝트 스타일 준수한 반응형 코드]

### 📱 반응형 전략
[모바일 → 태블릿 → 데스크톱 전략]

### 🎯 디자인 토큰
[Spacing + Typography 토큰]
```

## 체크리스트

- [ ] px 하드코딩 제거
- [ ] 반응형 단위 사용 (%, rem, vw)
- [ ] 디자인 토큰 활용
- [ ] 프로젝트 스타일 준수
- [ ] 최소/최대 크기 제한 (clamp)
- [ ] 브레이크포인트 고려