Tips Design

UX Deliverable adalah dokumen, presentasi, diagram atau laporan yang dibuat pada berbagai tahap proses desain sebuah produk terutama produk digital yang biasanya dikerjakan oleh seorang UX Designer. UX Deliverable dibuat untuk tujuan mengkomunikasikan ide, penelitian, pekerjaan, pengujian, dan strategi kepada tim internal, stakeholders, atau klien. Berikut ini beberapa UX Deliverable yang umum digunakan oleh para desainer: Mengenal UX Deliverables, User Persona, User Flow, Wireframe, dan Prototype 1. User Persona UX Deliverables User Persona oleh Milan Opsenica User persona adalah karakter fiksi yang dibuat dari hasil research oleh desainer yang bertujuan untuk mewakili target pengguna yang akan menggunakan produk kita. Elemen umum yang ada pada sebuah user persona yaitu: Profil (nama, gambar atau foto karakter)Demografi (usia, status, lokasi, pekerjaan, penghasilan, dan hal lain yang relevan dengan produk atau ruang masalah kita)Tujuan atau kebutuhan pengguna terkait produkPsikografis (sikap, minat, motivasi, dan pain point / kesulitan yang dihadapi) Kegunaan user persona dalam UX antara lain: Membentuk riset pengguna produk dalam format visul yang mudah dicernMembangun empati pengguna dan memastikan proses desain memprioritaskan kebutuhan target penggunaMengarahkan, menginformasikan, dan membenarkan keputusan desainMemungkinkan orang lain untuk memahami untuk siapa kita mendesain 2. User Flow UX Deliverables User Flow oleh Lanp User flow merupakan langkah-langkah yang harus dilakukan oleh pengguna untuk menyelesaikan atau mengerjakan tugas tertentu yang umumnya divisualisasikan dalam bentuk diagram alir. Adapun kegunaan user flow dalam proses desain antara lain: Membantu kita mengidentifikasi masalah yang mungkin terjadi sebelum kita mulai mendesain tampilan layar fidelitas tinggi (high-fidelity screens)Mencegah desain ulang setelah produk memasuki tahap pengembanganMemaksa kita untuk mempertimbangkan cara termudah bagi pengguna untuk menyelesaikan sebuah tugasMempertimbangkan alur/langkah alternatif yang mengarah ke pengalaman pengguna (user experience) terbaik 3. Wireframe UX Deliverables Wireframe oleh Shabnam Gideon Salah satu tahapan yang penting dalam mendesain sebuah produk adalah wireframing. Wireframe sendiri adalah skema atau kerangka yang dapat memberikan gambaran kasar (low-fidelity) setiap halaman yang terdapat dalam sebuah website atau aplikasi. Manfaat wireframe dalam proses pengerjaan sebuah produk terutama produk digital yaitu: Memberikan UI Designer gambaran dasar sebelum mulai mendesain high-fidelity screensMenjadi titik referensi untuk pengembangan situs atau aplikasiMengkomunikasikan pengalaman menggunakan situs kepada klien tanpa terlalu banyak menyoroti desain visual dan brandingMembantu tetap fokus pada pengalaman pengguna (user experience)Memperjelas dan menentukan fitur dalam websiteSebagai dasar untuk pembuatan prototype dan user testing sejak awal 4. Prototype UX Deliverables Prototype oleh Michal Kulesza Prototype adalah simulasi atau sampel produk akhir yang digunakan tim UX untuk pengujian alur produk sebelum produk itu diluncurkan. Tujuan dari prototype adalah untuk menguji dan memvalidasi ide sebelum membagikannya dengan stakeholder atau klien dan akhirnya menyerahkan desain akhir kepada tim teknik atau programmer untuk proses pengembangan. Manfaat dari prototyping: Prototyping dapat digunakan untuk menguji berbagai jenis ide, konsep dalam bentuk yang berbeda serta dapat diterapkan pada berbagai tahap desain dan proses desain ulangPrototyping memungkinkan mengidentifikasi masalah serta kesalahan atau bias yang mungkin telah diperkenalkan ke dalam penelitian selama tahap awal perumusan solusiPembuatan prototipe membantu kita mendapatkan umpan balik langsung karena melibatkan dengan calon pelanggan. Ini juga memberikan wawasan yang lebih dalam dan gagasan yang lebih baik tentang nilai yang dapat ditangkap dari solusi yang diusulkan Kesimpulan UX deliverables sangat dibutuhkan dalam pembuatan sebuah produk terutama produk digital seperti website atau aplikasi. Banyaknya ux deliverables yang dibutuhkan tergantung proses, tim, dana dan produk yang akan dibuat. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Figma saat ini merupakan salah satu software atau aplikasi favorit untuk mendesain bagi para desainer terutama UI/UX Designer. Awalnya Figma hanya bisa diakses online melalui browser, namun sekarang sudah ada versi Desktop yang dapat diunduh untuk perangkat macOS maupun Windows. Cara Download dan Install Figma di Laptop atau Komputer Berikut cara mengunduh dan meng-install Figma versi Desktop di komputer: 1. Kunjungi website resmi Figma Kalian bisa mengunjungi website resmi Figma di https://www.figma.com/ 2. Pilih menu Products Menu products pada webiste Figma Setelah membuka webstie Figma, pada menu Products, silahkan klik menu Downloads 3. Pilih link download sesuai perangkat yang digunakan Link untuk mendownload Figma versi Desktop Pilih “Desktop app for macOS” jika kamu menggunakan perangkat macOS atau pilih “Desktop app for Windows” jika kamu menggunakan perangkat Windows. Setelah itu tunggu file instalasi terunduh di komputermu 4. Install file Figma Setalah file instalasi Figma selesai di unduh, klik file instalasi tersebut lalu tunggu aplikasi Figma versi Desktop terpasang di komputermu. 5. Buka aplikasi Figma Tampilan awal aplikasi Figma Desktop Setelah berhasil terinstall di komputermu, buka aplikasi Figma lalu silahkan Log in jika kamu sudah mempunyai akun atau klik Create one untuk mendaftar secara gratis jika kamu belum mempunyai akun. 6. Template dari Figma Tampilan apikasi Figma setelah berhasil login Saat kalian berhasil Log in kalian bisa lanjut meneruskan projek desain kalian atau membuat file desain baru dengan cara menekan menu “New design file”. Tampilan halaman Community di Figma Selain kalian bisa mendesain dari awal, pada menu Community kalian akan menemukan banyak template dan plugin yang sudah disediakan oleh Figma maupun dari desainer lain secara gratis. Kesimpulan Itulah cara untuk mengunduh dan meng-install Figma versi Desktop di komputer. Lalu, kenapa kita menggunakan Figma versi Desktop padahal kita bisa mengakses Figma melalui browser? Beberapa keunggulan menggunakan versi Desktop yaitu: Tidak perlu menggunakan koneksi internet, kita hanya perlu menggunakan koneksi internet saat membuka file desain kita dan saat ingin menyimpan file tersebutSaat ingin menyimpan atau export, kita bisa memilih folder atau tempat file export tersebut akan disimpan, sedangkan jika menggunakan versi browser, file tersebut akan otomatis tersimpan di folder Download Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Selain menyediakan templates berupa file, Figma juga menyediakan berbagai macam plugins yang dapat mempermudah dan mempercepat pekerjaan mendesain kalian. Berikut ini beberapa plugins populer yang sering digunakan oleh para desainer: 10 Plugins Figma Terpopuler Untuk Designer 1. Unsplash Figma Plugin - Unsplash oleh Kirill Zakharov Unsplash merupakan salah satu plugins favorit yang menyediakan stok foto berkualitas HD yang dapat digunakan secara gratis. Untuk menggunakannya kalian hanya perlu menjalankan plugin tersebut lalu pilih foto yang ingin kamu gunakan, atau jika ingin mencari foto yang lebih spesifik kamu bisa mencarinya dengan menuliskan kata kuncinya di kotak pencarian. 2. Content Reel Figma Plugin - Content Reel oleh Microsoft Content Reel merupakan plugins yang dapat kamu gunakan untuk mengganti placeholder seperti teks, gambar, dan ikon. Selain memilih konten yang sudah tersedia, kamu juga bisa membuat konten sendiri. Untuk menggunakannya, pilih text layer atau frames atau shapes yang ingin kamu ubah, lalu jalankan plugin dan pilih konten yang kalian inginkan. 3. LottiFiles Figma Plugin - LottieFiles oleh LottieFiles Dengan menggunakan LottiFiles kamu dapat memasukkan animasi yang dapat di import berupa SVG maupun GIF kedalam desain mu. Terdapat ribuan macam animasi yang dapat digunakan secara gratis. Sebelum menggunakan plugin ini, kamu harus memiliki akun LottiFiles terlebih dahulu, jika belum memiliki akun bisa mendaftar di https://lottiefiles.com/. Untuk menggunakannya, buka plugin lalu login, lalu pilih animasi yang dibutuhkan. 4. Remove BG Figma Plugin - Remove BG oleh Aaron Iker Remove BG sangat berguna untuk menghapus background sebuah foto atau gambar. Untuk menggunakan plugin ini, cukup memilih foto yang ingin dihapus backgroundnya lalu klik Run. Sebelumya, kamu harus memiliki akun terlebih dahulu yang dapat dibuat di https://www.remove.bg/. 5. Mapsicle Figma Plugin - Mapsicle oleh Chris Arvin Jika kamu membutuhkan sebuah gambar peta, maka tidak perlu lagi melakukan screenshot melalui Google Maps. Cukup menggunakan plugin Mapsicle. Dengan plugin ini, kamu dapat mengatur ukuran peta dan style peta sesuai kebutuhan. Untuk dapat mencari lokasi yang diinginkan, kamu harus membuat akun di Mapbox terlebih dahulu, lalu copy-paste token akun mu ke dalam plugin Mapsicle. Untuk menggunakannya, buka plugin, pilih lokasi lalu atur ukuran peta dan style sesuai kebutuhan, setelah itu klik Create map. 6. Design Lint Figma Plugin - Design Lint oleh Discord Dengan menggunakan plugin Design Lint, kamu dapat membuat desain menjadi konsisten. Plugin ini dapat menemukan error dari tiap frame yang dipilih seperti font, shadows, border radius, fill, stroke, dll yang tidak konsisten dengan desain yang lainnya atau karena belum diberi style. Untuk menggunakannya, buka plugin lalu pilih frame yang ingin hendak dicek, setelah menemukan error kalian dapat memperbaikinya atau skip error tersebut. 7. Iconify Figma Plugin - Design Lint oleh Discord Iconify merupakan plugin yang memiliki lebih dari 100.000 ikon yang dapat digunakan untuk keperluan desain kalian secara gratis. Beberapa set icons yang tersedia di Iconify yaitu Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, dan masih banyak lagi. Untuk menggunakanya, buka plugin lalu pilih set icons, setelah itu pilih ikon yang kalian butuhkan atau bisa juga dicari langsung dengan menuliskan kata kuncinya di kotak pencarian. Sebelum import icon, kamu juga bisa mengatur warna dan ukuran ikonnya. 8. Wireframe Figma Plugin - Wireframe oleh Hexorial Studio Wireframe merupakan plugin yang menyediakan templates wireframe untuk web, mobile, dan tablet sehingga tidak perlu menghabiskan waktu untuk membuat wireframe dari awal. Untuk menggunakannya, buka plugin lalu pilih template yang dibutuhkan. 9. Charts Figma Plugin - Charts oleh Sam Mason de Caires Charts merupakan plugin yang dapat membantu kamu saat membutuhkan sebuah grafik atau diagram pada desain kalian. Ada 5 tipe yang dapat kalian pilih yaitu line, scatter, area, bar, pie / doughnut. Kamu juga dapat mengatur jumlah poin, nilai maks/min, dan tampilkan/sembunyikan grid, titik, dan label pada diagram. Untuk menggunakannya, kamu cukup jalankan plugin nya lalu atur diagram sesuai keinginan/kebutuhan. 10. A11y - Color Contrast Checker Figma Plugin - A11y - Color COntrast Checker oleh Kelly Gorr A11y - Color Conrast Checker merupakan salah satu plugin yang dapat membantu untuk mengecek dan membenarkan kontras warna dari desain agar konten lebih mudah dibaca dan memenuhi pedoman Web Content Accessibility Guidelines (WCAG). Untuk menggunakannya, kalian jalankan plugin nya lalu pilih frame yang ingin kalian cek. Kesimpulan Untuk mempermudah dan mempercepat dalam pengerjaan desain di Figma, kita dapat menggunakan beberapa bantuan plugin-plugin yang tersedia secara gratis di dalam Figma. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Pernah mendapatkan projek untuk membuat website atau ingin melakukan eksplorasi web design tapi bingung untuk memulai? Terkadang kita sebagai seorang UI Designer atau Front-end Developer merasakan yang namanya stuck atau creative block, situasi dimana tidak bisa memikirkan sebuah ide atau inspirasi sama sekali, kalaupun ada biasanya ide tersebut tidak tereksekusi secara maksimal. Maka dari itu, salah satu cara untuk mendapatkan ide atau inspirasi yaitu dengan membuka situs atau website yang memuat inspirasi-inspirasi web design. 5 Website Untuk Mencari Inspirasi Website Design Berikut 5 website yang dapat kalian kunjungi untuk mencari inspirasi web design: 1. Siteinspire Siteinspire website untuk inspirasi web design Di Siteinspire kalian dapat mencari inspirasi web design berdasarkan Styles, Types, Subjects, dan Platforms yang digunakan. Atau juga bisa mencari secara spesifik dengan menulis kata kuncinya pada menu Search. Selain itu, kalian juga bisa membuat koleksi referensi web design sendiri jika mendaftar sebagai member gratis di Siteinspire. 2. Awwwards Awwwards website untuk inspirasi web design Awwwards merupakan situs yang berisi website pemenang yang dipilih tiap harinya. Kalian dapat melihat nominasi maupun pemenang dari beberapa kategori, tag, teknologi, warna, dan negara. 3. Best Website Gallery Best Website Gallery website untuk inspirasi web design Berawal dari koleksi referensi website yang dikumpulkan oleh seorang desainer dan developer David Hellman, Best Website Gallery sekarang menjadi salah satu sumber inspirasi website yang dapat diakses oleh siapapun. Web ini juga menyediakan screenshot tiap halaman dari website yang kita pilih. 4. Behance Behance website untuk inspirasi web design Behance berisikan portofolio - portofolio desain dari para desainer di seluruh dunia. Tidak hanya tampilan desainnya saja, kalian juga bisa menemukan beberapa case study dari desainer ataupun agensi. 5. Dribbble Dribbble website untuk inspirasi web design Dribbble mungkin salah satu situs yang tidak asing lagi bagi para desainer. Komunitas Dribbble sendiri masih aktif sampai sekarang dan berisi desainer - desainer dari seluruh dunia. Untuk mencari inspirasi web design, kalian bisa memilih menu Web Design atau menulis kata kunci secara spesifik pada kotak pencarian. Kesimpulan Dalam mencari sebuah ide atau inspirasi web design kita bisa mencarinya dengan cara membuka situs atau web yang menyediakan inspirasi desain. Tetapi, jangan lupa contoh - contoh desain yang di tampilkan dalam web tersebut hanya untuk sebagai bahan inspirasi bukan untuk di-copy atau diduplikasi. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Ketika kita ingin menunjukan bagaimana website atau aplikasi kita bekerja dan membantu permasalahan kehidupan sehari-hari pengguna, maka kita perlu membuat sebuah prototype sederhana yang sesuai dari core business dari startup yang kita bangun. Sebenarnya dengan menggunakan kertas dan pulpen, kita dapat membuat wireframe dan prototype, namun dengan beberapa software design berikut maka kita bisa membuat prototype yang kualitasnya lebih tinggi. Adobe After Effect Selain digunakan untuk edit video tingkat atas, software After Effect juga sering digunakan oleh beberapa designer dalam membuat prototype sederhana terkait dari projek yang sedang dikerjakan, dengan fitur-fitur canggih seperti mask, animation, dan lain-lainya maka prototype akan lebih mudah untuk dibuat. Framer Ketika kita selesai mengerjakan projek design menggunakan Figma, maka dapat kita import langsung kepada software Framer untuk kita jadikan prototype yang dapat diklik, mengisi input seperti nama atau alamat email, dan memberikan animasi. Dengan Framer kita dapat membuat prototype aplikasi website atau mobile yang memiliki animasi yang menarik tanpa harus menggunakan koding, ditambah lagi Framer sudah menyediakan template yang siap digunakan untuk kita, wah enak juga ya sebagai UI/UX designer. Principle Principle adalah salah satu software yang tersedia pada Mac OS yang bisa kita gunakan untuk membuat high fidelity prototype, kebanyakan designer lebih memilih untuk menggunakan Principle karena memang experience dan juga fitur yang mereka tawarkan lebih banyak dibandingkan software prototype lainnya. Sayangnya Principle ini hanya tersedia pada Mac OS saja, apabila kamu menggunakan Windows OS maka kami sarankan untuk menggunakan After Effect atau Framer. https://dribbble.com/shots/19503359-Sleep-Magic-App-FREE Kesimpulan Sebagai seorang UI/UX designer alangkah baiknya untuk mempelajari lebih banyak software di luar sana, sehingga ketika klien atau perusahaan membutuhkan kita untuk beradaptasi dengan software yang baru maka kita bisa memulai lebih mudah dan mengerjakan projek.

