Dalam proses pembuatan website atau aplikasi, biasanya alurnya adalah: desainer membuat rancangan tampilan di Figma, lalu developer menerjemahkannya ke dalam kode HTML, CSS, dan JavaScript. Namun, pada kenyataannya tidak selalu demikian. Ada kalanya justru developer sudah lebih dulu memiliki kode HTML yang fungsional, kemudian desainer diminta membuat ulang tampilan tersebut ke dalam Figma.
Mungkin terdengar terbalik, tapi praktik membuat desain Figma dari kode HTML memiliki alasan kuat dan banyak manfaat, baik bagi desainer maupun developer. Artikel ini akan membahas secara mendalam mengapa langkah ini dilakukan, manfaatnya, hingga situasi di mana hal tersebut diperlukan.
Apa Itu Desain Figma dari Kode HTML?
Secara sederhana, membuat desain Figma dari HTML berarti mengambil sebuah tampilan website yang sudah jadi (atau sebagian jadi) dalam bentuk kode, lalu membawanya kembali ke Figma untuk didesain ulang, dirapikan, atau dijadikan referensi desain.
Contohnya:
Developer sudah membuat tampilan login sederhana dengan HTML dan CSS.
Desainer kemudian membuat ulang tampilan tersebut di Figma untuk memberikan sentuhan visual yang lebih menarik, menambahkan komponen UI, atau membuat variasi versi mobile.
Dengan kata lain, ini adalah proses reverse design – bukan dari desain ke kode, tapi dari kode ke desain.
Mengapa Harus Membuat Desain Figma dari Kode HTML?
Ada beberapa alasan mengapa praktik ini dilakukan, antara lain:
1. Website Sudah Ada, Tapi Belum Ada Desain Resminya
Banyak bisnis kecil memulai dengan langsung membuat website tanpa desain UI di awal. Developer biasanya membuat tampilan sederhana dengan HTML dan CSS agar cepat online. Setelah berjalan, barulah tim menyadari perlunya desain profesional di Figma sebagai acuan pengembangan lebih lanjut.
2. Dokumentasi Visual untuk Kolaborasi Tim
Desain di Figma bukan hanya soal estetika, tapi juga sebagai dokumentasi visual. Dengan memindahkan tampilan HTML ke Figma, tim desain, developer, dan marketing punya referensi visual yang konsisten. Hal ini memudahkan jika ada perbaikan tampilan di masa depan.
3. Membuat Style Guide dan Design System
Dari website yang sudah jadi, desainer bisa menyusun ulang elemen-elemen UI ke dalam design system di Figma. Misalnya warna, font, tombol, form input, dan ikon. Dengan begitu, setiap elemen UI bisa dipakai ulang secara konsisten.
4. Mempermudah Iterasi Desain
Membuat perubahan langsung di HTML bisa memakan waktu lebih lama. Dengan memindahkan desain ke Figma, desainer bisa melakukan iterasi (perubahan warna, layout, komponen) lebih cepat tanpa mengganggu kode asli.
5. Konsistensi Antara Desain dan Kode
Jika hanya ada kode tanpa desain, ada risiko tampilan berubah-ubah karena developer menyesuaikan sendiri. Dengan mendesain ulang di Figma, tim punya acuan visual resmi yang harus diikuti developer berikutnya.
6. Persiapan untuk Redesign atau Rebranding
Sebuah website lama mungkin sudah berjalan bertahun-tahun. Untuk melakukan redesign, desainer perlu memindahkan tampilan lama ke Figma dulu agar bisa dibandingkan dengan konsep baru.
7. Meningkatkan Pengalaman Pengguna (UX)
HTML hanya menampilkan fungsi dasar. Dengan Figma, desainer bisa menambahkan prototyping interaktif untuk memperlihatkan alur pengguna dengan lebih jelas, sesuatu yang sulit dilakukan jika hanya mengandalkan kode mentah.
Manfaat Membuat Desain Figma dari HTML
Setelah tahu alasannya, mari kita lihat manfaat praktisnya:
Dokumentasi Visual yang Rapi – tim punya blueprint visual dari produk yang sudah ada.
Mempermudah Onboarding Anggota Baru – desainer atau developer baru bisa cepat memahami sistem dengan melihat desain di Figma.
Kolaborasi Lebih Lancar – Figma berbasis cloud, sehingga semua tim (developer, PM, desainer, marketing) bisa mengakses desain yang sama.
Proses Redesign Lebih Efisien – desainer tinggal memodifikasi dari desain lama tanpa harus mengutak-atik kode asli.
Memastikan Konsistensi UI/UX – setiap update bisa diuji coba di Figma sebelum diterapkan ke kode.
Situasi yang Umum Membutuhkan Slicing Kode ke Figma
Tidak semua proyek butuh proses ini. Namun, beberapa situasi berikut biasanya menjadi alasan utama:
Startup atau UMKM → Website awal dibuat seadanya, lalu didesain ulang setelah bisnis berkembang.
Proyek Freelance → Klien sudah punya website, tapi ingin desainer membuat versi Figma untuk redesign.
Proyek Redesign Skala Besar → Perusahaan ingin mengubah tampilan website lama secara menyeluruh.
Pembuatan Design System → Tim UI/UX butuh dokumentasi komponen untuk menjaga konsistensi antar produk.
Tantangan Membuat Desain Figma dari HTML
Meskipun bermanfaat, ada beberapa tantangan dalam proses ini:
Butuh Waktu Ekstra – memindahkan kode ke Figma berarti mendesain ulang dari nol.
Perbedaan Rendering – tampilan di browser kadang berbeda dengan hasil di Figma.
Tidak Semua Elemen Mudah Ditiru – animasi CSS atau interaksi JavaScript sulit dibuat ulang di Figma.
Komunikasi Antar Tim – desainer dan developer harus sejalan agar hasil Figma benar-benar representasi dari kode.
Tips Efektif Membuat Desain Figma dari HTML
Agar prosesnya lebih efisien, berikut beberapa tips yang bisa diterapkan:
Mulai dari Komponen Dasar – ambil tombol, form, navbar, lalu susun di Figma.
Gunakan Plugin Figma – ada plugin seperti HTML to Figma atau Figmify yang bisa membantu.
Buat Design System – jangan hanya menyalin tampilan, tapi buat sistem komponen yang bisa digunakan ulang.
Optimalkan untuk Versi Responsif – sekalian buat desain mobile dan tablet di Figma.
Kolaborasi dengan Developer – minta developer memberi catatan tentang logika atau batasan teknis.
Kesimpulan
Membuat desain Figma dari kode HTML mungkin terdengar terbalik, tetapi praktik ini sering dibutuhkan dalam proyek nyata. Alasan utamanya antara lain: website sudah jadi tapi belum ada desain resminya, kebutuhan dokumentasi visual, persiapan redesign, hingga pembuatan design system.
Manfaatnya pun besar: dokumentasi lebih rapi, mempermudah kolaborasi tim, mempercepat iterasi desain, hingga menjaga konsistensi UI/UX. Meski ada tantangan seperti perbedaan rendering dan waktu tambahan, hasil akhirnya tetap sangat berharga untuk pengembangan jangka panjang.
Jadi, jika Anda menemukan situasi di mana hanya ada kode HTML tanpa desain yang jelas, jangan ragu untuk membawanya ke Figma. Dengan begitu, Anda akan memiliki pondasi visual yang kuat untuk membangun, mengembangkan, atau merancang ulang produk digital dengan lebih terarah.
