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 | 금지 패턴 |

figma-to-code

Como adicionar

Cole no README do seu repo

Skills relacionadas

frontend-design

mcp-builder

webapp-testing

web-artifacts-builder

Receba novas skills de Design e Frontend toda segunda