Hello, People With The Spirit Of Learning! Salah satu jenis framework pada CSS (Cascading Style Sheet), yaitu Tailwind CSS. Kamu akan mengetahui Tools yang terdapat pada Tailwind CSS. Framework CSS ini dapat mempermudah pekerjaan kamu sebagai Developer. Yuk, Simak! Perkenalan Tailwind CSS Tailwind CSS merupakan framework yang bersifat utility first untuk membangun UI yang kompleks dan memiliki ciri khas tersendiri. Framework yang dirilis oleh Adam Wathan pada tahun 2019, dan pada tahun 2020 Tailwind CSS merilis v2 atau versi kedua yang dibuat oleh Steve Schoger dengan design visual komponennya. Components Tailwind CSS Lima Tools Tailwind CSS, yaitu: Tailwind ToolboxTailwind ComponentsTailwind TemplatesTailblocksMeraki UI 1) Tailwind Toolbox Tailwind Toolbox dibuat oleh Amrit Nagi berisi lebih dari 45 landing page templates dan 16 components. Tailwind Toolbox bersifat open source, beberapa template dan component berasal dari kontribusi suatu komunitas. Pada component ini terdapat plugins, tools, kits, dan generatos yang dapat membantu kamu menggunakan Tailwind CSS dengan lebih baik. Selain itu, Tailwind Toolbox juga menyediakan template scripts untuk JS, seperti penutup dan pembuka. Kamu bisa menggunakan components dengan klik template atau component yang ingin digunakan, lalu mengunduh template CSS atau menyalin kode, dan pindahkan ke projek yang sedang kamu buat. 2) Tailwind Components Tailwind Components bersifat open source, memiliki beberapa pilihan template yang bisa kamu gunakan secara gratis, kamu bisa gunakan untuk Bootstrap sebuah aplikasi baru. Components ini terdiri dari dropdown, login, modals, tab, input, dan ready made options yang dibuat oleh Tailwind CSS. kamu juga bisa membuat component kamu sendiri yang dimana component tersebut bisa digunakan oleh orang lain. Untuk menggunakan components, kamu bisa memilih component terlebih dahulu, lalu kamu klik unduh atau langsung menyalin kode dari component tersebut. 3) Tailwind Templates Tools ini dibuat oleh J-hiz, terdiri dari 30 design components, seperti buttons, cards, forms, search inputs, dan modals. Untuk menggunakan templates apapun yang terdapat pada Tailwind Templates, kamu hanya perlu klik templates yang kamu suka, lalu salin kode tersebut ke projek kamu. 4) Tailblocks Tailblocks dibuat oleh Mert Curuken, tools ini terdiri dari 60 layout blocks, seperti layout testimonials, teams, steps, stats, prices, heroes, headers, galleries, footers, features dan ecommerce. Kamu dapat menggunakan component ini dengan mode gelap atau dark mode, kamu juga dapat mengubah warna yang kamu inginkan dari UI yang ada di component Tailblocks. Untuk menggunakan layout blocks apapun, kamu bisa langsung klik “The View Code”, lalu copy atau salin kode, dan pindahkan kode tersebut ke projek yang sedang kamu buat. 5) Meraki UI Meraki UI dibuat oleh Khatab Wedaa dan Mosab Ibrahim. Tools ini terdiri dari 50 componen Tailwind CSS, dan tools ini mendukung RTL layout. Meraki UI bersifat sederhana, dan ringan. Mulai dari button, team sections, dan cards, kamu dapat menggunakan element yang tersedia untuk membuat prototype. Component yang terdapat pada Meraki UI, yaitu alerts, login forms, buttons, cards, dropdowns, navbars, pagination, dan footers. Untuk menggunakan component tersebut, kamu hanya perlu menyalin dan memindahkan ke projek yang sedang kamu buat. By using this utility first framework, you don't have to write custom CSS to style your application. You can use Tailwind CSS to control the padding, margin, color, font, shadow, and more of your application. Setelah kamu sudah mengetahui component pada Tailwind CSS, kamu bisa langsung belajar dan praktik menggunakan Tailwind CSS. Semoga artikel ini bermanfaat, selamat belajar. BuildWith Angga.

