Figma→Code 변환

코딩고급

Figma MCP 서버를 활용하여 디자인 프레임의 레이아웃, 색상, 타이포그래피, 간격을 추출하고, 디자인 시스템을 준수하는 React/Tailwind 컴포넌트 코드를 생성합니다.

트리거/figma

사용빈도주 2-3회

프론트엔드 개발자라면? /figma로 디자인 시안을 컴포넌트로 빠르게 변환

디자이너 겸 개발자라면? Figma에서 직접 코드로 넘어가는 시간을 90% 단축

Figma디자인컴포넌트프론트엔드

작동 흐름

/figma [프레임 링크] 실행 → 디자인 데이터 추출

↓

Phase 1: 3개 추출 병렬

layout-extract

레이아웃/간격 추출

token-read

디자인 토큰 읽기

asset-list

이미지/아이콘 목록

↓

React 컴포넌트 코드 생성 + 반응형 처리

↓

✓ 프로덕션 레디 컴포넌트 코드

스킬 코드

# Figma to Code Skill
## Trigger: /figma [Figma frame link or description]

Prerequisites: Figma MCP server configured

When invoked:

1. Extract design data:
 - Layout: flex/grid, gap, padding, margin
 - Colors: fill, stroke → CSS variables
 - Typography: font, size, weight, line-height
 - Components: identify reusable patterns

2. Map to code:
 - Auto Layout → Flexbox/Grid
 - Figma components → React components
 - Design tokens → Tailwind config
 - Variants → component props

3. Generate code:
 - React + Tailwind CSS (or project's stack)
 - Responsive breakpoints (mobile-first)
 - Semantic HTML + ARIA labels
 - Component props for variants

4. Output:
 - Component file(s)
 - Required Tailwind config additions
 - Usage example with props

복사해서 CLAUDE.md에 붙여넣으면 바로 사용할 수 있습니다.