Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Memahami cara mengonversi desain Figma menjadi aplikasi Flutter
- Menggunakan plugin Figma untuk mengekspor komponen Flutter
- Menerjemahkan Auto Layout ke widget Column, Row, dan Padding
- Menerapkan ThemeData untuk konsistensi tampilan aplikasi
Capaian Pembelajaran
Mahasiswa mampu mengubah desain aplikasi mobile Figma menjadi kode Flutter, menerjemahkan strukturnya ke widget dasar, dan menggunakan tema untuk menjaga konsistensi visual seluruh aplikasi.
Desain ke Flutter
Flutter adalah framework dari Google untuk membuat aplikasi lintas platform menggunakan bahasa Dart. Salah satu kekuatannya adalah keselarasan dengan desain visual modern. Desain Figma dapat dijadikan titik awal untuk membangun widget Flutter yang sesuai, baik melalui plugin konversi otomatis maupun penulisan manual.
Flutter membangun antarmuka dari komponen yang disebut widget, disusun secara hierarki seperti pohon. Pemahaman atas cara menyusun widget yang rapi sangat menentukan mudah atau sulitnya sebuah layar dibangun dan dirawat, karenanya struktur Figma yang baik menghasilkan struktur Flutter yang baik pula.
Plugin Figma ke Flutter
Plugin seperti Figma to Flutter atau Full App memudahkan mengekspor desain menjadi kode Dart. Plugin ini membaca elemen Figma dan menghasilkan widget Flutter yang dapat ditempel ke proyek. Namun seperti pada konversi HTML, hasil yang dihasilkan sering perlu disesuaikan: kode bersarang yang dalam sering perlu dipangkas dan dipecah menjadi widget yang lebih bermakna.
Langkah akarnya sederhana: pilih frame atau komponen di Figma, jalankan plugin, lalu salin kode Dart yang dihasilkan dan tempelkan ke file Flutter. Pastikan desain sudah menggunakan Auto Layout agar struktur widget yang dihasilkan rapi dan sesuai urutan.
Auto Layout menjadi Widget
Auto Layout di Figma mengatur elemen secara otomatis, mirip dengan tata letak yang dapat memuat dan menyesuaikan diri. Konsep ini sangat dekat dengan perilaku widget Flutter: rangkaian elemen vertikal dipetakan ke Column, rangkaian horizontal ke Row, dan ruang dalam dirangkum ke Padding.
- Auto Layout vertikal menghasilkan widget Column.
- Auto Layout horizontal menghasilkan widget Row.
- Jarak antar elemen dalam Auto Layout menghasilkan properti spacing.
- Padding di Figma diterjemahkan menjadi widget Padding di Flutter.
ThemeData untuk Konsistensi
Daripada menulis warna dan gaya secara berulang, Flutter menyediakan ThemeData pada level aplikasi. Simpan palet warna merek, gaya teks, dan gaya tombol ke dalam tema sehingga setiap halaman secara otomatis memakai tampilan yang seragam. Perubahan dilakukan sekali dan berlaku ke seluruh aplikasi, menjaga konsistensi seperti prinsip desain yang dipelajari di Figma.
Contoh sederhana: atur primaryColor dari tema aplikasi ke warna biru merek, lalu komponen seperti tombol utama memakai warna tersebut. Apabila warna merek berubah, cukup ganti satu nilai pada tema tanpa mengubah setiap halaman. Hal ini sekaligus mewujudkan prinsip efisiensi dan reusabilitas dalam pengembangan aplikasi.
Memahami Widget Dasar
Flutter menyediakan banyak widget untuk menyusun tampilan: Container dan SizedBox untuk ruang, Text untuk teks, Image untuk gambar, serta Icon untuk ikon. Kombinasi Column, Row, dan Padding membentuk hampir semua tata letak. Memahami pembagian antara widget yang mengatur struktur (seperti Column) dan widget yang menampilkan isi (seperti Text) membuat kode lebih mudah dibaca dan dirawat.
Kebiasaan membangun widget kecil yang dapat dipakai ulang, misalnya satu komponen kartu produk, sangat membantu. Komponen ini dapat diletakkan di halaman homepage maupun detail tanpa mengulang kode. Pemisahan ini sejalan dengan prinsip komponen di Figma, sehingga mental model desainer tetap konsisten saat berpindah antara desain dan kode.
Iterasi dengan Hot Reload
Keunggulan Flutter adalah hot reload: perubahan kode dapat dilihat hasilnya hampir seketika tanpa memulai ulang aplikasi. Manfaatkan fitur ini untuk menyamakan desain dari Figma ke aplikasi secara bertahap. Ubah satu properti, misalnya warna atau jarak, lalu perhatikan perubahan di perangkat atau emulator. Proses iterasi cepat ini mempercepat penyetaraan visual dengan desain asli.
Saat membandingkan aplikasi dengan desain, periksa kesamaan warna, ukuran teks, dan jarak antar elemen secara teliti. Perbedaan kecil antara desain dan aplikasi sering terjadi dan merupakan hal wajar; yang penting hasil akhir tetap konsisten dan nyaman. Dokumentasikan penyesuaian yang dilakukan agar pengerjaan halaman lain semakin cepat dan hasilnya seragam.
Langkah Praktik
- Siapkan proyek Flutter baru dengan struktur folder Dart yang benar.
- Konversikan frame homepage menggunakan plugin Figma.
- Terjemahkan tata letak menjadi Column, Row, dan Padding secara manual.
- Susun ThemeData global dengan palet warna dan tipografi aplikasi.
- Jalankan aplikasi dan bandingkan hasilnya dengan desain asli.
Penutup dan Tugas Mandiri
Konversikan minimal halaman homepage dan detail produk ke Flutter, terapkan ThemeData sejak awal, lalu rapikan kode dengan widget yang bermakna. Setelah desain berjalan, praktik pemecahan masalah dan penyempurnaan akan dilanjutkan dalam konteks kuis dan tugas pada pertemuan berikutnya.