/figma-to-code

name: figma-to-code
description: Figma 디자인을 Emotion 기반 코드로 변환. Pixel-perfect 구현.
category: implementation
user-invocable: false
metadata:
  version: '1.0.0'

Figma to Code Skill

> Figma 디자인을 Emotion styled 기반 코드로 변환

---

트리거 조건

| 트리거 | 반응 | | ----------------------------- | ----------- | | Figma URL 제공 | 즉시 실행 | | "Figma 변환", "디자인 구현" | 스킬 활성화 | | `/start` 커맨드 내 Figma 분석 | 자동 연계 |

---

워크플로우

Phase 1: 디자인 추출

// Figma MCP 도구로 디자인 컨텍스트 추출
mcp__figma__get_design_context({
  fileKey: '{file_key}',
  nodeId: '{node_id}',
  clientLanguages: 'typescript',
  clientFrameworks: 'react',
});

**추출 항목:**

• 레이아웃 구조 (flex, gap, padding)
• 색상 값 (hex → semantic color 매핑)
• 타이포그래피 (font-size, weight, line-height)
• 컴포넌트 계층 구조

---

Phase 2: 컴포넌트 매핑

**파일 구조:**

{컴포넌트}/
├── index.tsx      # 컴포넌트 로직
└── styled.ts      # Emotion styled 정의

**styled.ts 템플릿:**

import styled from '@emotion/styled';

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
`;

// 상태별 스타일 (transient props: $접두사)
export const FilterButton = styled.button<{ $isSelected: boolean }>`
  padding: 8px 16px;
`;

**index.tsx 템플릿:**

import { FC } from 'react';

import { Container, Title, FilterButton } from './styled';

interface Props {
  // props 정의
}

export const Component: FC<Props> = ({ ...props }) => {
  return (
    <Container>
      {/* styled 컴포넌트 직접 사용 */}
    </Container>
  );
};

---

Phase 3: Agent Teams 병렬 구현 (Claude Max)

여러 컴포넌트를 동시에 생성할 때:

TeamCreate({ team_name: 'figma-team', description: 'Figma to Code 변환' });
Task(subagent_type='implementor', team_name='figma-team', name='component-1', model='sonnet',
  prompt='FilterButton 컴포넌트 구현');
Task(subagent_type='implementor', team_name='figma-team', name='component-2', model='sonnet',
  prompt='DateControls 컴포넌트 구현');
// 완료 후 → shutdown_request → TeamDelete

> Agent Teams 미가용 시 Task 병렬 호출로 폴백

---

Phase 4: 검증

**Pixel-perfect 체크리스트:**

• [ ] 레이아웃 (flex-direction, gap, padding) 일치
• [ ] 색상 (semantic color 매핑) 일치
• [ ] 폰트 (size, weight, line-height) 일치
• [ ] 상태별 스타일 (hover, active, disabled) 일치
• [ ] 반응형 동작 (있는 경우)

---

금지 패턴

| 금지 | 대안 | | ----------------- | ---------------- | | inline style 객체 | Emotion styled | | 하드코딩 색상 | semantic color | | px 매직넘버 | 변수화 또는 주석 | | !important | specificity 조정 |

---

참조 문서

| 문서 | 용도 | | ------------------------------------------------------ | --------------- | | `@${CLAUDE_PLUGIN_ROOT}/instructions/validation/forbidden-patterns.md` | 금지 패턴 |