Menjadi seorang Freelancer dapat memberikan kebebasan yang cukup banyak untuk diri kita, misalnya kita bebas milih kerja dengan siapa, dibayar berapa, dan kerja di mana. Kebebasan ini biasanya dibutuhkan oleh mereka yang bekerja kreatif, contohnya graphic designer, website designer, atau SEO specialist. Kita akan belajar untuk memulai Freelancer khusus pemula dari ahlinya itu Angga, seorang Freelancer Product Designer yang telah bekerja lebih dari 100 klien dari seluruh negara, bukan cuma Indonesia saja. Q1: Halo mas Angga, sedang sibuk apa belakangan ini? Saya sedang memperbesar perusahaan edukasi yang telah saya bentuk untuk membantu orang-orang yang ingin belajar website design, product design, mobile app development, dan lainnya. Saya ingin mereka memiliki sumber belajar yang tepat dengan biaya lebih terjangkau, Sehingga ketika mereka belum ada biaya kuliah maka mereka bisa belajar di BuildWith Angga. Q2: Apa saja yang perlu dilakukan sebagai orang yang ingin memulai Freelance? Well, pertama adalah wajib punya skills yang bisa dikerjakan secara remote atau dari mana saja, karena tujuan utama Freelance itu ya bisa kerja dari mana saja. Beberapa skills di antaranya dengan bayaran tinggi adalah: UI designerUX designerSEO SpecialistWebsite DesignerBackend DeveloperData ScientistMobile App DeveloperCopywriter Jika sudah memiliki skills tersebut, tinggal perbanyak saja portfolio dan networking dengan Freelancer lainnya yang mungkin nanti akan memberikan pintu untuk kita mendapatkan projek Freelance pertama. Q3: Bagaimana meningkatkan personal branding kita untuk menarik klien pertama? Biasanya saya riset dulu projek apa yang sedang naik daun, misalnya aplikasi-aplikasi seperti Gojek, AirBnb, atau Cryptocurrency. Dari situ saya coba ngerjain projek latihan yang terkait pada aplikasi tersebut, dan juga biasanya saya menambahkan beberapa improvement sehingga ini dapat melatih cara saya berpikir sebagai seorang product designer. Baik, kurang lebih seperti itu yang bisa kita dapatkan untuk Interview kali ini. Jika kamu punya pertanyaan yang lebih mendalam boleh request langsung ke Instagram BuildWith Angga agar kami buatkan untuk sesi selanjutnya. Semoga bermanfaat dan terima kasih.

