Menghilangkan Masalah Handoff antara Designer dan Developer

Dalam proses pengembangan produk digital, salah satu masalah yang sering terjadi adalah handoff antara designer dan developer.

Designer biasanya membuat desain di Figma, kemudian mengekspor spesifikasi seperti ukuran, warna, spacing, typography, dan komponen untuk diberikan kepada developer. Setelah itu, developer mencoba menerjemahkan desain tersebut ke dalam kode.

Sekilas proses ini terlihat sederhana. Namun, pada praktiknya sering muncul perbedaan interpretasi.

Masalah Klasik dalam Proses Handoff

Prosesnya biasanya berjalan seperti ini:

Designer membuat desain di Figma.

Designer memberikan desain dan spesifikasi kepada developer.

Developer mencoba mengimplementasikan desain tersebut ke dalam kode.

Hasil implementasi dibandingkan kembali dengan desain.

Ditemukan beberapa perbedaan.

Designer dan developer kembali berdiskusi untuk memperbaikinya.

Masalah kecil seperti apakah padding seharusnya 16px atau 20px dapat berkembang menjadi diskusi yang panjang.

Mengapa Perbedaan Bisa Terjadi?

Perbedaan ini bukan selalu disebabkan oleh kesalahan designer atau developer. Masalah utamanya adalah adanya proses penerjemahan dari satu sistem ke sistem lainnya.

Designer bekerja menggunakan nilai yang terdapat di Figma, sedangkan developer menggunakan nilai yang ditulis dalam kode.

Sebagai contoh, designer mungkin menggunakan:

Primary color: #6366F1

Border radius: 8px

Spacing: 16px

Font size: 14px

Kemudian developer harus menerjemahkan nilai tersebut ke dalam CSS atau framework yang digunakan.

Semakin banyak proses penerjemahan, semakin besar kemungkinan terjadi perbedaan.

Solusinya Bukan Sekadar Menggunakan Handoff Tool yang Lebih Baik

Salah satu pendekatan yang umum dilakukan adalah mencari handoff tool yang lebih baik.

Namun, masalah sebenarnya bukan pada kualitas tool handoff. Masalahnya adalah kita masih memiliki proses handoff itu sendiri.

Jika designer dan developer menggunakan sumber nilai yang berbeda, maka akan selalu ada kemungkinan terjadi perbedaan ketika desain diterjemahkan menjadi kode.

Menghilangkan Translation Step

Pendekatan yang lebih efektif adalah menghilangkan proses penerjemahan tersebut.

Caranya adalah dengan menggunakan shared design token system.

Design token merupakan nilai-nilai dasar yang digunakan secara konsisten dalam sebuah design system, seperti:

Warna

Typography

Spacing

Border radius

Shadow

Ukuran komponen

Breakpoint

Daripada designer dan developer menentukan nilai tersebut secara terpisah, keduanya menggunakan sumber data yang sama.

Satu Sumber Kebenaran

Misalnya kita memiliki token:

{ "color": { "primary": "#6366F1" }, "spacing": { "medium": "16px" }, "radius": { "medium": "8px" } }

Data tersebut menjadi single source of truth.

Designer menggunakan nilai tersebut di Figma, sementara developer menggunakan nilai yang sama di dalam kode.

Dengan demikian, tidak perlu lagi menerjemahkan nilai dari Figma secara manual ke CSS.

Menggunakan Style Dictionary

Salah satu tool yang dapat digunakan untuk membangun sistem seperti ini adalah Style Dictionary.

Style Dictionary memungkinkan satu file token digunakan untuk menghasilkan berbagai format yang dibutuhkan oleh project.

Satu Token JSON untuk Berbagai Platform

Kita dapat menyimpan design token dalam satu file JSON.

Kemudian token tersebut dapat ditransformasikan menjadi beberapa output, seperti:

Figma Tokens melalui plugin Tokens Studio

CSS Custom Properties

TypeScript constants

Format lain yang dibutuhkan oleh aplikasi

Contohnya, sebuah token warna:

{ "color": { "primary": "#6366F1" } }

Dapat menghasilkan CSS variable:

