Prinsip Dasar UI Design

Sering Pakai Figma? 5 Fitur Ini Bisa Bikin Kerjamu Lebih Cepat
UI/UX Design

Sering Pakai Figma? 5 Fitur Ini Bisa Bikin Kerjamu Lebih Cepat

Kalau hampir setiap hari kamu membuka Figma, mungkin kamu sudah terbiasa dengan frame, component, auto layout, dan berbagai tools dasar lainnya. Tapi, fitur Figma ternyata cukup banyak dan beberapa di antaranya sering terlewat karena letaknya nggak selalu terlihat jelas. Padahal, beberapa fitur tersebut bisa memangkas pekerjaan yang biasanya kamu lakukan berulang kali. Coba bayangkan kamu harus mengganti nama puluhan layer, mengubah banyak komponen sekaligus, atau membuat desain yang punya beberapa kondisi berbeda. Kalau kamu mengerjakannya satu per satu, waktunya tentu lebih lama. Nah, daripada terus melakukan pekerjaan yang sama secara manual, coba kenalan dengan beberapa fitur Figma berikut. 1. Rename Layers, Fitur Figma untuk Ganti Banyak Nama Sekaligus Pernah punya file Figma dengan puluhan layer bernama “Frame 1”, “Frame 2”, atau “Rectangle 34”? Kalau iya, kamu pasti tahu betapa malasnya mengganti nama semuanya satu per satu. Figma punya fitur Rename Layers yang bisa membantu kamu mengganti nama banyak layer sekaligus. Kamu cukup memilih beberapa layer, membuka menu Rename, lalu menentukan pola nama yang kamu inginkan. Fitur ini juga bisa membantu kamu membuat nama layer lebih rapi. Misalnya, kamu ingin mengubah nama beberapa ikon menjadi Icon_1, Icon_2, dan seterusnya. Kamu bahkan bisa menambahkan prefix atau mengganti bagian tertentu dari nama yang sudah ada. Kalau file desainmu mulai penuh, fitur sederhana seperti ini bisa menghemat cukup banyak waktu. 2. Component Properties Biar Nggak Bolak-Balik Edit Layer Kalau kamu sering menggunakan component, mungkin kamu pernah mengalami situasi ketika harus membuka banyak layer hanya untuk mengubah satu bagian kecil. Figma punya Component Properties yang memungkinkan kamu menentukan bagian mana dari sebuah component yang bisa diubah langsung dari panel Properties. Contohnya, kamu punya button component dengan ikon di dalamnya. Dengan boolean property, kamu bisa membuat ikon tersebut muncul atau disembunyikan tanpa harus masuk dan mengedit component secara manual. Kamu juga bisa menggunakan text property untuk mengganti tulisan atau instance swap untuk menukar komponen tertentu. Jadi, satu component bisa punya beberapa kebutuhan tanpa membuat kamu bekerja dari awal lagi. 3. Variables untuk Mengatur Banyak Nilai Sekaligus Pernah mengerjakan desain yang punya light mode dan dark mode? Kalau kamu mengubah warna satu per satu, pekerjaan bisa cepat terasa melelahkan. Nah, Variables bisa membantu menyimpan nilai seperti warna, angka, teks, dan nilai boolean yang kemudian bisa kamu gunakan kembali di berbagai bagian desain. Fitur ini juga berguna ketika kamu ingin membuat desain yang punya beberapa kondisi. Misalnya, kamu membuat tampilan aplikasi untuk light mode dan dark mode. Dengan variable modes, kamu bisa menyimpan nilai berbeda untuk setiap kondisi sehingga kamu nggak perlu membuat banyak frame hanya untuk menampilkan perubahan warna. Baca juga: 6 Rekomendasi Plugin AI Figma yang Wajib Kamu Coba 4. Suggest Auto Layout untuk Bantu Menata Layout Auto layout mungkin sudah sering kamu dengar. Fitur ini membantu elemen dalam sebuah frame menyesuaikan posisi, jarak, dan ukurannya ketika isi desain berubah. Figma juga menyediakan Suggest auto layout, yang bisa mencoba mengenali susunan objek dalam sebuah frame lalu menambahkan auto layout sesuai struktur yang ditemukan. Fitur ini cocok ketika kamu punya desain yang sudah jadi tetapi belum menggunakan auto layout. Daripada mengatur semuanya dari awal, kamu bisa mencoba Suggest auto layout sebagai titik awal. Setelah itu, kamu tetap perlu mengecek hasilnya dan menyesuaikan bagian yang belum sesuai. Lumayan buat menghemat waktu, terutama saat mengerjakan desain dengan banyak elemen. 5. Dev Mode untuk Cek Desain Sebelum Masuk Development Kalau kamu pernah bekerja bareng developer, kamu mungkin tahu bahwa proses handoff desain bisa cukup merepotkan. Developer perlu melihat ukuran, jarak, warna, aset, hingga detail komponen sebelum mulai mengerjakan kode. Figma menyediakan Dev Mode untuk membantu proses tersebut. Melalui Dev Mode, developer bisa melihat detail desain, memeriksa properti dan nilai yang digunakan, melihat variable, mengunduh aset, sampai mendapatkan potongan kode tertentu. Kamu sebagai desainer juga bisa menandai desain yang sudah siap masuk tahap pengembangan. Jadi, sebelum mengirim file ke tim developer, kamu bisa memastikan bagian yang mereka butuhkan sudah lebih mudah ditemukan. Coba Fitur Figma yang Selama Ini Kamu Lewatkan Lima fitur tadi memang bukan semuanya fitur yang baru muncul di Figma. Justru itu yang menarik. Kamu mungkin sudah lama menggunakan Figma, tetapi masih mengerjakan beberapa hal secara manual karena belum pernah mencoba fitur yang bisa membantu mempercepatnya. Coba pilih satu fitur yang paling sesuai dengan pekerjaanmu. Kalau file-mu sering berantakan, mulai dari Rename Layers. Banyak membuat component? Coba pelajari Component Properties. Untuk desain dengan beberapa kondisi, kamu bisa mengeksplorasi Variables. Nggak perlu dipelajari semuanya dalam satu hari. Pilih yang paling sering kamu butuhkan, lalu lihat sendiri apakah workflow-mu terasa lebih cepat.