Bekerja lebih cepat dan produktif untuk menghasilkan projek yang lebih baik adalah impian semua UI/UX designer, kali ini kita akan coba bagikan 3 plugin Figma yang sering digunakan oleh top designers around the world, let's go. Plugin Wireframer di Figma Sering kita mengerjakan projek dimulai dari tahap pembuatan wireframe, namun mengerjakan sesuatu yang berulang adalah hal yang membosankan. Dengan menggunakan plugin Wireframer pada software Figma, maka kita tidak perlu membuat bagian-bagian pada website atau mobile desgin dari awal, tinggal pake yang sudah tersedia dan modifikasi saja. Plugin ProtoFlow di Figma Membuat sebuah prototype yang akan digunakan untuk usability-testing pada design process seperti Design Thinking atau Design Sprint kini menjadi lebih cepat dengan Plugin ProtoFlow yang tersedia pada Figma saat ini. Feather Icons di Figma Icon adalah bagian yang penting pada sebuah user-interface design, Icon dapat membuat tampilan website atau mobile app kita terlihat lebih menarik, Icon juga dapat memberikan emotional effect pada pengguna. Membuat Icon agak tricky untuk kita yang tidak pandai gambar, oleh karena itu Feather Icons sangat wajib kita install pada projek Figma kita untuk mempermudah kita menambahkan icon pada menu navigation, header, atau di dalam sebuah button. Summary for you Jika mengejar deadline maka tidak perlu panik, cukup gunakan ketiga plugin Figma di atas yang sudah kami bagikan sehingga kamu bisa bekerja lebih baik, cepat, dan produktif sebagai seorang UI/UX designer pemula atau expert. Goodluck ya.