:root { --color-primary: #6366F1; }

Dan juga dapat digunakan sebagai constant di TypeScript:

export const colorPrimary = "#6366F1";

Nilainya tetap berasal dari sumber yang sama.

Mengapa Ini Lebih Baik?

Dengan pendekatan tersebut, ketika sebuah nilai berubah, perubahan dapat dilakukan dari sumber token.

Misalnya warna primary diubah dari:

#6366F1

menjadi:

#4F46E5

Maka output untuk CSS, TypeScript, dan Figma dapat diperbarui berdasarkan token tersebut.

Hal ini mengurangi kemungkinan designer menggunakan nilai lama sementara developer sudah menggunakan nilai baru.

Menggabungkan Design Token dengan Component Library

Design token saja belum cukup untuk menghilangkan seluruh masalah antara designer dan developer.

Langkah berikutnya adalah membangun component library yang digunakan secara konsisten oleh kedua pihak.

Komponen Figma dan React Harus Berjalan Bersamaan

Setiap komponen sebaiknya memiliki representasi yang konsisten antara desain dan implementasi.

Contohnya adalah komponen Button.

Di Figma, Button memiliki:

Primary variant

Secondary variant

Disabled state

Small size

Medium size

Large size

Di React, Button juga memiliki struktur dan variant yang sama.

<Button variant="primary" size="medium"> Submit </Button>

Dengan demikian, designer tidak mendesain komponen yang tidak tersedia di library developer, dan developer juga tidak membuat komponen yang tidak memiliki representasi desain yang jelas.

Figma dan React dalam Kondisi Lockstep

Idealnya, perubahan pada sebuah komponen dilakukan secara bersamaan.

Misalnya desain Button berubah dari radius 8px menjadi 10px.

Perubahan tersebut tidak hanya dilakukan di Figma, tetapi juga pada implementasi React melalui design token yang digunakan bersama.

Dengan cara ini, kedua sisi tetap sinkron.

Mengubah Cara Designer dan Developer Berdiskusi

Pendekatan ini bukan hanya masalah teknis. Cara kerja tim juga ikut berubah.

Dalam workflow tradisional, diskusi sering berisi pertanyaan seperti:

"Apakah implementasi ini sudah sesuai dengan desain?"

Kemudian developer dan designer membandingkan hasil implementasi dengan spesifikasi yang ada.

Dari "Apakah Ini Sesuai?" Menjadi "Apakah Spesifikasinya Perlu Diubah?"

Dengan shared design token dan component library, diskusinya dapat berubah menjadi:

"Apakah desain ini memang seharusnya seperti ini?"

Ini merupakan percakapan yang lebih produktif.

Designer dan developer tidak lagi menghabiskan waktu untuk memperdebatkan apakah sebuah nilai seharusnya 16px atau 20px.

Sebaliknya, mereka dapat fokus pada pertanyaan yang lebih penting:

Apakah spacing ini memberikan pengalaman pengguna yang lebih baik?

Apakah komponen ini perlu memiliki variant baru?

Apakah design system perlu diperbarui?

Apakah perubahan ini harus diterapkan ke seluruh produk?

Kesimpulan

Masalah handoff antara designer dan developer sebenarnya bukan hanya masalah komunikasi atau kurangnya tool.

Masalah yang lebih mendasar adalah adanya proses penerjemahan dari desain ke kode.

Dengan menggunakan shared design token system, Figma dan codebase dapat menggunakan nilai yang sama. Style Dictionary dapat digunakan untuk mengubah satu sumber token menjadi berbagai format, seperti CSS variables dan TypeScript constants, sementara Tokens Studio dapat membantu menghubungkan token dengan Figma.

Jika pendekatan ini digabungkan dengan component library yang menjaga Figma dan React tetap sinkron, maka designer dan developer tidak lagi bekerja dengan dua sumber kebenaran yang berbeda.

Tujuan akhirnya bukan sekadar membuat proses handoff menjadi lebih cepat.

Tujuannya adalah menghilangkan kebutuhan untuk melakukan handoff secara tradisional dan membuat designer serta developer bekerja menggunakan sistem desain yang sama.