Tips User-Interface

Terkadang kita bingung bagaimana cara mempresentasikan desain agar lebih dilihat oleh pengguna ataupun target pasar. Oleh karena itu kita membutuhkan mock up dari suatu produk. Mock up sendiri memiliki arti Secara umum bentuk visualisasi yang merepresentasikan desain dari sebuah produk sebelum nantinya direalisasikan. Umumnya, mock up akan digunakan ketika melakukan presentasi ataupun pitching di depan klien. Sederhananya, mock up akan membantu mereka untuk lebih memahami informasi dan juga konsep desain yang akan dibuat. Jika kamu menggunakan Figma, maka plugin ini akan sangat membantu kamu. Mockup Plugin menyediakan gambar-gambar besar yang cocok untuk berbagai jenis media mulai dari web hingga cetak. Baik kamu mencari mock upperangkat, elemen-elemen branding, atau sesuatu yang sedikit lebih unik, koleksi kami siap memenuhi kebutuhanmu. Kamu dapat menggunakan beberapa mock up yang menawarkan variasi bahan dan ukuran, disesuaikan dengan kebutuhan spesifikmu. Cukup pilih perangkat, pilih bingkai, dan desainmu akan muncul di layar. Plugin ini memiliki 3 fungsi utama: Mockup library. Cara paling cepat dan efisien untuk menggunakan mockup dalam proyekmu. Di sini, tersedia kumpulan besar mock up berkualitas tinggi dan paling populer yang siap digunakan untuk memperindah desainmu.Distort (Perspective) transformation. Jika kamu sudah memiliki sebuah mock up, maka dengan menggunakan plugin kami, kamu dapat mengubahnya dan menyisipkan desainmu ke dalam mock up tersebut.AI Surfaces Mockups. memberikan kamu kemampuan untuk memanfaatkan kecerdasan buatan guna mengubah vektor kamuke dalam berbagai jenis permukaan, sesuai dengan kebutuhan proyekmu. Kamu dapat dengan bebas memanfaatkan mockup plugin ini secara gratis untuk mendukung berbagai proyek pribadi maupun komersial yang kamu jalankan. Dengan dukungan dari mockup plugin ini, kamu dapat lebih leluasa mengeksplorasi kreativitasmu tanpa harus khawatir akan biaya tambahan. Cara menggunakan mockup plugin Langkah 1: Cari Mockup Plungin pada resource Cara menggunakan dimulai dengan langkah pertama yaitu mencari Mockup Plugin pada bagian resource. Di sana, kamu dapat dengan mudah menemukan opsi untuk mockup plugin dengan menjelajahi kategori yang tersedia atau menggunakan fitur pencarian untuk menemukannya secara langsung. Setelah menemukan plugin yang diinginkan, langkah selanjutnya adalah memilih opsi "Run Plugin" untuk mengaktifkannya dan memungkinkan kamu untuk memanfaatkan semua fitur yang disediakan. Dengan demikian, langkah pertama ini membantu kamu untuk memulai proses penggunaan mockup plugin dengan cepat dan efisien di Figma. Langkah 2: Cari media mock up yang akan digunakan Pada tahap ini, kamu memiliki kebebasan untuk menentukan jenis media apa yang ingin kamu gunakan untuk menampilkan desain UI/UX kamu. Sebagai contoh, kamu dapat memilih media handphone untuk menampilkan desain UI/UX yang telah kamu buat. Dengan memilih media handphone, kamu dapat menampilkan desain tersebut dalam konteks yang relevan dan memberikan gambaran yang lebih nyata tentang bagaimana desain tersebut akan terlihat di perangkat yang sebenarnya. Langkah 3: siapkan media mock up dan frame seukuran layar handphone Langkah ketiga dalam proses penggunaan mockup plugin adalah menyiapkan media mockup yang telah kamu pilih sebelumnya, serta frame seukuran layar handphone yang sesuai. Dengan menyiapkan frame seukuran layar handphone, kamu akan memiliki tempat yang ideal untuk menampilkan desain UI/UX kamu dengan lebih terperinci. Frame ini akan membantu kamu mengatur desain secara proporsional dan memastikan bahwa tampilan desain kamu akan sesuai dengan ukuran layar handphone yang diinginkan. Langkah 4: Masukan desain pada frame Langkah keempat dalam proses ini adalah memasukkan desain yang telah dipilih ke dalam frame yang sudah kamu persiapkan sebelumnya. Dengan memasukkan desain ke dalam frame, kamu akan memberikan konteks yang lebih nyata tentang bagaimana desain UI/UX kamu akan terlihat ketika diterapkan dalam situasi yang sesungguhnya. Selain itu, langkah ini memungkinkan kamu untuk mengevaluasi desain kamu dengan lebih baik dan memastikan bahwa semua elemen desain terlihat sesuai dengan harapan. Langkah 5: Buka mockup plungin Langkah kelima dalam proses ini adalah membuka mockup plugin setelah kamu menempatkan desain dalam frame.Setelah itu, kamu dapat melanjutkan dengan mengklik kanan pada layar dan mencari opsi untuk plugin di menu yang muncul. Setelah menemukan opsi plugin, lanjutkan dengan mencari mockup plugin yang telah kamu instal sebelumnya. Langkah 6: Plungin kalian akan menampilkan seperti ini Langkah keenam dalam proses ini adalah setelah kamu membuka plugin, maka tampilan modal akan muncul seperti ini. Modal tersebut akan menampilkan berbagai opsi dan fitur yang tersedia dalam plugin mockup. Dari sini, kamu dapat memilih berbagai macam pengaturan, seperti ukuran, orientasi, dan gaya mockup yang ingin kamu terapkan pada desain kamu. Selain itu, modal ini juga mungkin menawarkan opsi untuk menyesuaikan efek, bayangan, dan aspek visual lainnya dari mock up. Langkah 7: Pilih Distort pada menu plugin Langkah ketujuh dalam proses ini adalah memilih opsi "Distort" pada menu plugin. Dengan melakukan langkah ini, kamu akan membuka fitur yang memungkinkan kamu untuk menyesuaikan perspektif dan distorsi pada desain kamu sesuai dengan mockup yang kamu pilih sebelumnya. Opsi "Distort" ini akan memberikan fleksibilitas tambahan dalam menyesuaikan tampilan desain kamu agar sesuai dengan bentuk, sudut pandang, dan dimensi dari mockup yang digunakan. Langkah 8: Pilih vector shape pada mockup Langkah kedelapan dalam proses ini adalah memilih vektor bentuk pada mockup. Beberapa mockup memiliki nama layer yang sudah jelas, dan kalian bisa melihat tulisan 'change this' pada mockup tersebut. Dengan memilih vektor bentuk, kalian akan dapat mengakses elemen-elemen yang mungkin perlu disesuaikan, seperti warna, bentuk, atau ukuran, sesuai dengan desain yang ingin kalian terapkan. Langkah 9: Pilih frame desain Langkah kesembilan dalam proses ini adalah memilih frame desain setelah memilih layar pada mockup. Setelah memilih layar pada mockup, langkah selanjutnya adalah memilih frame yang sudah kamu masukkan desain yang ingin kalian pasang pada mockup tersebut. Dengan memilih frame desain yang tepat, kamu dapat memastikan bahwa desain yang telah kalian buat akan sesuai dengan konteks mockup yang telah dipilih sebelumnya. Langkah 10: Klik apply Langkah kesepuluh dalam proses ini adalah setelah kedua layar tersebut dipilih, maka tampilan pada modal mockup plugin akan berubah sesuai dengan desain yang telah kamu pilih. Langkah terakhir yang dapat kamu lakukan adalah menekan tombol "apply". Dengan menekan "apply", kamu akan memberlakukan perubahan yang telah kamu terapkan pada desain secara langsung ke dalam mockup. Selesai, dan mockup yang telah kamu buat sekarang sudah siap digunakan secara langsung. Dengan proses yang telah dilalui, kamu telah berhasil mengintegrasikan desain kamu ke dalam mockup dengan lancar dan efisien. Mockup Plugin: Membantu dalam proses presentasi Desain 🎨 Dari beragam fitur dan kemampuan dalam menghasilkan mockup yang menarik dan profesional hingga memudahkan dalam menyajikan desain kepada klien atau tim, plugin mockup menjadi alat yang sangat berguna dalam proses presentasi desain. Mau mencoba menggunakan plugin mockup untuk meningkatkan kualitas presentasi desainmu? Yuk, temukan lebih banyak tutorial dan sumber belajar gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design , kamu dapat mengasah keterampilan dan memperkaya portfolio desainmu 🚀