Figma telah dikategorikan menjadi software design yang cukup popular karena dikenal dari fitur-fitur canggih serta kemudahan menggunakan software tersebut. Jika kamu sudah pernah menggunakan Adobe XD atau Sketch, maka ketika menggunakan Figma bakalan lebih terasa lebih mudah lagi dari kedua software tersebut. Kali ini, kita mau sharing nih beberapa manfaat yang bisa kita rasakan saat ini juga ketika menggunakan Figma sebagai UI/UX atau graphic designer. Gratis digunakan, bahkan untuk projek komersil, makin cuan deh Yes, Figma menyediakan beberapa paket yang berbayar, namun untuk kita yang belum punya modal maka bisa menggunakan Figma secara gratis, dan paket gratis ini bisa kita gunakan untuk tujuan mengerjakan projek yang berbayar, misalnya dari klien atau perusahaan. Tapi nanti ketika kita sudah menghasilkan uang, lebih baik upgrade ke paket yang berbayar ya untuk mendapatkan kemudahan bekerja lebih baik lagi, ya sekalian kita bayar balas budi kepada developer dan designer yang telah membangun software Figma. Plugin apa aja ada, sehingga kerja bisa lebih ngebut lagi wuzz wuzz, supafast! Well, begini enaknya menggunakan Figma untuk menyelesaikan projek design website atau mobile app, Figma telah dibentuk oleh komunitas yang kuat, mereka juga sering menyediakan plugin canggih sehingga kita bisa lebih cepat dalam bekerja. Resources belajar Figma itu banyak banget, bikin skills kita makin up to date Untuk kita yang baru memulai untuk menggunakan Figma, jika kita baru pindah dari software Adobe XD atau Sketch, maka kita tidak perlu khawatir. Karena di luar sana banyak sekali resources untuk mempelajari Figma. Kami, BuildWith Angga, juga saat ini menyediakan puluhan kelas gratis yang membahas UI/UX design, dan banyak dari kelas-kelas online tersebut menggunakan software Figma. Pokoknya, progress belajar kamu jadi lebih terarah dari pada sebelumnya. Well, begitulah beberapa manfaat utama ketika menggunakan software Figma, untuk yang masih ragu maka silahkan langsung cobain aja, dijamin deh gak akan lari kepada software-software design lainnya.

