Tips All

Bagi sebagian Designer, nama Figjam mungkin sudah tidak asing lagi. Figjam sendiri merupakan produk yang telah dikembangkan oleh perusahaan desain dan kolaborasi bernama Figma. Sedangkan Figma merupakan platform design berbasis cloud yang memungkinkan kolaborasi antar tim secara real-time dalam pengembangan produk, interface design, maupun prototype Figjam lebih fokus pada kolaborasi brainstorming dan ideation secara real-time. Figjam dirancang untuk membantu tim dalam proses brainstorming, wireframe, diagram, dan lain-lain. Figjam memungkinkan kamu untuk membuat board yang dapat diakses publik dan diedit bersama, termasuk fitur yang telah saya sebutkan Pada artikel ini, saya akan menjelaskan fitur-fitur sederhana untuk kamu memulai bekerja menggunakan Figjam agar terpakai dengan efektif. Whiteboard Saat kamu membuka Figjam, hal pertama yang akan kamu lihat adalah papan putih atau whiteboard yang sangat luas. Whiteboard sendiri merupakan fitur yang memungkinkan kamu untuk berkolaborasi secara real-time dalam membuat wireframe, diagram, brainstorming, sticky notes, dan banyak lagi. Sebagai analogi, Whiteboard merupakan papan tulis yang disediakan secara virtual yang memungkinkan orang lain dapat berkontribusi, memberikan feedback, dan berinteraksi dengan ide-ide secara langsung. AI Generate dan Template Pada saat kamu membuat file baru Figjam, di sisi kiri akan kamu temukan sebuah tools AI Generate beserta template. Ini merupakan tools yang dapat mempermudah kamu dalam menemukan apa yang akan kamu buat. Contohnya, saya saat ini ingin membuat sesi brainstorm dengan kolega saya. Lalu saya cukup menekan tombol ‘Brainstorm’ saja, sisanya AI Generate yang akan bekerja. Pada Generate AI ini, kamu dapat memilih 3 pilihan rekomendasi dari AI tersebut untuk memulai seperti Chart, dan Plan. Namun, jika keperluan kamu tidak ada di ketiga pilihan tersebut, kamu dapat memberikan request prompt di input field “Let’s make a…” tersebut. Contoh yang saya buat. Setelah prompt selesai kita buat. Hasilnya akan seperti ini: Tentunya, kamu dapat mengkostumisasi template yang diberikan AI tersebut dengan lebih leluasa dan sesuai seleramu lagi. Namun, jika kamu ingin melihat-lihat template yang lain, kamu dapat menekan tombol ‘Start with a template’. Disini kamu dapat memilih template kamu butuhkan yang telah disediakan Figma maupun kontributor lainnya, mulai dari meetings sampai dengan developer. Tools Bagian Atas Jika kita tadi membahas Whiteboard dan Tools AI dan Template, maka kita akan beralih pada bar sisi atas. Disana kamu akan menemui beberapa option untuk keperluan operasional seperti penamaan file, pesan feedback, share file, dan lain-lain. Pada sisi kiri tool bagian atas, kita dapat melihat beberapa opsi icon button, berikut penjelasaannya: Icon Figma: Disini kamu dapat memilih semua pengaturan terhadap software Figjam, kamu dapat menemukan opsi untuk menambah file Figjam, Import image, Keyboard Shortcut, dan lain-lainTimer and Music: Ini merupakan tools yang dapat membantu kamu untuk memulai timer dan memainkan music agar kamu dapat fokus dan efesien dalam mengerjakan ideation.AI Generate: Tools ini sangat cocok bagi kamu yang ingin memulai suatu pekerjaan dengan framework tertentu yang belum disediakan template nya. Kamu disini dapat menulis sendiri prompt untuk AI atau dapat memilih opsi yang telah disediakan seperti chart, diagram dan brainstorm.Template: Pada tools ini, kamu disediakan ratusan template yang sangat berguna pada pekerjaan tertentu, mulai dari meeting, planning, diagram, develop, user research, hingga design. Kamu juga dapat melihat template yang diberikan komunitas di tombol ‘See more in Community’Feedback: Tools ini memungkinkan kamu dan orang lain dapat saling memberikan feedback di beberapa titik. Kamu juga dapat melihat feedback berdasarkan list pada sisi kanan tampilan kamu.Nama File: Disini kamu dapat melihat nama file yang sedang kamu edit. Kamupun dapat rename nama tersebut dengan klik 2x pada tulisan Untitled tersebut.Share: Disini kamu dapat mengundang kolega kamu, ataupun membagikan link File Figjam kamu.Zoom in & out: Kamu dapat melakukan Zoom In & Zoom Out pada whiteboard kamu. Cukup tekan tombol “+” atau “-” sesuai dengan preferensi kamu. Tools bagian Bawah Jika kita tadi sudah membahas tools bagian atas, maka sekarang kita membahas bagian bawah. Tidak seperti bagian atas, disini Figjam lebih menyediakan tools yang berhubungan dengan whiteboard dan kreativitas. Select Tool & Hand Tool: Kamu dapat memakai Select tool ini untuk keperluan memilih, nge-block, ataupun drag & drop. Sedangkan Hand tool, kamu dapat memakai ini untuk keperluan melihat-lihat tanpa mengedit apapunMarker: Disini kamu disediakan berbagai macam market, lebih dalamnya yaitu seperti spidol, pensil, penghapus, dan tape dalam berbagai macam warna.Sticky Note: sama seperti sticky notes pada umumnya, kamu dapat menggunakannya untuk keperluan brainstorming atau catatan kecil.Shape & Connector: Figjam menyediakan banyak sekali bentuk dan warna untuk kamu memulai bikin flowchart, diagram, ataupun wireframe. Disini kamu juga dapat membuat connectorText: Seperti biasa, kamu bisa bikin teks melalui ini.Section: Section dapat digunakan saat kita ingin membedakan satu block dengan block lainnya agar tidak kebingungan saat mencarinya.Table: Tidak hanya menyediakan tools untuk gambar atau bentuk, Figjam juga menyediakan table untuk keperluan memasukkan data-data penting.Stamp: Disini Figjam menyediakan stamp & emoticon yang unik dan lucu. Stamp biasanya digunakan untuk melakukan voting.Template: Figjam banyak menyediakan template untuk kamu memulai suatu pekerjaan. Di dalam tools ini, kamu dapat banyak menemukan template berguna seperti untuk memulai meetings, sesi brainstorming, diagram, flowchart, dan masih banyak lagi. Tidak cuma template, tools ini juga menyediakan stickers yang unik, Widget seperti kanban dan Jambot AI, Plugin, dan masih banyak lagi. Kesimpulan Well, berikut tadi adalah tools-tools sederhana yang bisa kamu pakai saat menggunakan Figjam. Tentunya, masih banyak lagi tools di dalam Figjam yang lebih dalam untuk menunjang kamu bekerja dengan lebih mudah lagi seperti Jambot AI. Kelebihan pemakaian Figjam yang mudah digunakan, beragam pilihan template untuk memulai, dan tingkat kustomisasi yang luas dapat menjadikan Figjam sebagai elemen penting untuk brainstorming, meeting, diagram, dan banyak hal. Sehingga, Figjam merupakan solusi yang tepat bagi para developer, designer, product manager, dan lain-lain. Untuk mendapatkan solusi yang terbaik dari setiap sesi yang mereka lakukan, dan memvisualisaikannya dalam bentuk Whiteboard di Figjam. Silahkan dipelajari beberapa kelas gratis UI/UX Design yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!

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😉

