Pengenalan Figma: Menggambar Denah Website Sebelum Menulis Kode

Halo Sobat Jurnal Coding! Sepanjang perjalanan kita di blog ini, kamu telah belajar banyak sekali ilmu teknis yang luar biasa. Kamu sudah pandai menulis struktur HTML, menghias warna dengan CSS, dan menggerakkan elemen dengan JavaScript.

Namun, coba tanyakan pada dirimu sendiri: Pernahkah kamu membuka aplikasi Text Editor (seperti VS Code), bersiap membuat proyek website baru, lalu kamu hanya diam melamun selama berjam-jam menatap layar hitam karena kamu tidak tahu harus mengetik apa?

Kamu mencoba membuat sebuah tombol, lalu kamu mengubah warnanya menjadi biru. Lima menit kemudian kamu merasa warna biru itu jelek, lalu kamu mengubah kodenya menjadi merah. Lalu kamu menggeser posisinya ke kiri, lalu ke kanan lagi. Akhirnya waktu seharian habis hanya untuk mengedit kode CSS yang tidak ada habisnya.

Itu adalah penyakit kronis programmer pemula yang disebut dengan "Coding Tanpa Desain".

### Analogi Membangun Gedung Pencakar Langit

Bayangkan sekumpulan tukang bangunan yang disuruh membangun gedung pencakar langit, tetapi sang arsitek belum memberikan kertas cetak biru (blueprint) atau gambar denahnya. Para tukang itu pasti akan menyemen batu bata secara asal-asalan, dan gedungnya dijamin akan runtuh!

Sebagai Web Developer, kamu tidak boleh langsung menulis baris kode sebelum kamu tahu persis seperti apa wujud website tersebut nantinya. Kamu harus menggambar "denah" website-nya terlebih dahulu. Di era modern ini, kita tidak menggambar denah menggunakan pensil dan kertas, melainkan menggunakan sebuah perangkat lunak desain ajaib bernama Figma.

### Mengapa Seluruh Industri Beralih ke Figma?

Figma adalah aplikasi desain antarmuka (UI/UX) berbasis peramban (browser) yang 100% gratis untuk pemula. Kamu bahkan tidak perlu menginstal apa pun di komputermu, cukup buka figma.com dan kamu siap menggambar.

Di dalam Figma, tidak ada aturan koding yang kaku. Kamu bebas menggunakan mouse untuk menyeret kotak (drag and drop), memilih warna dari palet sesuka hati, mencoba ratusan jenis font, dan menyusun tombol-tombol hingga terlihat sempurna di matamu. Jika desainnya dirasa jelek, kamu tinggal menghapusnya hanya dengan satu klik tombol Delete, tanpa perlu takut ada program yang error!

Kehebatan Figma untuk Programmer:

Hal yang paling disukai oleh programmer dari Figma adalah fitur "Inspect Mode" atau Mode Inspeksi.

Setelah kamu selesai menggambar tombol yang sangat cantik di Figma, kamu bisa mengeklik tombol tersebut. Di panel sebelah kanan layar, Figma akan secara otomatis memberikan KODE CSS JADI dari tombol yang kamu gambar itu!

Kamu tinggal melakukan "Copy dan Paste" kode CSS bayangan (box-shadow), warna latar, dan ketebalan font tersebut langsung ke dalam Text Editor VS Code milikmu.

### Perubahan Alur Kerja (Workflow) Profesional

Mulai hari ini, mari kita ubah cara kerjamu agar setara dengan alur kerja di perusahaan rintisan (Startup) teknologi:
1. Buka Figma terlebih dahulu.
2. Buat rancangan kotak-kotak tampilan website yang ada di kepalamu ke atas kanvas Figma. Tentukan warna latar, ukuran gambar, dan jarak antar teks.
3. Setelah desain visualnya disetujui (minimal oleh dirimu sendiri), barulah kamu membuka VS Code.
4. Terjemahkan gambar denah yang ada di Figma tersebut ke dalam baris kode HTML dan CSS.

Dengan memisahkan antara proses "Berpikir Desain" dan proses "Mengetik Kode", pekerjaanmu akan selesai 10 kali lebih cepat tanpa ada drama menghapus kode yang berulang-ulang. Silakan buat akun Figma sekarang juga, dan cobalah gambar kotak pertamamu!