Figma adalah software design yang dapat digunakan secara gratis, terlebih lagi ketika kamu ingin belajar menjadi seorang UI/UX designer di tahun 2022 atau 2023 mendatang. BuildWith Angga telah menyediakan beberapa kelas online gratis untuk belajar Figma dan UI/UX design mulai dari awal sampai dapat memiliki portoflio pribadi. Belajar Design Style Guide Menggunakan Figma Style guide sangat penting untuk dipelajari oleh pemula, karena kita bisa memahami komponen apa saja yang tersedia pada product design. Hal ini dapat membuat kita menjadi seseorang UI/UX designer yang lebih professional. Bikin Wireframe dan Visual Design Menggunakan Figma Setelah memahami style guide di dalam product design, kita bisa latihan untuk membuat wireframe sederhana yang nantinya akan dijadikan design aplikasi. Pada kali ini kita akan menggunakan software Whimsical dan Figma untuk mempelajarinya. Tingkatkan Skills Figma Kita, Belajar Design Website Dari Workshop Gratis Workshop kali ini menantang kita untuk design sebuah website Charity untuk menampung dana yang akan digunakan untuk membantu orang yang belum beruntung, terutama di bidang pendidikan. Mulai dari awal menggunakan Figma, sampai bisa memiliki portfolio yang bisa digunakan sebagai modal bekerja. Alright, are you ready? Figma dapat menjadikan diri kita sebagai seseorang designer yang hebat. Graphic designer, product designer, ui/ux, illustration designer, semua bisa kita capai hanya menggunakan Figma. Baik, silahkan pelajari beberapa kelas online rekomendasi untuk belajar Figma secara gratis di BuildWith Angga.