Halo, Sobat Developer! Di dunia yang serba cepat ini, siapa sih yang tidak ingin bekerja dengan lebih efisien? Terutama bagi kalian, para developer memiliki alat yang tepat akan sangat membantu dalam pengerjaan suatu project betul tidak? Nah, di sinilah Visual Studio Code (VSCode) akan mempermudah kamu. Sebagai salah satu code editor yang paling banyak digunakan, VSCode menawarkan berbagai extension yang bisa membuat pekerjaan kita sebagai developer menjadi lebih mudah dan menyenangkan. Dalam artikel ini, saya ingin mengajak kalian untuk mengeksplorasi 10 extension di VSCode yang akan membantu kita dalam berkerja. Dari extension yang membuat code kita menjadi tertata rapi, hingga extension yang mempermudah kita debuging codingan kita, Siap untuk menemukan extension yang mungkin selama ini kamu cari? Yuk, kita simak pembahasannya! 🚀💻 1. Prettier - Code Formatter Nah, di list yang pertama ini ada Prettier - Code Formatter Bagi kalian yang sering menggunakan HTML, CSS, hingga JavaScript, Prettier ini berfungsi untuk merapikan codingan kamu. Prettier akan membuat setiap baris code yang kamu tulis tidak hanya berfungsi dengan baik, tapi juga terlihat cantik dan rapi. Hal ini membuat codingan kita dapat dibaca dengan lebih mudah dan dipahami, baik oleh kamu atau developer lainya yang ingin melihat codinganmu. Manfaat Extension Prettier: 🌟 Membuat codingan Menjadi Estetik: Prettier akan membantu membuat codingan kamu menjadi lebih estetik, kamu hanya perlu klik ctrl + s (save). Maka codingan kamu akan tertata dengan rapi.✨ Efisiensi Waktu: Dengan Prettier, kamu bisa lebih fokus dengan memecahkan permasalahan yang ada di codingan kamu, Bukan lagi dalam penataan codingan kamu. Sangat menghemat waktu bukan?🎨 Support berbagai bahasa pemrograman: Prettier mendukung berbagai bahasa pemrograman populer, jadi satu extension untuk banyak kebutuhan.🔧 Mudah Diatur: Prettier fleksibel dan bisa kamu sesuaikan dengan standar codingan timmu. Install, set-up, dan biarkan ia bekerja. Dengan Prettier, setiap baris code yang kamu tulis bukan hanya akan efisien dalam performa, tapi juga memanjakan mata siapa pun yang melihatnya🚀✨ 2. Live Server Nah di list yang ke dua ini ada, Live Server yang akan membuat proses pengembangan web kamu jadi lebih lancar dan menyenangkan. Bayangkan, kamu bisa langsung melihat perubahan yang kamu buat pada code HTML atau CSS di browser secara real-time. Yup, tidak perlu lagi bolak-balik refresh halaman webmu. Live Server ini bakal membantumu dalam mengecek perubahan desain atau fungsionalitas halaman web yang sedang kamu garap. Simpel, efektif, dan tentunya, menghemat banyak waktu! Keuntungan Menggunakan Live Server: 🚀 Preview Real-Time: Lihat langsung perubahan pada halaman webmu tanpa perlu refresh manual.🔄 Live Reload Otomatis: Setiap kali kamu menyimpan perubahan pada codingan kamu, Live Server akan otomatis memuat ulang halaman.💡 Efisiensi Waktu: Menghemat waktu dalam proses pengembangan, karena kamu bisa langsung melihat perubahanya. Well, Live Server membantumu dalam mengerjakan suatu project menajdi lebih cepat dan menyenangkan. Let's code and see the magic happen! 🌟💻 3. Bracket Pair Colorizer Pernahkah kamu merasa kebingungan mencari bracket pair yang susah di banyaknya baris code? Nah, Bracket Pair Colorizer hadir sebagai solusi cerdas untuk masalah ini. Bayangkan setiap kurawal, atau bracket di code kamu diberi warna berbeda. Seperti pelangi yang mewarnai langit, extension ini akan mewarnai codinganmu, membuat setiap bagian menjadi jelas dan mudah dikenali. Ini bukan hanya soal estetika, tapi juga tentang membuat navigasi dan pengelolaan code yang kompleks menjadi lebih mudah. Dengan Bracket Pair Colorizer, setiap sesi coding jadi lebih efisien dan mengurangi risiko kecil yang bisa jadi besar, seperti kesalahan dalam menyusun kurung. Kegunaan Bracket Pair Colorizer: 🌈 Membuat codinganmu menjadi berwarna: Masing-masing tag, atau bracket mendapat warna berbeda, membuatnya mudah dilihat.🧭 Navigasi yang Mudah: Dengan warna yang berbeda, mencari kesalahan dalam struktur code jadi lebih cepat dan mudah.👀 Mengurangi Kesalahan dalam Coding: Warna yang berbeda membantu mengurangi kesalahan dalam codingan seperti kurung yang tidak tertutup atau tidak sesuai. Bracket Pair Colorizer ini membuat codingan kamu menjadi jelas dan indah dalam setiap baris code yang kamu tulis. 4. Auto Rename Tag Pernah gak sih, saat kamu asik mengedit code HTML atau XML, lalu tiba-tiba sadar kalau ada tag yang belum kamu ganti namanya? Nah, Auto Rename Tag di sini berfungsi secara otomatis mengganti nama tag pembuka dan penutup sesuai dengan perubahan yang kamu lakukan. Bayangkan, kamu mengubah satu tag, dan voila! Tag pasangannya juga berubah. Tidak perlu lagi khawatir tentang tag yang tidak sinkron atau kesalahan kecil yang bisa membuatmu pusing. Berikut beberapa manfaat extension ini: 🔄 Menyingkronkan Tag yang Kamu Ubah: Ubah satu tag, dan tag pasangannya juga ikut berubah secara otomatis.⏰ Hemat Waktu: Mengurangi waktu kamu untuk mencocokkan tag pembuka dan penutup.🛠️ Kurangi Kesalahan: Dengan Auto Rename Tag, risiko kesalahan seperti tag yang tidak tertutup atau tidak konsisten jadi berkurang.💡 Efisiensi Tinggi: Codingan lebih cepat selesai, lebih rapi, dan tentunya lebih mudah dibaca. Dengan Auto Rename Tag, setiap kali kamu merubah sebuah tag, keseluruhan proses jadi lebih cepat, lebih efisien, dan pastinya lebih mudah.🌟🛠️ 5. ESLint Next, untuk extension yang ke lima ini berfungsi untuk menjadikan code JavaScript-mu lebih bersih dan berkualitas. ESLint merupakan extension yang akan membantumu dalam menjaga kualitas codingan kamu. ESLint adalah JavaScript yang terintegrasi langsung ke dalam Visual Studio Code (VSCode). Jadi, extension ini akan dengan pintar mengidentifikasi dan menyoroti masalah dalam code JavaScript-mu, bahkan sebelum code tersebut dijalankan. Extension ini bukan hanya mebantu mu dalam menemukan error dalam codinganmu, namun juga membantu mu untuk memberikan solusi dari setiap permasalahan yang ada dalam codinganmu. Berikut beberapa manfaat extension ini : 🚀 Memperbaiki kualitas codinganmu: Dengan bantuan ESLint, kamu akan selalu membuat code yang lebih bersih dan berkualitas.🧐 Mendeteksi permasalahan yang ada dalam codinganmu: ESLint membantu kamu menemukan masalah dalam codinganmu sebelum codingan tersebut dijalankan.🧰 Otomatis Memperbaiki Codinganmu: ESLint tidak hanya menunjukkan masalah, tapi juga memberikan solusi untuk memperbaikinya. Dengan ESLint, kamu akan menjadi seorang developer yang lebih tangguh dalam menghasilkan code JavaScript yang handal dan berkualitas. 6. Code Runner Code Runner adalah extension yang akan membantu kamu dalam pengembangan perangkat lunak. Extension ini memungkinkanmu untuk menjalankan code dalam berbagai bahasa pemrograman secara instan, tanpa perlu keluar dari VSCode. Di samping itu, Code Runner menampilkan hasil pengujian code dengan cepat, dan menghemat waktumu. Berikut beberapa manfaat utamanya: 🚀 Mengeksekusi Code dengan Cepat: Menjalankan code hanya dalam beberapa klik, meningkatkan efisiensi pengujian dan debugging.🌐 Support Beberapa Bahasa Pemrogaman: Code Runner mendukung berbagai bahasa pemrograman, memungkinkanmu untuk bekerja dalam bahasa yang kamu kuasai. Dengan Code Runner, pengujian dan eksekusi code kamu akan lebih efisien dan menyenangkan.🏃‍♂️ 7. Path Intellisense Kalian tentu pernahkan saat mengerjakan sebuah project bingung mencari file-file yang dibutuhkan? Perkenalkan extension yang satu ini, Path Intellisense hadir sebagai extension yang mengatasi masalah ini. Extension ini menyediakan fitur autocompletion untuk jalur file, sehingga saat kamu mengetik alamat file, Path Intellisense akan dengan cerdas menampilkan pilihan file yang sesuai. Dengan begitu, kamu tidak perlu lagi menghafal jalur-jalur file yang panjang atau mencarinya secara manual. Di samping itu, ada beberapa manfaat tambahan: 🚀 Navigasi yang Cepat: Path Intellisense membuat navigasi file dalam proyekmu menjadi lebih cepat dan efisien.📂 Memudahkan saat digunakan pada Project Besar: Extension ini ideal untuk digunakan dalam project-project besar dengan banyak file dan folder.🎯 Menghindari Kesalahan: Mengurangi risiko kesalahan karena kamu tidak perlu mengetik jalur file secara manual. Dengan Path Intellisense, proses mencari dan menavigasi file dalam proyekmu akan menjadi lebih mudah dan efektif.🌟📁 8. CSS Peek Pasti kalian sering menemukan tantangan dalam mengulik code CSS kalian? Nah, extension CSS Peek ini merupakan extension yang akan membuat proses dalam menavigasi code CSS dengan cepat dan mudah. Tidak hanya itu berikut adalah beberapa manfaat dari extension tersebut : 🚀 Menemukan Deklarasi CSS dengan Mudah: Dengan CSS Peek, kamu dapat dengan mudah menemukan deklarasi CSS untuk elemen yang spesifik tanpa harus mencari-cari manual.🌈 Melihat Sumber Code CSS di HTML: Extension ini memungkinkan kamu melihat code sumber CSS yang terhubung dengan elemen HTML tertentu dengan sekali klik.👁️ Membantu Dalam Mencari Hubungan Element dengan Code CSS: Memudahkan dalam memahami hubungan antara elemen HTML dan code CSS yang berkaitan. Dengan bantuan CSS Peek, kamu akan mudah dalam mengelola dan menavigasi code CSS akan menjadi jauh lebih baik. 9. GitLens Jika kamu mencari cara untuk lebih memahami history dan perubahan code dalam project kamu, GitLens adalah extension yang tepat untukmu. Extension ini membawa fitur bawaan Git di Visual Studio Code (VSCode) dengan beragam fitur hebat, seperti tracking perubahan code kamu, riwayat perubahan, dan banyak lagi. Tidak hanya itu, berikut adalah beberapa manfaat utamanya: 🕵️ Tracking Perubahan Codinganmu: GitLens memungkinkan kamu untuk melacak setiap perubahan code, mengetahui siapa yang merubahnya, dan kapan perubahan itu terjadi.📜 History Perubahan: Kamu dapat menjelajahi riwayat perubahan codinganmu dengan mudah, melihat semua revisi, dan membandingkannya.🙌 Memudahkan dalam Berkolaborasi dengan Tim: Membantu dalam bekerja sama dengan tim, karena kamu dapat melihat kontribusi setiap anggota tim dengan mudah. Dengan GitLens, kamu akan mudah dalam melacak codinganmu yang lebih jelas dan mendalam, memungkinkanmu untuk mengelola versi code dengan lebih baik dan berkolaborasi dengan tim secara efisien.🌟🧑‍💻👩‍💻 10. CSS Flexbox Cheatsheet Ketika berurusan dengan desain tata letak dalam CSS, ilmu tentang Flexbox adalah kunci untuk menciptakan tampilan yang responsif dan rapi. Well berbicara soal flexbox, CSS Flexbox Cheatsheet hadir sebagai extension yang akan membantumu menguasai konsep-konsep Flexbox dengan mudah. Inilah beberapa manfaat utamanya: 🎯 Memberi Gambaran Jelas Terkait Properti Flexbox Pada CSS: Cheatsheet ini memberikan gambaran jelas tentang properti Flexbox dan bagaimana cara menggunakannya.📈 Menyederhanakan Code CSS: Dengan pemahaman yang baik tentang Flexbox, kamu dapat menyusun code CSS dengan lebih efisien.📱 Responsifitas: Menggunakan Flexbox membantumu membuat tampilan yang responsif untuk berbagai perangkat. Extension ini sangat berguna untuk membantumu menguasai Flexbox, sehingga dapat meningkatkan keterampilan desain tata letak dan menciptakan tampilan web yang lebih baik. Kesimpulan Well, tidak terasa kita telah menjelajahi 10 ekstensi Visual Studio Code yang sangat membantu produktivitas para developer. Dari Prettier yang membantu merapikan setiap baris codingan hingga GitLens yang mempermudah pelacakan perubahan dalam codingan, setiap ekstensi memberikan nilai tambah yang luar biasa dalam pengembangan perangkat lunak. Selain itu, dengan adanya CSS Flexbox Cheatsheet, kita dapat menguasai konsep-konsep Flexbox dengan lebih mudah, meningkatkan keterampilan tata letak desain, dan menciptakan tampilan web yang lebih responsif. Nah, buat kamu yang ingin terus mengembangkan keterampilan dalam dunia web development, saya ingin mengajakmu untuk bergabung di kelas BuildWithAngga. Di sana, kamu dapat memperdalam pengetahuan dan keterampilanmu dalam pengembangan perangkat lunak. Jadi, jangan ragu untuk mendaftar dan terus meningkatkan kemampuanmu. Selamat bertemu dikelas! 🚀💻

