Figma에서 픽셀 퍼펙트 UI 컴포넌트를 만드는 방법 (그 후 React에서 구현)

Source: Dev.to

Quick Checklist

• Turn on Pixel Grid – View → Pixel Grid
• Use Frames (not Groups) – 프레임은 제약 조건, 그리드 및 auto‑layout 지원을 제공합니다.
• Enable Layout Grid – 8 pt 간격 시스템(8, 16, 24, 32…)을 적용합니다.
• Use Auto‑Layout.
• Create Styles
  • Color Styles – 색상 스타일
  • Text Styles – 텍스트 스타일
  • Effects (shadows) – 효과 (그림자)

Consistent styles → consistent code.

Inspecting Elements

Click any element and inspect:

• Width / Height – 너비 / 높이
• Padding & Gap values – 패딩 및 간격 값
• Border radius – 테두리 반경
• Shadow values – 그림자 값
• Font size / weight / line height – 폰트 크기 / 굵기 / 줄 높이

Copy values directly — avoid “close enough”.

Example: Figma Card → React Component

import React from "react";

export default function Card({ title, subtitle, children }) {
  const styles = {
    card: {
      width: 320,
      padding: "16px 20px",
      borderRadius: 16,
      border: "1px solid #e5e7eb",
      background: "#ffffff",
      boxShadow: "0 8px 20px rgba(0,0,0,0.04)",
    },
    title: {
      margin: "0 0 6px",
      fontSize: 18,
      fontWeight: 600,
    },
    subtitle: {
      margin: "0 0 12px",
      color: "#6b7280",
      fontSize: 14,
    },
  };

  return (
    
      
## {title}

      
{subtitle}

      {children}
    
  );
}

Usage

  Content goes here…

Match values exactly — spacing, radii, shadows, fonts. Keep components reusable (variants in Figma, props in React). Avoid “eyeballing”. Inspect → copy → paste. Pixel‑perfect happens when design and code speak the same numbers.