Komponen adalah elemen-elemen yang bisa kamu gunakan lagi dalam desain-desainmu. Komponen membantu kamu menciptakan dan mengelola desain yang konsisten di berbagai proyek. Kamu bisa membuat komponen dari berbagai lapisan atau objek yang udah kamu desain. Ini bisa berbagai macam, seperti tombol, ikon, tata letak, dan lain sebagainya. Ada dua hal yang perlu kamu ketahui tentang sebuah komponen: Sebuah komponen utama mendefinisikan properti dari komponen tersebut.Sebuah instance itu seperti salinan dari komponen yang bisa kamu pake lagi dalam desainmu. Instance ini terhubung ke komponen utama dan nerima pembaruan apa aja yang diaplikasiin ke komponen itu. Kamu bisa bikin komponen buat dipakai dalam satu file. Atau, kamu bisa pake library tim buat berbagi komponen dan gaya di semua file dan proyek. Langkah 1: Pilih item yang ingin dijadikan komponen Perhatikan desainmu dengan saksama, lalu tentukan objek atau kelompok objek yang ingin kamu ubah menjadi komponen. Objek tersebut bisa berupa tombol, ikon, header, atau elemen lain yang ingin kamu gunakan kembali.Gunakan alat pemilih seperti mouse atau trackpad untuk mengklik atau menyoroti item yang ingin kamu jadikan komponen. Pastikan untuk memilih semua bagian dari objek jika objek tersebut terdiri dari beberapa elemen. Langkah 2: Klik kanan dan pilih create component Gunakan mouse atau trackpad untuk mengklik kanan pada objek atau grup objek yang telah kamu pilih. Setelah kamu mengklik kanan pada objek, akan muncul menu konteks. Di dalam menu konteks, cari opsi yang berkaitan dengan pembuatan komponen. Biasanya, opsi ini akan disebut "Create Component" atau "Buat Komponen". Klik pada opsi tersebut. Langkah 3: Component siap untuk digunakan Dengan memanfaatkan komponen, kamu memiliki keunggulan untuk melakukan perubahan pada item secara efisien dengan hanya mengedit main component. Misalnya, ketika kamu membuat perubahan pada main component, seperti mengubah warna, ukuran, atau gaya, perubahan tersebut akan secara otomatis disinkronkan ke semua item yang menggunakan komponen tersebut dalam desainmu. Dengan demikian, penggunaan komponen memungkinkan kamu untuk mengelola konsistensi desain dengan lebih efektif dan menyeluruh dalam proyekmu. Manfaat dari penggunaan komponen: Menghemat waktu pengerjaan dengan menggunakan komponen yang sama juga membantu kamu meningkatkan konsistensi desain dan mempercepat proses pengembangan, karena setiap perubahan yang kamu buat pada komponen akan secara otomatis diterapkan pada semua elemen yang digunakan.Membantu konsistensi elemen desain yang digunakan dari satu halaman ke halaman lain, penggunaan komponen di Figma juga memungkinkan kamu untuk dengan mudah mengelola dan memperbarui elemen-elemen tersebut secara keseluruhan, sehingga memastikan keseragaman dan efisiensi dalam pengembangan antarmuka pengguna.Mudah untuk mengubah dan mengatur komponen memungkinkan kamu untuk dengan cepat menyesuaikan elemen desain sesuai preferensi atau revisi yang mungkin kamu miliki, sehingga memberikan fleksibilitas yang lebih besar dalam proses pengembangan proyek desainmu. Dari tombol yang interaktif hingga ikon yang menarik perhatian, keberagaman dalam komponen desain untuk Figma "menawarkan beragam pilihan" yang sesuai dengan kebutuhan desain dan fungsionalitas proyekmu. Dengan memahami kegunaan dan fleksibilitas masing-masing komponen, pengguna Figma dapat membuat keputusan desain yang terinformasi dalam menentukan tampilan visual proyek mereka. Mau mencoba membuat komponen desain yang lebih kreatif dengan Figma? Tentu bisa! Ayo temukan lebih banyak tutorial dan tips desain gratis di BuildWithAngga! Dengan mengikuti kelas-kelas UI/UX design, kamu dapat mengasah keterampilan dan memperkaya portofolio desainmu 🚀