User Research merupakan proses yang sangat penting untuk kesuksesan sebuah produk yang sedang dikembangkan. Tanpa adanya user research, sebuah user tentunya akan mengalami banyak frustasi saat menggunakan produk tersebut, bahkan dari sisi pengembang-pun akan memakan banyak biaya dan waktu tanpa menghasilkan outcome yang diharapkan dari sisi bisnis. Oleh sebab itu, mempelajari bagaimana cara melakukan user research design yang baik akan sangat berguna saat kita membangun sebuah produk digital, agar outcome yang dihasilkan sesuai dengan apa yang kita inginkan dengan menggunakan biaya dan waktu se-efisien & se-efektif mungkin. Di dalam artikel ini, saya akan memberikan beberapa tips melakukan user research design yang baik, agar kamu tidak membuang waktu & biaya dengan sia-sia. Definisikan Rencana Research dengan Jelas Hal pertama yang harus kamu lakukan agar research kamu efektif & efisien adalah memastikan tujuan kamu terdefinisi secara jelas. Dengan adanya tujuan secara jelas, kamu akan sangat terbantu untuk mengidentifikasi metode mana yang sekira nya akan cocok untuk dipakai, sehingga outcome yang akan dihasilkan akan sesuai dengan apa yang kita inginkan. Sebagai contoh tujuan research seperti berikut: Definisikan Research goals: Disini kamu bisa menulis masalah apa yang ingin kamu coba selesaikan, apakah itu untuk user atau bisnis? Dan bagaimana output dari user research ini dapat berdampak pada design decision kamu?Buat Research Questions: Buatlah beberapa pertanyaan yang akan dijawab melalui research, seperti “Berapa lama user membutuhkan waktu untuk mencapai checkout order?”Menentukan KPI: KPI atau Key Performance Indicators merupakan metode pengukuran yang dipakai, contohnya adalah Time on Task, use of navigation vs. search, user error rates, drop-off rates, dan lain-lain.Memilih participant yang tepat: Memilih participant sesuai dengan kriteria tujuan research, seperti gender, umur, demografi, bahkan spesifik populasi seperti disabilitas dan lainnya. Patut diingat, mendefisinikan tujuan utama dan goals melakukan user research ini akan sangat berguna agar kamu tidak membuang waktu dan uang hanya sia-sia. Memilih Metode Research yang Sesuai User Research pada dasarnya memiliki 2 kategori, yaitu kualitatif dan kuantitatif. Kualitatif research fokus kepada pemahaman “why” dibalik perilaku user. Contoh pada kualitatif adalah user interview, observation, usability testing, focus group. Sedangkan kuantitatif lebih kepada hasil yang berbentuk data numerikal dan persentase, contohnya seperti survey atau kuisioner. Kedua metode research tersebut sangatlah penting dan dapat dilakukan bersamaan. Namun, perlu diketahui bahwa pemilihan metode research bergantung pada tujuan dan skala pada project kamu, dan penting untuk memahami secara jelas Research Plan yang telah saya bahas sebelumnya, agar kamu tidak membuang waktu dan uang yang sia-sia. Pelajari Presentasi Temuan Kamu agar Efektif dan Efisien Untuk melakukan user research, tentunya bukan cuma mencari jawaban atas pertanyaan research yang telah kita buat. Tetapi juga, orang lain juga harus paham atas hasil yang telah kita dapatkan. Dengan mempelajari presentasi yang baik dan benar, insights yang telah kamu dapatkan dengan mudah dipahami dan diimplementasi. Contoh presentasi hasil user research yang efektif dan efisien: Executive Summary: kamu bisa membuat executive summary bersamaan dengan informasi background research dan hasil temuanmu.Statistic dan Visual: Buatlah statistic dan visual yang menarik namun tidak sulit untuk dibaca untuk men-support dan mengilustrasikan poin-poin yang telah kamu temukan.Impact and Recommended Action: kamu bisa menjelaskan secara ringkas dan jelas tentang dampak dari hasil research kamu dan juga memberikan aksi rekomendasi untuk mengatasi hasil research kamu tersebut. Dengan menyampaikan secara jelas tujuan, hasil temuan, dampak, serta aksi rekomendasi, kamu dapat membantu orang lain memahami kenapa hasil temuan kamu tersebut sangat berguna dan apa yang harus orang tersebut lakukan. Kesimpulan Well, berikut tadi adalah 3 tips bagaimana cara melakukan user research design yang baik. Tentunya, research akan selalu dipakai kepedepannya dimanapun industry kamu berada. Dengan adanya research, kamu akan selalu kompetitif dengan perusahaan lainnya. Berikut beberapa key takeaways agar user research kamu lebih baik: Definisikan secara jelas tujuan dan rencana kamu melakukan user research.Pilihlah metode research yang sesuai dengan rencana serta kemampuan kamu.Buatlah presentasi kamu lebih efektif dan efisien lagi agar orang lain lebih mudah memahami serta dapat di-implementasikan. 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. Good Luck!

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!

