Figma

좋아요! 아래에 Figma에서 디자인한 버튼 컴포넌트를 React 컴포넌트로 어떻게 연결하고 구현하는지 완전 초보자 시점에서 디테일하게 예시로 보여드릴게요.
(📌 실제 UI 이름 예시: Primary Button, Secondary Button, Disabled 상태 등)

---

🎨 Figma에서 만든 버튼 컴포넌트 구조 예시

▶ 컴포넌트 이름: Button

• Variants
  • Type: primary, secondary
  • State: default, hover, disabled

👇 이런 식으로 Figma 안에서는 하나의 버튼 컴포넌트를 다양한 상태로 표현합니다:

Variant	설명
primary/default	파란 배경, 흰 글자
primary/hover	더 진한 파랑
secondary/default	회색 테두리, 검정 글자
disabled	회색 배경, 회색 글자

---

🧩 React에서 이 Figma 버튼을 구현하기

1. Button.js 컴포넌트 만들기

// components/Button.js
import React from "react";
import './Button.css'; // 스타일 파일은 따로

const Button = ({ type = "primary", disabled = false, children, onClick }) => {
  const classNames = [
    "btn",
    `btn-${type}`,
    disabled ? "btn-disabled" : "",
  ].join(" ");

  return (
    <button className={classNames} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

2. Button.css 스타일 정의 (Figma 스타일 토큰 매핑)

/* Button.css */

.btn {
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

/* Primary Button */
.btn-primary {
  background-color: #007aff;  /* Figma의 Primary Color */
  color: white;
}

.btn-primary:hover {
  background-color: #005ecb;
}

/* Secondary Button */
.btn-secondary {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #333;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
}

/* Disabled */
.btn-disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  cursor: not-allowed;
}

---

🧪 3. 실제 사용 예시 (App.js 또는 화면에서)

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

function App() {
  return (
    <div style={{ padding: '40px' }}>
      <h2>버튼 예제</h2>
      <Button type="primary" onClick={() => alert("Click!")}>
        확인
      </Button>
      <br/><br/>
      <Button type="secondary">취소</Button>
      <br/><br/>
      <Button disabled>비활성</Button>
    </div>
  );
}

export default App;

---

🧠 개발 팁: 왜 이렇게 만들었을까?

항목	설명
Props로 상태 관리	Figma의 Variant → React의 Props (type, disabled)
CSS 클래스 네이밍	btn-primary, btn-disabled → 디자인 시스템 토큰 이름과 일치
재사용성	어떤 화면에서도 버튼을 일관되게 사용 가능
확장성	나중에 icon, loading 추가도 쉽게 가능

---

🎁 보너스: 더 고급 연결 (Tailwind + Figma Variables → 토큰 자동화)

Figma의 토큰(JSON 파일)을 tailwind.config.js에 직접 연결해서 디자인 일관성을 유지할 수도 있어요.

Figma → Tokens Studio → Design Tokens 플러그인 → JSON 파일 → Tailwind로 연결
(ex. --color-primary → theme.colors.primary)

---

필요하시면 다음 단계도 가능해요:

• ✅ Storybook에 버튼 문서화
• ✅ Anima 또는 Figma to Code 자동 변환 실습
• ✅ 아이콘이 포함된 버튼, 사이즈 Variant 추가 (sm, md, lg)
• ✅ 모바일 반응형 Auto Layout 구조를 코드로 구현

궁금한 파트 있으신가요? 아니면 바로 아이콘/로딩 버튼도 만들어볼까요? 😊