Back to Details

figma-to-code

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

🎨 Next.js Figma 디자인 구현 스킬

🎨 Next.js Figma设计实现技能

이 스킬은 BSD 바이브코딩 수강생들이 Figma 디자인을 실제 작동하는 Next.js 웹사이트로 변환할 수 있도록 돕습니다.
本技能帮助BSD直播编程课程学员将Figma设计转换为可运行的Next.js网站。

📋 이 스킬이 하는 일

📋 本技能的功能

  1. 디자인 분석: Figma 파일의 레이아웃, 컴포넌트, 색상 시스템 분석
  2. Next.js 컴포넌트화: Figma 레이어를 재사용 가능한 React 컴포넌트로 변환
  3. Tailwind CSS 적용: 유틸리티 우선 CSS를 사용한 빠르고 정확한 스타일링
  4. 반응형 최적화: Tailwind의 브레이크포인트를 활용한 모바일/데스크톱 대응
  5. 인터랙션 구현: Framer Motion을 활용한 부드러운 애니메이션 추가
  1. 设计分析：分析Figma文件的布局、组件、色彩系统
  2. Next.js组件化：将Figma图层转换为可复用的React组件
  3. Tailwind CSS应用：使用实用优先的CSS进行快速精准的样式开发
  4. 响应式优化：利用Tailwind的断点适配移动端/桌面端
  5. 交互实现：借助Framer Motion添加流畅的动画效果

🎯 언제 이 스킬을 사용하나요?

🎯 何时使用本技能？

  • "Figma 디자인을 Next.js 프로젝트로 빠르게 옮기고 싶어요"
  • "Tailwind CSS를 써서 디자인과 똑같은 웹사이트를 코딩하고 싶어요"
  • "Vercel에 배포할 품질 높은 프론트엔드 코드가 필요해요"
  • "想快速将Figma设计迁移到Next.js项目中"
  • "想用Tailwind CSS编写与设计完全一致的网站"
  • "需要可部署到Vercel的高质量前端代码"

🛠️ 기술 스택 (Professional Stack)

🛠️ 技术栈（Professional Stack）

1. Framework

1. 框架

  • Next.js 14+ (App Router)
  • TypeScript (안정성 확보)
  • Next.js 14+ (App Router)
  • TypeScript（保障稳定性）

2. Styling

2. 样式

  • Tailwind CSS: 디자인 시스템 반영
  • Lucide React / Heroicons: 아이콘 시스템
  • Tailwind CSS：适配设计系统
  • Lucide React / Heroicons：图标系统

3. Animation

3. 动画

  • Framer Motion: 정교한 웹 애니메이션
  • Framer Motion：精细的网页动画

💻 구현 예시 (Figma Design to Next.js)

💻 实现示例（Figma Design to Next.js）

1. Component Analysis

1. 组件分析

Figma의 'Navbar' 프레임 → 
components/Navbar.tsx
Figma的'Navbar'框架 → 
components/Navbar.tsx

2. Implementation Code

2. 实现代码

tsx
import React from "react";
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex items-center justify-between py-6 px-8 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-100">
      <div className="text-2xl font-bold text-blue-600">Logo</div>
      <ul className="hidden md:flex gap-8 text-gray-600 font-medium">
        <li>
          <Link href="#features" className="hover:text-blue-500 transition">
            기능
          </Link>
        </li>
        <li>
          <Link href="#pricing" className="hover:text-blue-500 transition">
            가격
          </Link>
        </li>
        <li>
          <Link href="#faq" className="hover:text-blue-500 transition">
            FAQ
          </Link>
        </li>
      </ul>
      <button className="bg-blue-600 text-white px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition">
        시작하기
      </button>
    </nav>
  );
}
tsx
import React from "react";
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex items-center justify-between py-6 px-8 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-100">
      <div className="text-2xl font-bold text-blue-600">Logo</div>
      <ul className="hidden md:flex gap-8 text-gray-600 font-medium">
        <li>
          <Link href="#features" className="hover:text-blue-500 transition">
            기능
          </Link>
        </li>
        <li>
          <Link href="#pricing" className="hover:text-blue-500 transition">
            가격
          </Link>
        </li>
        <li>
          <Link href="#faq" className="hover:text-blue-500 transition">
            FAQ
          </Link>
        </li>
      </ul>
      <button className="bg-blue-600 text-white px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition">
        시작하기
      </button>
    </nav>
  );
}

📐 Figma 디자인 분석 체크리스트

📐 Figma设计分析检查表

1. 그리드 및 간격

1. 网格与间距

  • Tailwind의 Spacing Scale (4, 8, 12, 16px...)에 맞춰 디자인 분석
  • max-w-7xl
    등 표준 컨테이너 너비 설정
  • 对照Tailwind的间距尺度（4, 8, 12, 16px...）分析设计
  • 设置
    max-w-7xl
    等标准容器宽度

2. 컬러 시스템

2. 色彩系统

  • Figma의 HEX 코드를 
    tailwind.config.ts
    의 커스텀 컬러로 등록
  • 다크 모드(
    dark:
    ) 고려 여부 확인
  • 将Figma的HEX代码注册为
    tailwind.config.ts
    中的自定义颜色
  • 确认是否考虑深色模式(
    dark:
    )

💬 예제 대화

💬 示例对话

사용자: "이 Figma 스크린샷 보고 Next.js + Tailwind로 히어로 섹션 짜줘"
Claude: "Figma 디자인을 분석하여 Next.js 컴포넌트와 Tailwind CSS로 변환해드리겠습니다. 이미지 최적화(
next/image
)와 텍스트 레이아웃을 정교하게 구현한 코드를 생성해 드릴게요..."
用户: "帮我把这个Figma截图转换成Next.js + Tailwind的Hero区块"
Claude: "我将分析Figma设计并将其转换为Next.js组件和Tailwind CSS代码。会为您生成包含图片优化(
next/image
)和精细文本布局的代码..."

🎯 핵심 정리

🎯 核心总结

이 스킬을 사용하면: ✅ 픽셀 퍼펙트: Figma 디자인과 99% 일치하는 코드 생성 ✅ 생산성 향상: 수동 마크업 시간을 획기적으로 단축 ✅ 클린 코드: 유지보수가 쉬운 모듈화된 React 컴포넌트 제공 ✅ 공연 최적화: Next.js의 내장 기능을 활용한 최고 수준의 웹 성능
BSD 학생이라면: 이제 디자인을 코드로 옮기는 노가다에서 벗어나, 더 중요한 비즈니스 로직 개발에 집중할 수 있습니다! 🎨
使用本技能可实现： ✅ 像素级完美：生成与Figma设计99%匹配的代码 ✅ 提升生产力：大幅减少手动编写标记的时间 ✅ 代码整洁：提供易于维护的模块化React组件 ✅ 性能优化：利用Next.js内置功能实现顶级网页性能
如果您是BSD学员：现在可以摆脱将设计转换为代码的繁琐工作，专注于更重要的业务逻辑开发！ 🎨