Dalam dunia desain user interface (UI), navigasi merupakan salah satu elemen kunci yang mempengaruhi experience pengguna. Dari beragam pilihan navigasi, bottom navigation bar atau menu navigasi bawah telah menjadi salah satu elemen yang sangat populer dalam aplikasi mobile dan situs web. Dengan fokus pada kesederhanaan dan kejelasan, terdapat beberapa prinsip penting yang dapat meningkatkan efektivitas bottom navigation bar. Dalam artikel ini, kita akan sama-sama belajar empat pedoman utama yang dapat membantu kamu menciptakan bottom navigation bar yang baik dan memaksimalkan user experience, mulai dari jumlah item yang optimal hingga desain visual yang jelas dan informatif. 1. Maksimal 5 Item, Minimal 3 Item Pastikan kamu memiliki ****paling banyak hanya 5 item dalam bottom navigation bar. Terlalu banyak opsi dapat membuatnya terlihat berantakan dan membingungkan user. Pilihlah item-item yang paling penting untuk ditempatkan di sana. 2. Tandai State Aktif dengan Jelas Pastikan ada indikator visual yang jelas untuk menandai item yang sedang aktif. Ini dapat berupa perubahan warna, icon yang lebih terang, atau “penyorotan” untuk membedakan item yang sedang digunakan oleh pengguna. 3. Sertakan Label! Tambahkan label untuk setiap item dalam navigasi. Label ini akan membantu pengguna memahami dengan jelas fungsi dari setiap ikon. Label yang singkat namun deskriptif dapat membuat navigasi lebih mudah dipahami. 4. No Scrolling Pastikan semua item yang terpilih dapat terlihat tanpa perlu scrolling. User harus dapat dengan mudah melihat semua pilihan yang tersedia tanpa harus scroll ke samping. Hal ini akan meningkatkan kejelasan dan keterbacaan navigasi. 5. Consistency Pastikan design setiap item dalam bottom navigation bar konsisten. Mulai dari ukuran, jenis huruf, hingga jarak antar item. Konsistensi membantu pengguna untuk merasa nyaman dan terbiasa dengan penggunaan navigasi. 6. Hindari Penggunaan Warna yang Berlebihan! Gunakan warna secara konsisten dan hindari penggunaan terlalu banyak warna yang bisa membingungkan pengguna. Pemilihan warna yang tepat dapat membantu membedakan fungsi, namun terlalu banyak warna dapat membuat tampilan menjadi tidak teratur. Kesimpulan 💬 Dalam pembuatan bottom navigation bar yang baik, terdapat beberapa prinsip penting yang perlu diperhatikan seperti: Batasan maksimal sebanyak 5 item,state aktif yang jelas,penggunaan label,hindari scrolling,konsistensi desain,dan pemilihan warna yang tidak berlebihan Hal-hal tersebut dapat membantumu menciptakan user experience yang lebih baik. Dengan mengikuti prinsip-prinsip ini, button navigation akan menjadi alat yang efektif dalam mengarahkan user ke fitur-fitur utama tanpa menyebabkan kebingungan. Konsistensi dan kesederhanaan adalah kunci dalam merancang bottom navigation bar yang baik untuk meningkatkan aksesibilitas navigasi dan kenyamanan pengguna. Jika kamu ingin belajar lebih dalam mengenai UI/UX design secara mendalam, kamu bisa mulai dengan kelas-kelas gratis UI/UX design menggunakan software Figma di BuildWithAngga 😊

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.

