Sinkronisasi Desain dan Kode dengan Token Desain

Saat membuat sistem desain di startup, terkadang hal itu justru memperlambat kecepatan kerja. Hal ini disebabkan oleh tugas berulang yang membosankan saat pengembang harus memindahkan nilai yang telah diubah oleh desainer ke dalam kode. Proses ini harus diotomatisasi agar tim dapat fokus pada pemikiran produk yang esensial.

Menyatukan Bahasa Desain dengan Token

Jangan memetakan nilai alat desain ke variabel kode satu per satu. Jika Anda memperkenalkan token desain, tautan ini akan berubah menjadi data.

1. Token Primitif: Mendefinisikan nilai warna mentah seperti blue-500.
2. Token Semantik: Menentukan penggunaan sebenarnya seperti action.primary.bg dan merujuk pada primitif di atas.
3. Pemetaan Variabel CSS: Menyimpan token semantik sebagai variabel CSS.

Dengan pengaturan ini, meskipun desainer mengubah nilai warna, pengembang tidak perlu menyentuh kode. Sistem akan memperbarui file CSS secara otomatis. Skala font juga harus didefinisikan secara matematis dengan memasukkan Base dan Ratio di panel token Penpot. Menggunakan rumus $Size_{n} = Base \times Ratio^{n}$ akan memastikan konsistensi desain tetap terjaga secara paksa.

Otomatisasi Integrasi Penpot dan GitHub

Memeriksa perubahan desain secara manual oleh pengembang tidaklah efisien. Penpot mengikuti standar token desain W3C, sehingga pembangunan pipeline sangat dimungkinkan.

1. Buat kunci API Penpot.
2. Buat file penpot-export.config.js di root proyek. Di sini, atur token yang akan diekspor dan jalur penyimpanannya.
3. Instal paket @penpot-export/cli, lalu jalankan perintah npx penpot-export.

Ratusan nilai token akan masuk ke basis kode dalam sekejap. Kesalahan manusia yang terjadi saat input manual akan hilang. Layanan skala besar seperti Shopify juga memanfaatkan alur kerja berbasis token ini untuk memperbarui desain secara instan tanpa modifikasi kode.

Memahami Niat Perubahan Desain melalui Tinjauan Git

Jangan menyampaikan perubahan desain melalui pesan Slack atau lisan. Kelola perubahan tersebut dengan Git yang paling familiar bagi pengembang.

1. Tulis file .github/workflows/design-sync.yml untuk mengotomatisasi ekstraksi token desain.
2. Secara otomatis buat PR yang berisi perubahan menggunakan action peter-evans/create-pull-request.
3. Saat PR diunggah, periksa pesan commit style(tokens) dan lihat perbedaannya (diff) selama proses tinjauan kode.

Pengembang akan langsung memahami nilai apa yang berubah dan mengapa hal itu berubah melalui PR. Mereka pun menghemat waktu yang biasanya dihabiskan untuk bertanya mengapa terjadi perubahan.

Hidup Berdampingan dengan Kode Warisan (Legacy Code)

Jangan mencoba mengubah semua kode sekaligus. Teknik fallback yang mencampurkan CSS lama dengan token baru adalah pendekatan yang realistis.

1. Letakkan file token yang dihasilkan secara otomatis di direktori src/styles/tokens.
2. Gunakan format var(--new-token, #legacy-value) di CSS yang sudah ada.

Komponen yang tokennya belum didefinisikan akan tetap mempertahankan nilai aslinya. Anda dapat memodernisasi sistem sedikit demi sedikit tanpa khawatir UI akan rusak. Mulailah dengan menghubungkan satu token warna kecil ke pipeline. Ini adalah cara untuk mencegah utang teknis besar yang akan terjadi di masa depan.