Kenapa Saya Pindah dari Figma ke Kode (dan Sebaliknya)

Ada satu fase dalam karier saya yang sekarang diingat-ingat bikin saya mau menunduk. Saya menyebutnya fase sok yakin, karena keyakinan saya waktu itu betul-betul tidak punya alas. Waktu itu, sebelum saya terjun serius ke perkodingan, saya percaya semua desain bisa diimplementasi di kode. Gambar di Figma sudah rapi, tinggal diterjemahkan, beres. Terlalu idealis, saya tahu itu sekarang, tapi dulu keyakinan saya sekeras tembok. Desain, menurut saya, selesai di Figma, lalu tinggal diserahkan ke developer. Labelnya rapi, handoff-nya mulus, semua orang bahagia, termasuk saya. Baru setelah saya sendiri yang mengode desain itu saya sadar bahwa yang mulus itu cuma permukaannya. Filenya sampai utuh ke tangan developer, tapi keputusan-keputusan kecil di baliknya tidak ikut terkirim.

Dari Figma ke code

Waktu pertama kali serius belajar React, saya kagum betulan. Semua yang saya gambar di Figma bisa saya buat nyata, dari transisi dan hover state sampai layout yang benar-benar responsif. Saya sempat berpikir kode adalah jawabannya, karena bagaimanapun hasil akhirnya memang dibaca di browser.

Sejak itu hampir semua proyek saya mulai dari editor. Header? Ya bikin komponennya, taruh di folder components, pakai, tidak usah banyak diskusi. Cepat memang, setidaknya menurut ukuran saya sendiri. Tapi sering kali desainnya yang jadi datar. Ritme tipografinya tidak pernah dipikirkan matang, spacing-nya pilih yang sekilas enak dilihat di layar laptop saya, sementara state yang tidak muncul di komposisi terakhir terlupakan sampai ada orang menemukannya duluan.

Nah, begitu proyeknya datang dari orang lain, saya baru ngerasain sendiri rasanya memotong desain yang gak ngotak. Komponennya dipisah-pisah tanpa alasan, ukuran font lompat-lompat dari layar ke layar, padahal kliennya minta pixel perfect plus animasi-animasi ini itu, sambil juga minta cepat jadi. Edan, permintaannya banyak tapi waktunya diporsir seolah cuma buat ganti warna tombol. Ironisnya, saya juga pernah bikin desain kayak gitu, dulu saya pikir semua permintaan itu wajar saja karena semua kan pasti bisa jadi kode.

Lalu kembali ke Figma

Proyek yang membuat saya membuka Figma lagi adalah aplikasi dengan banyak alur, mulai dari onboarding, checkout, error state, sampai empty state. Mengode semuanya tanpa peta desain berarti menggali lubang sambil menimbun. Lubangnya saya buka sendiri tanpa pernah menuliskan di mana, dan tumpukan tanah di sebelahnya makin tinggi, saya masih menganggapnya kemajuan. Saya kehilangan gambaran besar sementara layar penuh baris kode yang satu per satu masuk akal.

Di Figma, saya bisa melihat seluruh alur dalam satu kanvas, membandingkan dua versi layout berdampingan, dan mengusulkan perubahan kepada klien tanpa menyentuh kode produksi. Menggeser spacing antar section dari 64px ke 96px di sana cuma butuh beberapa detik, sedangkan di kode produksi perubahan sekecil itu harus menjelaskan dirinya sendiri. Pada titik ini desain terasa seperti cara berpikir, bukan sekadar gambar.

Yang akhirnya saya pahami

Kedua alat itu punya tempatnya masing-masing, dan selama ini justru cara saya memakainya yang keliru.

• Figma untuk keputusan. Layout, hierarki, ritme, alur. Semua yang murah diubah selama masih berupa gambar.
• Kode untuk kepastian. Hal-hal yang benar-benar terjadi di browser. Proporsi asli yang baru terasa ketika dijalankan, performa, interaksi nyata.
• Prototipe di code kalau interaksinya kompleks. Animasi scroll atau micro-interaction sulit dinilai dari prototipe statis Figma.

Sekarang, kalau saya diminta ngedesain UI, yang kepikiran pertama kali itu UX, baru sesudahnya DX, developer experience-nya. Saya tidak mau bikin desain indah yang bikin otak pengode kebakar. Mending simpel, estetik dikit ya gpp, yang penting fungsi jalan dan proses bisnisnya tercapai. Percuma desainnya kelihatan keren di kanvas kalau pas jadi malah bikin orang bingung mau klik yang mana dulu.

Yang berubah bukan alat yang saya pakai, melainkan kapan saya membukanya. Desain dan development jadi satu lingkaran berpikir, dari sketsa ke kode dan balik lagi. Seringkali saya berhenti di tengah, kembali ke Figma, menggeser satu bagian, lalu lanjut mengode.

Kalau kamu sedang berada di fase yang sama, entah "kode segalanya" atau "Figma segalanya", tidak usah ganti alat untuk semua proyek sekaligus. Ambil satu proyek yang sedang jalan, pindahkan bagian awalnya ke alat yang satunya, lalu lihat detail apa yang selama ini hilang. Saya sendiri masih bolak-balik sampai sekarang. Bedanya, sekarang saya tidak sok yakin lagi. Paling tidak, tidak sesok yakin dulu.