Pertemuan #5 – UI/UX Sintech 2025

🎯 Materi Utama – Komponen UI & Auto Layout

Topik Besar:
🔹 Button
🔹 Form
🔹 Navigation
🔹 Auto Layout (di Figma)

Materi dibuka dengan pengenalan fungsi dan prinsip dari setiap komponen. Mentor menjelaskan bahwa UI yang efektif itu bukan cuma estetik, tapi juga harus fungsional dan familiar bagi pengguna.

🔘 Komponen yang Dipelajari

• Button:
  Gak semua tombol itu sama! Kita bahas button primary vs secondary, hover state, disabled state, dan pentingnya kontras.

• Form:
  Elemen penting untuk input data dari user. Kita pelajari cara menata label, input field, checkbox, dan feedback error/success.

• Navigation:
  Dari navbar, tab, hingga sidebar. Kita bahas bagaimana struktur navigasi bisa memengaruhi alur pengguna menjelajah aplikasi.

• Auto Layout:
  Nah ini dia bintangnya! Peserta diajarkan cara menggunakan Auto Layout di Figma agar desainnya responsif, rapi, dan gampang diatur ulang saat ada perubahan.

💻 Latihan di Tempat

Peserta langsung praktek di Figma untuk:

✅ Membuat 1 komponen button dengan 3 kondisi (normal, hover, disabled)
✅ Merancang satu form sederhana dengan input dan tombol submit
✅ Menyusun frame dengan Auto Layout untuk nav + konten utama

Mentor juga membagikan file template mini project yang bisa dikembangkan jadi aset portofolio!

📢 Insight Seru dari Mentor

📌 “Desainmu gak bakal scalable kalau gak mulai pakai auto layout.”
📌 “Lebih baik simple tapi fungsional, daripada rame tapi gak jelas alurnya.”
📌 “Navigation = arah jalan. Kalau orang bingung, ya dia bisa tersesat di aplikasi kamu.”

📝 Tugas Mandiri

Belum ada tugas besar, tapi peserta diminta:

• Mereplikasi ulang komponen UI menggunakan auto layout

• Simpan hasil desain di Figma masing-masing

• Optional: share hasil desain di grup untuk saling feedback

🪑 Suasana Belajar

Lab penuh semangat! Beberapa peserta tampak langsung klik dengan fitur Auto Layout, dan mulai bereksperimen sendiri. Ada juga yang saling tukar shortcut keyboard biar makin lincah pakai Figma.

Mentor aktif bantu dan review desain langsung di layar peserta, bikin sesi terasa interaktif banget!

💬 Kesimpulan

Pertemuan ini ngebuka mata kita soal pentingnya efisiensi dalam desain. UI itu bukan sekadar bentuk, tapi juga sistem. Dan dengan Auto Layout, sistem itu jadi lebih mudah diatur dan dijaga.

“Kalau desainmu gak reusable, kamu akan kelelahan saat projek besar nanti.”

📌 Jangan lupa simpan hasil desainmu baik-baik, karena minggu depan kita mulai masuk ke design system mini. Let's gooo! 💥

📷 Dokumentasi kegiatan dan template latihan bisa dicek di IG
👉 @sintech_uinws

#Sintech2025 #UIUXDesign #AutoLayoutMastery #KomponenUI #HMJTIUINWS