UI/UX Design

Prinsip Dasar UI Design: Menerapkan Hukum dan Prinsip Dasar UI Design untuk Pengalaman Pengguna Optimal

Di dunia digital yang serba cepat kayak sekarang, tampilan dan kenyamanan antarmuka aplikasi atau website jadi penentu utama apakah pengguna bakal betah atau malah kabur. Nah, di sinilah pentingnya memahami prinsip dasar UI design supaya pengalaman pengguna (user experience) jadi makin optimal. Yuk, kita bahas hukum dan prinsip dasar UI design yang sering dipakai para UI/UX designer buat bikin tampilan digital yang nggak cuma estetik, tapi juga enak banget dipakai. Hukum dan Prinsip Dasar UI Design 1. Fitts’s Law Hukum dan prinsip dasar UI design yang pertama namanya fitts’s law, atau makin besar makin gampang di klik. Intinya Fitt’s Law ini ngomongin seputar jarak, ukuran, sampai elemen di layar. Terus ngomongin juga segala ukuran itu dan pengaruhnya ke kecepatan pengguna dalam klik. Nah, makin besar tombolnya otomatis makin gampang orang nge-klik. Fitts’s Law pertama kali diperkenalkan oleh Paul Fitts pada tahun 1954. Cara Terapin Fitts’s Law di UI Design: 1. Bikin tombol gedean dikit: Jangan pelit ukuran buat tombol penting, apalagi di mobile. 2. Tempatin elemen penting deket-deket: Misalnya tombol “Beli Sekarang” deket sama foto produk, jadi user nggak perlu scroll jauh. 3. Minimalin gerakan pengguna: Supaya pengguna nggak capek bolak-balik layar cuma buat nyari fitur utama. Intinya, jangan bikin pengguna repot. Biar mereka cepat, praktis, dan nggak mikir dua kali pas pakai aplikasimu. 2. Hick’s Law Hukum dan prinsip UI design selanjutnya adalah Hick’s Law yang ngajarin para desainer nggak bikin terlalu banyak opsi. Intinya kalau terlalu banyak pilihan yang disajikan, maka pengguna juga bakal bingung buat ambil keputusan. Jadi ya bikin opsi seperlunya aja.Tokoh yang pertama kali ngusulin hick’s law adalah William Edmund Hick dan Ray Hyman pada tahun 1952. Hukum dan prinsip UI design yang ke-3 adalah gestalt, prinsip satu ini ngebahas cara otak manusia melihat dan menyortir elemen visual. Desain UI yang dianggap bagus harus menerapkan prinsip ini biar mudah dipahami pengguna. 1. Similarity (Kemiripan): Elemen yang mirip bentuk, warna, atau ukuran sebaiknya digabungin. Contoh: semua ikon navigasi punya warna dan gaya yang sama. 2. Proximity (Kedekatan): Elemen yang fungsinya saling nyambung, letakin deket-deket. Misal, label dan field input di form. 3. Continuity (Alur Visual): Desain alurnya harus ngalir. Mata user bisa langsung tahu kemana harus fokus duluan. 4. Closure (Penutupan): Kadang otak bisa “nutupin” bentuk yang nggak lengkap. Makanya logo simpel tetap bisa kuat banget. 3. Prinsip Gestalt Hukum dan prinsip UI design yang terakhir adalah mempertimbangkan aturan warna 60-30-10. Kenapa harus pakai aturan ini? Jawabannya biar desain nggak terlalu ramai, tapi tetap tampak elegan. Maksud aturan warna 60–30–10 adalah prinsip desain yang melibatkan penggunaan tiga palet warna dengan proporsi tertentu: 60% untuk warna dominan, 30% untuk warna sekunder, dan 10% untuk warna aksen. Gimana cara penerapannya? Gampang simak 3 tips ini: 1. 60% warna dominan: Dipakai buat background atau elemen besar. 2. 30% warna sekunder: Buat header, sidebar, atau elemen pendukung. 3. 10% warna aksen: Buat tombol, ikon, atau link yang pengen ditonjolkan. Nah, itulah beberapa prinsip dasar UI design yang bisa kamu terapkan buat ningkatin pengalaman pengguna (user experience). Intinya Desain UI yang oke nggak melulu seputar “tampil keren”, tapi soal gimana bikin pengguna ngerasa nyaman, gampang navigasi, dan mau balik lagi.

Scroll to Top