Plugin adalah tambahan perangkat lunak yang dapat meningkatkan fungsi atau kemampuan dari perangkat lunak utama. Salah satu plugin yang sangat bermanfaat bagi desainer UI/UX adalah Autoflow. Autoflow membantu desainer dalam menjelaskan alur dari desain mereka agar lebih mudah dipahami. Dengan menggunakan Autoflow, desainer dapat mengurangi kemungkinan kesalahan dalam pengembangan berdasarkan desain yang telah mereka buat. Proses penggunaan Autoflow pada platform Figma cukup sederhana. Setelah menginstal plugin Autoflow, desainer hanya perlu memilih opsi Autoflow dari panel plugin di Figma dan mengikuti petunjuk yang diberikan untuk mengatur alur desain sesuai kebutuhan. Dengan demikian, Autoflow menjadi alat yang sangat berguna bagi desainer UI/UX untuk meningkatkan efisiensi dan akurasi. Langkah 1: Buka resource Langkah pertama yang dapat kamu lakukan adalah mencari panel utama Autoflow dan perhatikan dengan seksama untuk menemukan tombol 'Resources' yang terletak di salah satu sudut panel tersebut. Langkah 2: Cari autoflow pada bagian pluggin Langkah selanjutnya yang perlu kamu lakukan adalah membuka menu Plugins. Setelah itu, telusurilah dengan cermat daftar Plugin yang tersedia hingga kamu menemukan 'Autoflow' di antara opsi-opsi yang ada. Langkah 3: Pilih Run Untuk mengaktifkan Autoflow, langkah selanjutnya yang dapat kamu lakukan adalah memilih opsi 'Run Autoflow' yang terdapat dalam menu plugin perangkat lunak desainmu. Dengan melakukan hal ini, kamu akan siap untuk menggunakan fitur Autoflow yang powerful dan membantu dalam alur kerja desainmu. Langkah 4: Apabila sudah terbuka akan ada tampilan seperti ini Dengan menggunakan pengaturan ini, kamu memiliki kontrol penuh untuk menyesuaikan berbagai aspek desain, mulai dari mengatur garis, menentukan ukuran yang tepat, memilih palet warna yang cocok, hingga menyesuaikan elemen-elemen lainnya sesuai preferensi dan kebutuhan desainmu. Langkah 5: Klik fitur dan halaman Dengan menekan dan menahan tombol Shift pada keyboard komputer kamu saat mengklik fitur atau halaman yang ingin dituju, Autoflow akan segera memberikan respons dengan menampilkan garis panduan yang memudahkan penempatan dan penataan elemen desain. Selain itu, kamu juga memiliki fleksibilitas untuk menambahkan teks secara langsung ke dalam desain tersebut, menyesuaikan dengan kebutuhan dan konsep yang ingin disampaikan. Dari penataan teks yang rapi hingga alur yang terstruktur, Autoflow membantu desainer dalam mengoptimalkan kreativitas mereka dalam setiap tahap proyek desain. Dengan beragam fitur yang disediakan, Autoflow memungkinkan desainer untuk menciptakan alur desain yang mudah dipahami dan diterapkan. Berikut adalah beberapa keunggulan dari fitur Autoflow: Penambahan Teks yang Mudah: Autoflow memudahkan pengguna untuk menambahkan teks ke dalam frame tanpa harus repot mengatur ulang atau memindahkan teks secara manual. Pengguna hanya perlu mengetik teks, dan teks akan mengalir secara otomatis ke dalam frame sesuai dengan batasnya.Fleksibilitas dalam Penyesuaian: Autoflow memungkinkan pengguna untuk dengan cepat menyesuaikan aliran teks dengan mengubah ukuran atau mengedit teks, tanpa harus khawatir tentang penataan ulang teks secara manual.Menghindari Overlapping: Dengan Autoflow, pengguna tidak perlu khawatir tentang overlapping teks atau kekacauan dalam penataan teks. Autoflow akan secara otomatis mengatur aliran teks sehingga tidak ada tumpang tindih antara teks satu dengan yang lain.Peningkatan Efisiensi: Fitur "Mudah mengatur flow" pada Autoflow membantu meningkatkan efisiensi dalam penataan teks, karena pengguna dapat dengan cepat dan mudah mengatur aliran teks tanpa harus repot melakukan penyesuaian manual. Mau mencoba memperkaya desain-desainmu dengan bantuan Autoflow? Kamu bisa segera menggunakannya dalam proyek-proyek desainmu dan melihat bagaimana Autoflow membantu menghadirkan ide-ide kreatifmu menjadi nyata. Jangan ragu untuk eksplorasi dan manfaatkan fitur-fitur Autoflow untuk membawa desainmu ke level berikutnya! Siap untuk mengasah kemampuan desainmu dengan lebih baik? Jangan lewatkan kesempatan untuk bergabung dengan kelas-kelas gratis tentang UI/UXdesign di platform BuildWithAngga! Dapatkan pengetahuan baru, latihan praktis, dan tambahkan kualitas portfolio desainmu dengan mendaftar sekarang! 🚀

