Alur Kerja Figma ke Next.js: Cara Saya Menerjemahkan Desain ke Komponen

Ada kesenjangan yang menyakitkan antara desain Figma yang dipoles dan komponen React yang berfungsi. Nilai piksel yang tidak memetakan ke default Tailwind. Nama warna dalam sistem desain yang tidak ada hubungannya dengan nama variabel CSS di codebase. Setelah mengiterasi alur kerja ini di beberapa proyek — termasuk portofolio ini — saya mendarat pada proses yang menjaga fidelitas desain tinggi dan waktu terjemahan rendah.

Sebelum Menulis Satu Baris Kode: Mengaudit Desain

Penghemat waktu terbesar adalah menghabiskan 30 menit mengaudit file Figma sebelum menyentuh kode. Yang saya cari: ketidakkonsistenan dalam penggunaan token desain, penggunaan auto-layout, dan hierarki komponen. Desain yang menggunakan auto-layout secara menyeluruh dan setup variabel lokal yang tepat diterjemahkan hampir secara mekanis.

Figma Dev Mode: Apa yang Sebenarnya Diberikannya

Dev Mode Figma berguna tetapi memerlukan interpretasi. Ini memberi Anda nilai piksel yang tepat, arah auto-layout dan gap, radius sudut, opacity, dan warna. Yang tidak diberikan adalah makna semantik — tidak akan memberi tahu Anda bahwa warna adalah brand-500 dalam sistem desain Anda.

Menetapkan Tailwind Config sebagai Jembatan Token Desain

Panel variabel Figma dan konfigurasi Tailwind perlu menggunakan nama yang sama untuk nilai yang sama. Saya menyiapkan konfigurasi Tailwind sebelum menulis komponen, memperluas tema untuk mencocokkan nama variabel Figma secara tepat: jika Figma memiliki color/brand/500, kunci Tailwind adalah brand-500.

┌─────────────┐    Inspect     ┌──────────────────────┐
│   FIGMA     │ ─────────────► │  Design Tokens        │
│  (Design)   │   Dev Mode     │  colors, spacing,     │
└─────────────┘                │  typography, radius   │
                               └──────────┬───────────┘
                                          │ tailwind.config.ts
                                          ▼
┌─────────────────────────────────────────────────────┐
│              COMPONENT MAPPING                      │
│                                                     │
│  Figma Frame/Group  →  React Component              │
│  Figma Auto-layout  →  flex / grid classes          │
│  Figma Variant      →  TypeScript props union       │
│  Figma Component    →  Storybook story              │
└──────────────────────────┬──────────────────────────┘
                           │ build
                           ▼
                    Next.js Page
                 (server components)

Terjemahan Komponen: Dari Figma Frame ke TypeScript Props

Setiap komponen Figma menjadi antarmuka TypeScript. Varian Figma memetakan ke tipe union TypeScript. Properti boolean Figma memetakan ke props boolean opsional. Aturan saya: apa pun yang secara eksplisit dibuat desainer sebagai varian atau penggantian gaya yang dapat dikonfigurasi harus menjadi prop.

Menangani Perilaku Responsif dan Breakpoint Figma

Desain Figma biasanya untuk satu lebar viewport — biasanya desktop 1440px atau mobile 375px. Saat menerjemahkan ke Next.js, saya menggunakan prefix responsif Tailwind (sm, md, lg) untuk menginterpolasi antara dua status yang didesain.

// tailwind.config.ts — mirror Figma token names exactly
import type { Config } from "tailwindcss"

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",  // match Figma "brand/500"
          900: "#1e3a5f",
        },
      },
      spacing: {
        18: "4.5rem",  // custom Figma spacing token
      },
      borderRadius: {
        "2xl": "1rem",  // Figma corner radius
      },
    },
  },
}
export default config

// components/ui/Button.tsx — typed props from Figma variants
type ButtonVariant = "primary" | "secondary" | "ghost"
type ButtonSize = "sm" | "md" | "lg"

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  loading?: boolean
}

const variantClasses: Record<ButtonVariant, string> = {
  primary: "bg-brand-500 text-white hover:bg-brand-600",
  secondary: "bg-transparent border border-brand-500 text-brand-500",
  ghost: "bg-transparent text-brand-500 hover:bg-brand-50",
}

const sizeClasses: Record<ButtonSize, string> = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-6 py-3 text-lg",
}

export function Button({
  variant = "primary",
  size = "md",
  loading,
  children,
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={`rounded-2xl font-medium transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${className ?? ""}`}
      disabled={loading}
      {...props}
    >
      {loading ? <span className="animate-spin">⏳</span> : children}
    </button>
  )
}

Storybook sebagai Artefak Serah Terima Desain–Dev

Setiap komponen yang saya bangun dari Figma mendapatkan cerita Storybook bersamanya. Cerita mencakup setiap varian persis seperti yang muncul di Figma, ditambah kasus tepi — status kosong, string panjang, status loading, status error. Storybook berfungsi sebagai jembatan hidup antara desain dan implementasi.

Menangani Ikon: Lucide, SVG Kustom, dan Pola Komponen Ikon

Saya menggunakan Lucide React sebagai pustaka ikon default — dapat di-tree-shake, konsisten dalam gaya, dan mencakup sebagian besar kebutuhan UI. Untuk ikon kustom dari desain, saya mengekspornya dari Figma sebagai SVG, mengoptimalkannya dengan SVGO, dan membungkusnya dalam komponen React sederhana.

Ketika Desain Belum Ada

Terkadang saya membangun fitur di mana desainer masih mengerjakan file Figma. Dalam kasus itu, saya mulai dengan API komponen terlebih dahulu — mendefinisikan antarmuka TypeScript untuk props, mengestub komponen dengan konten placeholder, dan menulis cerita Storybook. Desain komponen muncul dari props, bukan sebaliknya.

Sumber & Bacaan Lanjutan

• Figma — Developer Handoff in Dev Mode — https://help.figma.com/hc/en-us/articles/15023124644247
• Tailwind CSS — Konfigurasi Tema — https://tailwindcss.com/docs/theme
• Storybook — Component Story Format — https://storybook.js.org/docs/writing-stories