Figma to Code — 디자인에서 코드 자동 생성

도구 비교

• Figma Dev Mode: 공식 개발자 핸드오프 도구
• Locofy: Figma → React/Next.js 자동 변환
• Builder.io: 비주얼 에디터 + 코드 생성
• AI(Claude/GPT): 스크린샷 → 코드 변환

AI 활용

// Figma 스크린샷을 AI에 전달
const response = await anthropic.messages.create({
  model: "claude-sonnet-4-20250514",
  messages: [{
    role: "user",
    content: [
      { type: "image", source: { type: "base64", data: figmaScreenshot } },
      { type: "text", text: "이 UI를 React + Tailwind로 구현해줘" }
    ]
  }]
});