Dark Mode pada UI (User Interface) adalah mode tampilan di mana warna background utama UI menjadi gelap atau hitam, sedangkan elemen-elemen antarmuka seperti teks dan ikon menjadi lebih terang atau berwarna kontras. Ini menciptakan kontras yang lebih baik dan mengurangi kecerahan layar, yang bisa mengurangi kelelahan mata dan membuat pengalaman pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah. Secara sederhana, dark mode adalah skema warna pada interface yang memberikan tampilan teks dan ikon cerah dalam latar belakang yang gelap, menurut Phone Arena. Salah satu alasan kenapa hal ini begitu populer ya tentunya karena desain ini lebih nyaman untuk mata pengguna 🤩 Dibandingkan dengan melihat layar tampilan light mode, memang mata kita akan lebih nyaman dengan dark mode. © https://shaynakit.com/details/kreatop-dashboard-dark-mode-green-v1-website-design Manfaat Menggunakan Dark Mode Dark Mode memiliki beberapa manfaat sederhana seperti: Pengurangan kelelahan mata: Warna gelap pada background dapat mengurangi stres mata dan membuat pengguna lebih nyaman, terutama dalam kondisi pencahayaan rendah.Peningkatan keterbacaan: Kontras yang lebih besar antara teks dan background membuat teks lebih mudah dibaca, terutama untuk orang dengan gangguan penglihatan atau bagi kamu yang menghabiskan banyak waktu di depan layar.Penghematan daya baterai: Latar berwarna gelap menggunakan lebih sedikit energi, khususnya pada perangkat seluler dengan layar OLED atau AMOLED, karena pixel yang menampilkan warna hitam tidak memerlukan daya.Aesthetic & Modern: Dark Mode sering dianggap sebagai pilihan yang lebih modern dan elegan, memberikan tampilan yang berbeda dan menarik bagi kamu sebagai use.Mengurangi gangguan cahaya: Pada malam hari atau dalam situasi pencahayaan rendah, Dark Mode dapat membantu mengurangi kecerahan layar yang mengganggu, membantu user tidur lebih nyenyak dan mengurangi gangguan visual! ©https://shaynakit.com/details/wuyuqi-saas-startup-modern-mobile-dark-ui-design Beberapa kelebihan Dark Mode juga antara lain: Memberi lebih sedikit blue light atau cahaya biru yang ditampilkan dari gadget.Lebih cocok untuk pengaturan cahaya redup sehingga bisa dengan nyaman gunakan gadget di tempat tidur.Menurut beberapa ahli mode gelap dapat membantu orang dengan sensitivitas cahaya atau gangguan penglihatan dibanding yang memiliki kemampuan penglihatan nornal. © https://shaynakit.com/details/kreatop-content-creator-saas-dashboard-dark-mode-design Kekurangan Dark Mode Meskipun Dark Mode memiliki banyak kelebihan, ada beberapa kekurangan yang perlu dipertimbangkan juga yaa! Ketidakcocokan dengan beberapa konten: Dark Mode mungkin tidak cocok untuk semua jenis konten atau aplikasi. Misalnya, untuk aplikasi yang berfokus pada pembacaan teks panjang, pengguna mungkin lebih memilih latar belakang yang cerah untuk keterbacaan yang lebih baik.Pengalaman konsistensi interface: Ketika pengguna beralih antara aplikasi yang mendukung Dark Mode dan yang tidak, pengalaman user dapat menjadi tidak konsisten. Ini terutama terjadi jika ada perubahan tiba-tiba antara dark mode dan mode terang.Tidak cocok untuk kondisi pencahayaan tinggi: Meskipun Dark Mode ideal untuk kondisi pencahayaan rendah, user mungkin menemukan sulit untuk melihat layar dengan jelas dalam kondisi pencahayaan tinggi atau di bawah sinar matahari langsung.Kurangnya standar desain: Tidak ada standar yang ditetapkan untuk implementasi Dark Mode, sehingga pengalamanmu dapat bervariasi antara aplikasi satu dan lainnya. Ini dapat menyebabkan kebingungan atau ketidaknyamanan bagi user.Penurunan kualitas warna: Pada beberapa layar, penggunaan Dark Mode dapat menyebabkan penurunan kualitas warna atau detail gambar karena mode gelap mengurangi kecerahan dan kontras warna. Meskipun demikian, kekurangan ini dapat diatasi dengan perencanaan desain yang cermat dan pengujian yang memadai untuk memastikan Dark Mode memberikan pengalamanmu atau user yang optimal. © https://shaynakit.com/details/tieats-categories-pages-design Kapan Kita Menggunakan Dark Mode? Kita memakai Dark Mode terutama dalam kondisi-kondisi berikut ini nih guys: Saat berada dalam lingkungan dengan pencahayaan rendah, seperti malam hari atau ruangan yang kurang terang, Dark Mode membantu mengurangi kecerahan layar dan menghindari ketegangan mata kita.Saat menggunakan perangkat pada malam hari atau sebelum tidur, Dark Mode membantu mengurangi paparan cahaya biru yang dapat mengganggu ritme tidur dan kualitas istirahat.Pada perangkat cellular, menggunakan Dark Mode dapat membantu menghemat daya baterai, terutama pada layar jenis OLED atau AMOLED, karena piksel hitam tidak menggunakan energi.Beberapa pengguna juga menyukai tampilan estetika dan modern dari Dark Mode, dan memilih untuk menggunakannya sepanjang waktu, terlepas dari kondisi pencahayaan.Ketika user ingin mengurangi kecerahan layar tanpa mengurangi fungsionalitas atau keterbacaan konten, Dark Mode adalah pilihan yang baik untuk menciptakan pengalaman yang nyaman. Nah, Kenapa sih Dark Mode Bagus Untuk Mata? Dark mode dianggap baik untuk mata karena dapat membantu mengurangi ketegangan mata, terutama dalam kondisi pencahayaan rendah. Beberapa alasan mengapa dark mode dianggap baik untuk mata antara lain: Reduce Tingkat Kecerahan Layar: Dark mode mengurangi kecerahan background layar, yang dapat membantu menghindari kelelahan mata. Pengurangan kecerahan ini terutama berguna dalam situasi pencahayaan rendah atau saat menggunakan perangkat pada malam hari.Kontras yang Lebih Baik: Dark mode menciptakan kontras yang lebih baik antara teks atau elemen antarmuka dengan background! Kontras yang lebih tinggi dapat membuat teks lebih mudah dibaca dan meminimalkan ketegangan mata lho!Pengurangan Paparan Blue Light: Dark mode sering kali melibatkan pengurangan paparan blue light dari layar. Blue light dapat mengganggu kualitas tidur. Dengan menggunakan dark mode, terutama pada malam hari, paparan cahaya biru dapat diminimalkan.Peningkatan Keterbacaan: Warna text yang lebih terang pada background gelap dapat meningkatkan keterbacaan. Ini dapat membantu mata fokus dengan lebih baik pada konten, terutama dalam kondisi pencahayaan yang kurang optimal. Meskipun banyak orang merasa lebih nyaman dengan dark mode, preferensi visual dapat bervariasi dari individu ke individu. Yang terpenting adalah memberikan opsi kepada user untuk memilih mode tampilan yang paling sesuai dengan preferensi dan kenyamanan mereka. Kesimpulan! Dalam kesimpulannya, Dark Mode pada UI/UX design membawa sejumlah manfaat yang “signifikan,” termasuk pengurangan ketegangan mata, peningkatan keterbacaan, penghematan daya baterai, dan memberikan estetika modern yang interesting. Pilihan ini menjadi lebih populer karena memberikan pengalaman visual yang nyaman, terutama dalam kondisi pencahayaan rendah atau saat menggunakan perangkat pada malam hari. Meskipun begitu, Dark Mode yang efektif memerlukan perhatian terhadap kontras, konsistensi desain, dan keterbacaan agar dapat memberikan experience kamu yang optimal. Penting juga untuk memberikan opsi kepada pengguna untuk memilih antara Dark Mode dan Light Mode sesuai dengan preferensi mereka sendiri. Dengan memperhatikan aspek-aspek ini, Dark Mode dapat menjadi fitur yang memperkaya pengalaman pengguna dan meningkatkan kenyamanan dalam penggunaan aplikasi atau situs web. Tertarik untuk belanar lebih dalam? Di BuildWithAngga, kamu bisa ikuti roadmap kelas belajar UI/UX gratis! Dan kelas-kelas ini sudah berurutan mulai dari mana kamu harus belajar 😍 See you di kelas ;)

