Figma 프로토타입을 Next.js 앱으로 빠르게 변환하는 방법

피그마에서 디자인한 UI를 Next.js 애플리케이션으로 구현하는 과정은 디자인과 개발의 간극을 줄이는 중요한 작업이다. 이번 글에서는 Figma 프로토타입을 Next.js 앱으로 빠르게 변환하는 방법을 단계별로 설명하고, 생산성을 높이는 다양한 팁을 소개한다.

---

Figma에서 준비할 사항

Figma에서 디자인을 Next.js로 옮기기 전에 몇 가지 준비해야 할 사항이 있다.

디자인 시스템 정리

• 컴포넌트 기반 설계: 버튼, 입력창, 카드 등의 UI 요소를 Variants로 정리
• 디자인 토큰 사용: 색상, 타이포그래피, 여백 등을 Figma Tokens 플러그인으로 관리
• Auto Layout 적용: CSS의 Flexbox/Grid 시스템을 쉽게 적용할 수 있도록 설정

개발자를 위한 핸드오프 준비

• Figma의 Dev Mode 활성화하여 개발자용 코드와 스타일 확인 가능하도록 설정
• 개발자가 확인할 수 있도록 컴포넌트 명명 규칙을 정리
• CSS 속성 및 코드 추출을 위한 플러그인(Figma to Code, Anima, Zeplin 등) 활용

---

Next.js 프로젝트 설정

이제 Next.js 환경을 준비한다. Next.js와 Tailwind CSS를 함께 사용하면 Figma 디자인을 코드로 옮길 때 더욱 효율적이다.

npx create-next-app@latest figma-to-next
cd figma-to-next
npm install

Tailwind CSS 설치 (선택 사항)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

 

// tailwind.config.js
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

---

Figma 디자인을 코드로 변환

1) 디자인 요소를 컴포넌트로 분리

Figma의 주요 UI 요소를 Next.js의 컴포넌트(Component) 단위로 나눈다.

예제: Figma에서 만든 버튼을 Button.tsx로 변환

// components/Button.tsx
import React from "react";

type ButtonProps = {
  text: string;
  onClick?: () => void;
};

const Button = ({ text, onClick }: ButtonProps) => {
  return (
    <button
      className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

2) Auto Layout을 활용한 Flexbox/Grid 변환

Figma에서 Auto Layout을 적용했다면, 이를 Flexbox 또는 CSS Grid로 변환해야 한다.

Figma에서 만든 카드 UI를 Card.tsx로 변환하는 예제:

// components/Card.tsx
const Card = ({ title, description }: { title: string; description: string }) => {
  return (
    <div className="p-4 bg-white shadow-md rounded-lg">
      <h2 className="text-lg font-bold">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
};

export default Card;

3) 디자인 토큰을 Tailwind CSS 또는 CSS 변수로 적용

Figma의 디자인 시스템에서 설정한 색상, 타이포그래피 등을 Tailwind 설정에 반영하면 유지보수가 편리하다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#4A90E2", // Figma에서 정의한 색상
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

---

4. 반응형(Responsive) 고려하기

Figma에서 반응형 디자인을 고려했다면, Next.js에서도 이를 적용해야 한다.

Tailwind를 활용한 반응형 예제

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card title="카드 1" description="설명 1" />
  <Card title="카드 2" description="설명 2" />
  <Card title="카드 3" description="설명 3" />
</div>

CSS-in-JS 사용 예제 (Styled-components)

import styled from "styled-components";

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  
  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

---

5. 프로토타입과 실제 앱 비교 & 테스트

이제 Figma 프로토타입과 Next.js로 구현한 결과물을 비교하고, 차이점을 수정한다.

1) Storybook으로 UI 테스트

Storybook을 사용하면 Figma 디자인과 개발된 컴포넌트를 비교하며 UI를 테스트할 수 있다.

npx storybook init
npm run storybook

2) Pixel Perfect 플러그인 활용

Figma와 실제 구현된 화면이 일치하는지 확인하는 Pixel Perfect 확장 프로그램 활용

---

결론

Figma에서 디자인한 프로토타입을 Next.js 앱으로 변환하는 과정은 디자인 시스템을 잘 구축하고, 컴포넌트 기반 개발을 활용하면 훨씬 효율적으로 진행할 수 있다. 또한 Tailwind CSS, Storybook, 자동화 도구를 사용하면 더 빠르고 정밀한 개발이 가능하다.

핵심 요약

• Figma에서 Auto Layout & 디자인 토큰 정리 → Next.js에서 Flexbox/Grid 활용
• Dev Mode 및 핸드오프 기능 활용 → 개발자와 협업 원활
• 컴포넌트 기반 개발 → 유지보수성과 재사용성 향상
• 반응형 UI 고려 → Tailwind CSS, Styled-components 사용
• Pixel Perfect & Storybook으로 테스트 → Figma와 실제 UI 일치 검증

디자이너와 개발자가 협업하여 디자인을 실체화하는 과정은 프로젝트의 완성도를 높이는 중요한 작업이다. 위의 방법을 활용하면 Figma에서 만든 디자인을 Next.js 앱으로 더욱 빠르고 정확하게 변환할 수 있다.