Ketika memasuki dunia digital yang serba cepat ini, keberadaan sebuah website dengan desain yang memukau menjadi bagian yang tak terpisahkan dari keberhasilan bisnis. Tampilan visual yang menarik tidak hanya menahan mata pengunjung lebih lama di situs kamu, tetapi juga meningkatkan kemungkinan mereka untuk berinteraksi dengan konten yang kamu tawarkan. Untuk mencapai hal tersebut, diperlukan serangkaian alat desain web yang handal. Dalam tulisan ini, kita akan membahas lima aplikasi desain web terkemuka yang dapat membantu kamu membentuk sebuah website yang tak hanya memanjakan mata, tapi juga fungsional dan responsif. 1. Adobe XD Dalam dunia desain UI/UX yang dinamis, Adobe XD berdiri sebagai perangkat lunak yang menyederhanakan proses kreatif. Antarmukanya yang ramah pengguna dan fitur-fitur inovatif memungkinkan kamu untuk melampaui batasan desain tradisional dan melangkah ke wilayah eksperimental dengan prototype yang dapat berinteraksi. Fitur Utama yang Menjadikan Adobe XD Favorit di Kalangan Desainer: Kemampuan Prototyping: Mengubah ide desain menjadi prototype yang dapat diinteraksikan dengan lancar.Fasilitas Kolaborasi: Platform kolaboratif yang memudahkan tim untuk mengedit dan memberikan umpan balik dalam waktu nyata.Adaptasi Responsif: Alat yang memastikan desain kamu tampil prima di berbagai perangkat dan ukuran layar. 2. Sketch Dikembangkan khusus untuk MacOS, Sketch memberikan solusi desain antarmuka yang simpel namun penuh daya. Aplikasi ini memungkinkan kamu untuk menghadirkan kecanggihan tanpa kompromi melalui fitur-fitur yang dipoles untuk kebutuhan desain modern. Manfaat Menggunakan Sketch dalam Alur Kerja Desainmu: Penggunaan Simbol & Pustaka: Memfasilitasi pembuatan elemen desain yang konsisten dan mudah diulang.Dukungan Plugin yang Luas: Dengan beragam plugin, meningkatkan efisiensi dan kreativitas menjadi lebih mudah.Antarmuka yang Bersih: Tampilan yang minimalis dari Sketch mendukung fokus penuh terhadap detail desain. 3. Figma Figma meraih perhatian para desainer dengan model berbasis cloud yang menawarkan kemudahan akses dan kolaborasi. Figma mendobrak batas fisik dan memungkinkan desainer untuk berkolaborasi secara efektif, tidak peduli di mana mereka berada. Poin-Poin yang Membuat Figma Menjadi Alat Esensial untuk Desainer Modern: Kemampuan Kolaborasi Secara Real-time: Memungkinkan tim untuk bekerja bersama di satu rancangan secara bersamaan, tidak peduli jarak.Aksesibilitas Cloud: Mengedit dan mengakses desain dari mana saja, menawarkan fleksibilitas luar biasa.Penggunaan Komponen yang Efisien: Dengan komponen dan varian, Figma memudahkan pembuatan desain yang konsisten. 4. Webflow Berbeda dengan alat-alat desain lainnya, Webflow menawarkan keistimewaan dengan mengintegrasikan desain dan pengembangan web menjadi satu alur kerja yang mulus. Ini memungkinkanmu untuk langsung mengubah desain menjadi situs web yang berfungsi tanpa perlu menulis satu baris kode pun. Mengapa Webflow Menjadi Game Changer dalam Dunia Desain Web: Antarmuka Drag-and-Drop: Mudah digunakan untuk mendesain situs tanpa memerlukan latar belakang pemrograman.Animasi yang Menawan: Tambahkan dimensi ekstra pada situs kamu dengan animasi dan interaksi yang dapat disesuaikan.Hosting Terpadu: Kemudahan dalam menerbitkan situs langsung dari platform Webflow. 5. Affinity Designer Sebagai saingan dari suite Adobe, Affinity Designer menawarkan kemampuan desain vektor yang hebat dengan biaya yang lebih bersahabat. Ini adalah pilihan yang sempurna bagi mereka yang mencari solusi satu kali bayar dengan kemampuan yang tidak kalah dari pesaing berlangganan bulanannya. Alasan untuk Mengadopsi Affinity Designer sebagai Alat Desainmu: Kinerja yang Responsif: Berjalan mulus pada berbagai konfigurasi sistem, memastikan proses desain yang lancar.Model Pembayaran Satu Kali: Tanpa perlu khawatir akan biaya langganan berulang.Fitur Vektor yang Canggih: Alat-alat vektor yang lengkap memudahkan proses kreatif dari sketsa hingga hasil akhir. Kesimpulan Dalam merajut keindahan dan fungsi pada sebuah situs web, memilih perangkat yang sesuai bukanlah sekedar keputusan teknis, tetapi juga sebuah langkah kreatif: Adobe XD membuka jalan bagi desain interaktif yang canggih.Sketch memberikan solusi desain yang efektif dan intuitif khusus bagi pengguna MacOS.Figma menawarkan platform yang memudahkan kolaborasi antar desainer dalam realtime, memperkaya proses kreatif.Webflow mengubah paradigma dengan memungkinkan desainer untuk memvisualisasikan dan mengimplementasikan desain web secara langsung.Affinity Designer, memberikan kebebasan kepada pengguna untuk bereksperimen dengan desain vektor dan raster dalam satu lingkungan yang lancar. Bagi kamu yang berambisi untuk menguasai keahlian desain UI/UX dan ingin menambah pengetahuan dalam merancang situs web yang tidak hanya indah dari sisi estetika tetapi juga kaya akan pengalaman pengguna, sekarang adalah saatnya. Melalui beberapa kelas desain UI/UX di BuildWithAngga, kamu akan dipandu untuk menumbuhkan kemampuan ini. Saya mengundangmu untuk mengeksplorasi dunia desain, memperluas wawasan dan berkolaborasi untuk menciptakan karya digital yang tidak hanya berfungsi dengan baik, tapi juga memanjakan mata dan mudah digunakan oleh setiap pengguna. Semoga sukses, dan kita akan berjumpa di kelas untuk memulai petualangan desainmu.