Dalam dunia UI design, ada teman-teman seru yang bikin desain jadi lebih asyik! Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout, mereka seperti superhero desain UI. Dengan bantuan mereka, desainer seperti kit_a jadi punya senjata rahasia untuk menciptakan tampilan yang keren dan fungsional. Yuk, kita kenalan lebih dekat sama mereka! 😉 Figma Community Figma Community adalah tool terbaik desainer UI. Dengan beragam komponen dan templat gratis, Figma memudahkan kolaborasi tim secara langsung. Keunggulannya juga terletak pada plugin dan penggabungan yang membuat proses desain semakin lancar. Keunggulan Figma Community adalah: Kolaborasi Real-Time: Figma Community memungkinkan kamu untuk bekerja bersama secara langsung, memfasilitasi kolaborasi yang efisien dan tanpa hambatan dalam pengembangan desain.Gratis dan Beragam: Dengan komponen dan templat yang dapat diakses secara gratis, Figma Community menyediakan berbagai resources desain yang beragam, membantu desainer menghemat waktu dan upaya.Plugin dan Integrasi: Figma Community dilengkapi dengan plugin dan penggabungan yang memperkaya pengalaman desain, memudahkan kamu untuk menyesuaikan toool mereka sesuai kebutuhan, meningkatkan produktivitas secara keseluruhan. Open Peeps (Illustrations) Open Peeps merupakan koleksi ilustrasi karakter yang dapat disesuaikan, membantu menciptakan desain UI yang lebih menarik dan bersahabat. Kelebihannya terletak pada kemudahan penggunaan dan fleksibilitas, memungkinkan desainer untuk dengan cepat menyusun visual yang unik. Dengan variasi yang kaya, Open Peeps membantu “menghidupkan” desain tanpa perlu menghabiskan waktu berlebih. Keunggulan Open Peeps sebagai berikut: Karakter Dapat Disesuaikan: Open Peeps menawarkan ilustrasi karakter yang dapat disesuaikan, memungkinkan desainer untuk menciptakan visual yang unik sesuai dengan kebutuhan proyek mereka.Mudah Digunakan: Dengan interface yang sederhana, Open Peeps mudah digunakan bahkan bagi pemula sekalipun, mempercepat proses desain tanpa perlu menghabiskan waktu berlebih.Fleksibilitas Desain: Open Peeps memberikan fleksibilitas tinggi, memungkinkan desainer untuk dengan mudah menggabungkan karakter Open Peeps ke dalam desain mereka, memberikan sentuhan easy to use. Daily UI Daily UI memberikan daily challenge yang mengasah kemampuan desain UI. Dengan fokus pada elemen UI, desainer dapat terus berkembang. Keuntungan utamanya adalah memberikan latihan kreatif harian, memperkaya keterampilan desain secara konsisten. Keunggulan Dailyui adalah seperti: Daily Challenge: Daily UI memberikan tantangan desain harian, membantu desainer mengasah keterampilan mereka dalam merancang elemen UI dengan konsisten.Meningkatkan Kreativitas: Dengan fokus pada elemen UI yang berbeda setiap hari, membantu desainer mengembangkan yang lebih beragam dalam desain mereka.Mengembangkan Keterampilan: Mengikuti tantangan ini secara teratur membantu designer mempercepat developing keterampilan desain UI-mu, membuat mereka lebih siap menghadapi proyek-proyek yang complex. 404 Illustrations 404 Illustrations adalah sumber daya desain yang khusus dirancang untuk mempercantik halaman 404, yang biasanya muncul ketika pengguna mengunjungi halaman yang tidak dapat ditemukan. 404 Illustrations ini menawarkan berbagai ilustrasi yang penuh kreativitas untuk menggantikan pesan kesalahan standar. Ilustrasinya tidak hanya menarik perhatian, tetapi juga memiliki tujuan untuk membuat pengalaman kesalahan menjadi lebih bersahabat dan keren. Keunggulan 404 Illustrations antara lain: Kreatif dan Ramah: 404 Illustrations menawarkan ilustrasi yang kreatif dan ramah untuk error page, menjadikan masa yang seharusnya menjengkel menjadi lebih bersahabat.Jelas dan Menarik: Ilustrasinya tidak hanya menarik perhatian, tetapi juga memberikan pesan yang jelas tentang kesalahan yang terjadi, membantu pengguna memahami situasi dengan mudah.Menghidupkan Error Page: Dengan 404 Illustrations, error page tidak lagi terlihat membosankan. Ilustrasinya memberikan sentuhan visual yang menyenangkan, menciptakan pengalaman yang lebih positif bagi pengguna. Iconscout [Iconscout](https://https://www.figma.com/community/plugin/744098704933821409/iconscout-icons-illustrations-3d-assets-lottie-animations.fun/) adalah sumber ikon yang luas. Dengan beragam ikon dan gaya, Iconscout memenuhi kebutuhan desainer dengan berbagai selera. Integrasi yang mudah membuatnya menjadi tempat yang efisien untuk menemukan ikon-ikon yang sesuai. Keunggulan Iconscout antara lain: Beragam Pilihan: Iconscout menawarkan beragam ikon dengan gaya yang berbeda, memudahkan desainer untuk menemukan ikon yang sesuai dengan tampilan project mereka.Integrasi Mudah: Dengan integrasi yang simpel ke berbagai alat desain, Iconscout memastikan desainer dapat dengan cepat mengakses dan menggunakan ikon-ikon berkualitas tanpa hambatan.Sumber Ikon yang Luas: Iconscout memiliki database ikon yang luas, menjadikannya resources yang mudah untuk memenuhi kebutuhan desainer dengan berbagai selera dan gaya desain. Kesimpulan 💬 Resources Desain Penting: Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai tools yang sangat mampu diandalkan bagi UI designer.Beragam dan Gratis: Keunggulan Figma Community dan Iconscout terletak pada kemampuan mereka menyediakan sumber daya yang beragam dan gratis, membantu kamu sebagai designer untuk menghemat waktu dan biaya.Kreativitas Terus Berkembang: Dailyui memberikan tantangan harian/daily challenge, memacu desainer untuk terus berkembang dan meningkatkan keterampilan desain UI-mu.Mengatasi Kesalahan dengan Kreativitas: 404 Illustrations tidak hanya mempercantik error page, tetapi juga membuat experience error menjadi lebih bersahabat dengan ilustrasi yang eye-catching.Efisiensi dan Fleksibilitas: Iconscout terkenal dengan menyediakan ikon-ikon beragam dan mudah diakses, memastikan designer dapat bekerja dengan efisien tanpa mengorbankan fleksibilitas. Dalam dunia UI design, memiliki akses sumber daya yang tepat sangatlah penting. Figma Community, Open Peeps, Daily UI, 404 Illustrations, dan Iconscout membuktikan diri sebagai “senjata” tak tergantikan bagi UI designer. Dengan beragamnya resources dan daily challenge dari Daily UI, desainer dapat terus mengasah kreativitas mereka. 404 Illustrations memberikan kesan ramah pada error, sedangkan Iconscout dengan koleksi ikonnya yang beragam memudahkan desainer dalam mencari yang sesuai. Semuanya ini membuktikan bahwa kualitas desain dapat ditingkatkan dengan memanfaatkan berbagai resources yang ada.

Dalam dunia digital design, Figma telah menjadi “pegangan” setia bagi para designer yang sangat membutuhkam inovasi baru. Dengan interface yang bersahabat dan kemampuan kolaboratif, Figma bukan hanya tools desain biasa/semata, tetapi juga pilihan yang tepat bagi pengguna Windows untuk memulai kreativitas mereka. Artikel ini akan mengarahkan kamu melalui langkah-langkah men-download dan meng-install Figma di Windows, mempersiapkan kamu untuk explore dunia desain tanpa batas yang ditawarkan oleh platform ini. Berikut keunggulan menggunakan Figma: Real-time Collaborations: Figma memberikan kemampuan berkolaborasi secara real-time, antar anggota tim untuk bekerja bersama pada project desain untuk menghemat waktu dan lokasi. Hal ini mampu mengoptimalkan produktivitas dan memastikan kerjaan menjadi jauh lebih secara efisien.Prototyping yang Interaktif: Dengan Figma, designer dapat menciptakan prototype interaktif dengan mudah. Ini memungkinkan mereka untuk menguji design mereka sebelum diimplementasi.Component Library: Figma memiliki konsep component library yang dapat digunakan kembali. Designer dapat membuat, menyimpan, dan menggunakan komponen desain secara konsisten di seluruh project. Hal ini tidak hanya memastikan konsistensi visual, tetapi juga mempercepat proses desain dengan meminimalkan pengulangan membuat komponen.Memperpadukan Desain yang Mudah: Figma mendukung perpaduan yang mudah dengan berbagai tool desain dan prototyping lainnya. Dengan kemampuan untuk mengimpor dan mengekspor berbagai format file, Figma memudahkan desainer untuk berkolaborasi dengan tim yang mungkin menggunakan tool desain berbeda. Yuk simak cara meng-install Figma untuk Windows! Kunjungi Situs Resmi Figma Buka browser kamu lalu kunjungi situs resmi Figma. Daftar atau Masuk Akun Buatlah akun Figma untuk mulai mendesain atau jika kamu sudah memiliki akun, pilih opsi Log In. Get the Desktop App Pada pojok kiri atas, ada Menu akun. Klik tanda panah yang ke arah bawah dan pilih Get Desktop App. Ikuti langkah selanjutnya yang diarahkan. Open Figma Terakhir, kamu tinggal buka aplikasi Figma yang ada di laptop/komputermu. Kamu tidak perlu lagi membuka Figma lewat browser yaa Lalu klik opsi + Design File untuk mulai membuat design! Last but Not Least, Explore Your Design Style Now! Dengan mengikuti langkah-langkah ini, kamu dapat dengan mudah menginstal Figma di Windows dan mulai explore potensi kreativitasmu. Kalau kamu ingin memulai perjalanan menjadi seorang UI/UX designer, kami menyarankan kamu untuk mengikuti alur pembelajaran UI/UX gratis yang kami sediakan seperti: UI Design : Grid System dengan Figma Di sini kamu akan mulai mempelajari: Tools Dasar FigmaMemahami fungsi Grid dalam projectMembuat Grid pada FigmaMengimplementasikan Grid ke UI Design Pada kelas Grid System ini, kamu akan belajar bagaimana Grid System membantu kita untuk menentukan letak elemen desain yang konsisten. Tanpa menggunakan Grid, kemungkinan besar letak elemen tidak konsisten dan hasilnya jadi tidak responsive. Dengan grid, kamu dapat dengan cepat menempatkan elemen-elemen desain tanpa harus terus-menerus mengukur dan menyesuaikan letaknya. Dengan mengatur grid yang responsif, kamu dapat dengan mudah mengatur layout untuk berbagai ukuran layar atau perangkat, memastikan experience pengguna yang konsisten di seluruh platform. Kelas ini cocok untuk kamu yang ingin mempelajari Micointeracion, untuk kamu yang ingin mempelajari cara membuat prototype dan mendalami pengetahuan UI/UX! UI Design : Wireframe to Visual Design Di kelas ini kamu akan belajar tentang: Pembuatan Moodboard untuk referensi desainImpor gambar dan icon untuk tampilan UIMenentukam hirarki teksMengubah tampilan Wireframe menjadi Visual Design Wireframe dan Visual Design adalah dua aspek kunci dalam proses UI design Figma, dan keduanya memainkan peran yang sangat penting dalam pembuatan UX yang efektif dan menarik. **** Visual design memiliki peran yang sangat penting dalam UI design di Figma maupun dalam platform desain lainnya. Visual Design sangat penting untuk memberikan first impression yang baik. Design yang menarik dan profesional dapat memberi kesan positif dalam desainmu.Wireframe mampu memberikan gambaran kasar akan letak elemen-elemen penting, seperti posisi tombol, teks, dan gambar juga memberikan “kerangka desain” untuk didiskusikan dan mereview fitur dan fungsi utama desain. Di kelas ini kamu akan mempelajari cara membuat sebuah tampilan mulai dari proses pembuatan moodboard menggunakan InvisionApp yang terdiri dari tipografi, warna dan juga referensi design. Kelas ini cocok untuk pemula UI/UX agar mengerti bahwa Visual Desain tidak hanya tentang “estetika” tapi juga menciptakan pengalaman user yang optimal. UI Style Guide Lalu kamu akan diarahkan untuk belajar dan memahami tentang: Style Guide dan Design LibraryPerbedaan Frame dan GroupPembuatan Component Responsive dengan Auto LayoutPembuatan Varian Component Style guide memiliki peran yang sangat penting dalam pembuatan UI design di Figma, maupun tools desain lainnya. UI/UX designer harus membuat design yang konsisten baik dalam pemilihan warna, teks, ukuran elemen/komponen dan mampu mempermudah pembuatan UI design karena waktu yang jadi lebih hemat. Kita akan belajar cara mendesain dengan cepat dan terstrukur dengan memanfaatkan Auto Layout, Design Tokens dan penggunaan rekomendasi plugins yang sangat efisien. Dengan memahami dan menerapkan Style Guide yang konsisten, tim desain dapat memiliki hasil yang lebih baik dan efisien dalam pembuatan UI design yang berkualitas. Kelas ini cocok untuk kamu yang ingin mendalami pengetahuan akan Design Library juga lho! Menarik kan? Yuk segera manfaatkan dan bergabung bersama students lainnya untuk gaining new skills as a ui ux designer😉

Isometric Design memberikan dimensi yang menarik dan menambahkan nilai visual pada project desain. Dalam artikel ini, kita akan membahas cara membuat isometric design menggunakan plugin SkewDat di Figma. Dengan memahami dasar-dasar plugin ini, kamu dapat meningkatkan desain isometric-mu dengan cepat dan efisien. SkewDat adalah plugin Figma khusus untuk memberikan kemampuan skewing atau memiringkan objek dalam desain. Plugin ini mampu memberikan kita cara yang intuitif dan fleksibel untuk mengubah sudut dan bentuk elemen desain dengan “pas”. Dengan SkewDat, kamu dapat dengan mudah menciptakan efek visual isometrik yang sulit didapat dengan cara manual. Plugin ini dapat diakses melalui Figma Community atau langsung dari Interface Figma, memudahkan desainer/pengguna untuk menerapkannya ke dalam alur kerja design mereka. Adapun keunggulan SkewDat antara lain: Mudah digunakan Salah satu keunggulan utama SkewDat adalah kemudahan penggunaannya. Plugin ini dirancang dengan interface yang intuitif/resposif, membuatnya mudah digunakan oleh designer pemula sekalipun. Cara mengaplikasikannya yang sederhana memungkinkan pengguna untuk dengan cepat dan efisien membuat efek skewing pada elemen desain mereka tanpa perlu menguasai keterampilan desain yang rumit.Ketepatan yang Tinggi SkewDat memberikan tingkat presisi/ketepatan yang tinggi dalam mengatur skewing objek. Designer dapat dengan akurat mengatur sudut dan bentuk elemen desain, memastikan bahwa hasilnya tampak profesional dan sesuai dengan ekspektasi kreatif mereka. Presisi ini menjadi kunci untuk menciptakan isometric design yang rapi dan aesthetic.Flexiblity Keunggulan lain dari SkewDat adalah fleksibilitas dalam desain. Plugin ini memberikan pengguna kebebasan untuk menyesuaikan elemen desain dengan cara yang sulit dicapai secara manual. Dengan SkewDat, pengguna dapat bereksperimen dengan berbagai sudut skewing, menciptakan tampilan isometrik yang unik dan menyesuaikan desain sesuai kebutuhan kreatif. Fleksibilitas ini memberikan ruang bagi eksplorasi dalam proses desain. Sekarang mari kita buat Isometric Page menggunakan SkewDat! Install Plugin Buka Figma dan masuk ke Explore Community di Menu sidebar. Search SkewDat Plugin dan jika sudah ketemu, select “Try it Out” atau pilih opsi Save. Siapkan Page atau Artboard Pilih Page atau Artboard yang ingin kamu skew. Lalu klik kanan untuk mengaktifkan plugin SkewDat. Atur Tingkat Kemiringan Design Di sini, saya mengatur tingkat skew menjadi 36° dan juga mengubah Rotation menjadi 22°. Drop Shadow Kamu bisa menambahkan shadow untuk membuatnya menjadi lebih aesthetic. Di sini, saya mengubah X= -20, Y= 60, Blur= 40, dan opacity warna #343B46 menjadi 10%. Finishing Nah congrats! 🎉 Sekarang kamu sudah mengerti ‘kan cara skew design/object dengan SkewDat? Gunakan plugin SkewDat untuk bereksperimen dengan berbagai elemen desain lainnya. Biasanya, designer menggunakan plugin SkewDat untuk membuat Design Presentation, selain menampilikan hasil Mockup Design dan Typeface. Atau biasa juga untuk membuat sebuah Cover pada file design mereka. Kalau kamu ingin meng-explore lebih luas lagi tips&trick pembuatan UI/UX yang menarik, kamu bisa memulainya dengan mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Jadi, tunggu apa lagi? Sampai jumpa di kelas 😉

Dalam dunia desain, Figma telah menjadi “alat” yang sangat penting bagi para desainer untuk bekerja-sama dan menciptakan prototype yang efektif. Salah satu fitur unggulan desainer di Figma adalah plugin "Mockup". Plugin ini tidak hanya menghadirkan kenyamanan dalam pembuatan mockup, tetapi juga membeikan kualitas prototipe desain secara keseluruhan. Plugin Mockup di Figma dirancang untuk mempermudah proses pembuatan mockup, yang merupakan representasi visual dari desain produk atau proyek. Dengan menggunakan plugin ini, kamu dapat dengan mudah menambahkan tampilan desainmu ke dalam bingkai atau perangkat tertentu, memberikan gambaran yang lebih nyata tentang bagaimana desain tersebut akan terlihat dalam konteks yang diinginkan. ini sangat membantu dalam mengomunikasikan ide kepada klien atau anggota tim dengan lebih jelas dan efektif. Keunggulan Plugin Mockup: Presentasi yang Lebih Menarik: Dengan menggunakan plugin Mockup, designer dapat memberikan presentasi yang lebih menarik dan nyata, menunjukkan desain dalam situasi yang mirip dengan penggunaan sehari-hari.Beragam Pilihan Mockup: Plugin ini menyediakan berbagai opsi mockup, mulai dari perangkat seperti smartphone dan tablet hingga bingkai cetak dan presentasi, memberikan fleksibilitas dalam memilih konteks yang diinginkan.Tingkat Customization yang Tinggi: Designer dapat customize mockup sesuai dengan preferensi mereka. 1. Install Plugin Mulailah dengan meng-install plugin Mockup dari Figma Community. Cari plugin ini dan pilih "Try it out" atau pilih opsi “Save” untuk mengaktifkannya. 2. Siapkan Artboard Siapkan Artboard mana saja yang ingin kamu masukan ke dalam Mockup. 3. Aktifkan dan Buka Plugin Mockup Klik kanan dan pilih Plugins lalu pilih plugin Mockup maka plugin akan otomatis aktif. Jika sudah, pilih jenis/style mockup apa yang kamu mau dan butuhkan. 4. Seleksi dan Masukan Artboard Pilih tanda “+” pada plugin lalu select artboard yang kamu inginkan untuk dijadikan mockup. 5. Finishing Setelah itu, isi semua mockup untuk ditambahkan ke dalam canvas, select Paste in Canvas. Jika sudah, masukan mockup UI design-mu ke dalam Frame. Done! 🎉 Ta da! Sekarang kamu sudah mengerti cara menggunakan plugin Mockup dan sebeapa pentingnya Mockup dalam mendesain 🎉 Kesimpulan Nah, sekarang dapat kita simpulkan bahwa keberadaan Mockup Plugin dalam Figma membawa dampak positif dalam mengoptimalkan proses desain dan prototyping. Dengan plugin ini, desainer tidak hanya dapat menghemat waktu, tetapi juga meningkatkan kualitas presentasi dan komunikasi ide desain. Kelebihan pemaikaian yang mudah, beragam pilihan mockup, dan tingkat custom yang bervariasi menjadikan plugin ini sebagai elemen penting dalam toolkit desain di Figma. Sehingga, Mockup Plugin merupakan “solusi” yang memungkinkan designer untuk mendapatkan potensi penuh dari setiap design yang mereka ciptakan, menampilkannya dalam konteks yang lebih nyata dan relevan. Tertarik belajar lebih jauh tentang dunia UI/UX? Yuk mulai dengan kelas UI/UX gratis di BuildWithAngga untuk memperdalam skill mendesainmu 😊

Pernahkah kalian mendengar istilah Jambot Widget di Figma? Jika tidak, siap-siap untuk terkejut! Di dalam artikel ini, saya akan menjelaskan AI keluaran terbaru dari Figjam yaitu Jambot, yang dapat membantu mempercepat produktivitas di FigJam yang terintegrasi dengan OpenAI dalam pekerjaan UX designer maupun UX researcher. Dikembangkan oleh Figma, Figjam merupakan digital whiteboard kolaboratif yang dapat membuat tim bekerja sama secara real-time untuk brainstorming, design, maupun iterasi. FigJam dibuat untuk memfasilitasi kolaborasi yang tiada limit mulai dari ide ke design akhir, membuatnya menjadi favorit di kalangan UI/UX designer dan creative teams lainnya. Di dalam artikel ini, saya akan memberikan beberapa key features yang sangat berguna untuk membantu kamu dalam process design thinking yang efisien dan efektif Cara Memakai Jambot Untuk memakai Jambot, hal pertama yang harus kamu lakukan adalah menambahkan widget ke dalam Figjam board kamu. Kamu dapat melakukan ini dengan cara menekan menu ‘recently used’ icon yang terdapat di toolbar bagian bawah, lalu ketik “jambot” pada search bar, dan click atau drag Jambot ke dalam board kamu Setelah Jambot berhasil tertanam di board, kamu dapat memulai menggunakannya dengan cara memilih fitur yang ingin dipakai. Ada 11 pilihan yang dapat dipakai, dapat disesuaikan dengan keperluan kamu nantinya. Brainstorming Ideas Kamu dapat meminta Jambot beberapa ide untuk brainstorm, cukup menambahkan sticky notes dan sambungkan ke widget Jambot AI. Lalu, berikan prompt seperti “Berikan beberapa ide konten tips and trick figma terbaru” Setelah selesai memberikan prompt, yang kita akan lakukan adalah memilih tombol ‘Ideate’ agar Jambot memberikan kita beberapa ide: Tidak hanya sampai situ, kamu juga bisa menghubungkan ide yang telah diberikan ke Jambot Widget untuk ditindak lanjuti seperti meminta Jambot untuk diberikan Similar Output, ataupun parafrase dengan nada dan style yang berbeda. Quick Summaries Terkadang, untuk membuat kesimpulan atau summary dari suatu sesi brainstorming atau rapat membutuhkan banyak waktu. Namun, dengan Jambot AI, kamu dapat meminta summary cukup dengan beberapa click saja. Seperti berikut: Cukup dengan block keseluruhan sticky notes, lalu pilih summarize. Jambot AI akan memberikan langsung sebuah summary berdasarkan sticky notes yang telah kita catat. Rewrite Texts JamBot AI dapat membantu anda membuat sebuah tulisan ataupun parafrase sebuah kalimat dengan beberapa click saja. Contohnya, saya disini ingin mengirimkan sebuah summary yang telah saya bikin kepada product manager. Saya cukup menyambungkan summary tadi kepada Jambot AI widget yang telah dimasukkan. Kesimpulan Well, berikut adalah beberapa fitur sederhana yang perlu kamu ketahui untuk menunjang produktifitas kamu sebagai UX Designer & UX Researcher. Sekarang, kamu dapat lebih fokus terhadap masalah yang lebih besar & penting. Jambot AI ini dapat kamu gunakan secara gratis selamanya, tetapi mempunyai limitasi penggunaan seperti hanya dapat digunakan di dalam 3 shared figjam. Namun, Jambot AI ini masih dalam fase beta dimana masih dalam masa testing yang belum stabil saat digunakan. Berikut beberapa key takeaways buat kamu: Brainstorming Ideas: Jambot AI dapat memberikan beberapa ide yang selanjutnya dapat dikelola lagi seperti parafrase, menjelaskan lebih detail, ataupun memberikan referensi yang sama.Quick Summaries: Dengan fitur ini, kamu dapat membuat kesimpulan dari sesi meeting ataupun sesi brainstorming kamu.Rewrite Text: Kamu dapat meminta Jambot AI untuk memberikan kalimat dengan nada & style yang kamu mau. Oleh sebab itu, Figjam merupakan alat yang sangat direkomendasikan untuk design team. Dengan bantuan Jambot AI, akan sangat efektif dan efisien dalam membantu kamu untuk AI nya. Jika kamu tertarik untuk mempelejari UI/UX Design dengan lebih lanjut. Silahkan dipelajari beberapa kelas gratis UI/UX Design yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan developer lainnya. Sampai jumpa di artikel & tips selanjutnya. Goodluck!

Tahukah kamu bahwa salah satu kunci utama dalam merancang user interface (UI) yang responsif dan efisien adalah menggunakan fitur Auto Layout di Figma? Auto Layout adalah alat yang sangat berguna dalam pembuatan/pengembangan desain, yang memungkinkan elemen-elemen dalam suatu frame beradaptasi dengan baik saat ukuran atau kontennya berubah. Dalam artikel ini, kita akan mencoba membuat UI Button dengan Auto Layout seperti contoh button “Start Reading” di atas! ;) Langkah 1: Siapkan Frame Pertama, buka file baru atau artboard-mu yang sudah ada Pada Toolbar, select Frame atau ketik F pada keyboardDi contoh pembuatan button kali ini, buatlah frame dengan ukuran W: 600 dan H:100 (opsional sesuai dengan kebutuhanmu) Ubah warna frame sesuai selera. Contoh, saya memakai warna #767DFF Langkah 2: Menambahkan teks Pada toolbar, pilih Text atau klik T pada keyboardPilih font style seperti contoh yang ada di gambar. Kamu bisa sesuaikan sendiri dengan seleramu yaa! Kalau saya, saya akan mengubah warna teks menjadi putih #FFFFFF Langkah 3: Mengaktifkan Auto Layout Pertama, masukan dulu teks ke dalam rectangle.Select teks dan rectangle secara bersamaan dan tekan Shift+A atau pilih + pada section Auto Layout di side bar sebelah kanan dan sekarang, Auto Layout pada button sudah aktif. Pastikan pengaturan resizing komponen Auto Layout di atas adalah Hug Horizontal dan Hug Vertical. Langkah 4: Setting Auto Layout Ubah Horizontal Padding dan Vertical Padding sesuai keinginan. Di sini, saya buat Horizontal Padding menjadi 258px dan Vertical Padding menjadi 23pxSet juga Horizontal Gap Between Items untuk mengontrol jarak horizontal antara elemen-elemen yang berada di dalam frame Auto Layout. Padding tersebut akan menciptakan ruang di sekeliling elemen tersebut, memungkinkan elemen-elemen untuk tetap tertata rapi dengan baik dan terpisah dari tepi frame atau elemen lain yang ada di sekitarnya. Jangan lupa untuk pilih Align Center agar teks berada di tengah component yaa! Langkah 5: Corner Radius Atur Corner Radius untuk memberikan kesan modern dan responsif dan juga untuk meningkatkan nilai estetika pada button. Finishing Nah, sekarang button sudah siap! Sekarang kamu telah berhasil membuat UI button dengan Auto Layout di Figma. Kamu dapat menggandakan dan menyusun ulang button-button ini dengan mudah, dan ketika kamu perlu membuat perubahan, itu akan otomatis teraplikasi pada semua instance button. Lalu, apa bedanya jika button dibuat tanpa Auto Layout? Menata secara Manual: Element ditempatkan dengan menyesuaikan posisinya secara manual. Ini berarti kamu perlu mengatur posisi X dan Y setiap tombol secara individual.Keterbatasan Responsivitas: Element ini mungkin akan menjadi kurang responsif terhadap perubahan konten atau ukuran layar, sehingga kamu memerlukan penyesuaian manual yang lebih besar untuk menjaga tampilan yang sesuai seperti mengatur ulang posisi dan size element-mu.Kemungkinan tertimpa antar element dan terpotong: Tanpa Auto Layout, button cenderung tidak mengatur ulang secara otomatis, yang bisa menyebabkan elemen-elemen bertumpuk atau terpotong saat ruang terbatas. Kesimpulan Menggunakan Auto Layout dalam desain button memiliki banyak keunggulan seperti Responsivitas element,efisiensi waktu,dan konsistensi desain. Dengan menggunakan Auto Layout, respon element lebih jelas, dapat menghemat waktu dan design akan menjadi konsisten hingga mudah dipahami user. Pemilihan pemakaian Auto Layout tergantung pada kebutuhan desain yang kamu inginkan dalam project. Dalam banyak kasus, Auto Layout menjadi solusi yang lebih unggul dalam mengatasi tantangan dalam desain UI modern ini! Semoga artikel ini bermanfaat untuk kamu dalam proses desain UI/UX! Jika kamu ingin belajar lebih dalam tentang Auto Layout dan UI/UX design, kamu dapat mencoba bermacam kelas-kelas UI/UX gratis di BuildWithAngga. Selamat mendesain UI UX guys.