HAIKAL FAQIH AUFA

 UI Kit               UI Kit pada figma merupakan suatu kumpulan template, sumber daya, aset dan lain-lain yang dibuat oleh komunitas tertentu dan beberapa juga ada yang di sebar luaskan secara gratis. UI Kit ini sangat bermanfaat karena dapat mempermudah dan mengefisiensi waktu dalam pembuatan desain. Jika dibandingkan dengan membuat desain secara manual UI Kit jauh lebih cepat dan efisien. UI Kit juga membantu para desainer dari mobile, website dan lain lain dalam penyedian asset seperti icon, button, navbar, toolbar, dan lain-lain.Untuk lebih jelasnya saya akan memberikan langkah-langkah dan penjelasan mengenai UI kit ini, langkah-langkah yang akan saya jelaskan dikesempatan kali ini adalah langkah-langkah menggunakan UI Kit yaitu seperti berikut ini. Langkah-langkah penggunaan UI Kit Buka Aplikasi Figma ataupun Menggunakan Website Figma Buka aplikasi Figma yang dapat dilalui via website maupun aplikasi figma tersebut. Pilih bagian "Explor...

 Auto Layout                Auto Layout merupakan sebuah frame atau komponen yang bisa menyesuaikan sesuai isi konten didalam frame atau komponen tersebut. Dengan menggunakan auto layout ini kita tidak perlu lagi menyesuaikan antara frame dengan kontennya, frame tersebut dapat berubah secara otomatis sesuai dengan isi kontennya. Dalam contoh disaat kita membuat button dan banyak button yang ingin kita buat tetapi tulisan atau text didalam button tersebut berbeda, jika kita tidak menggunakan auto layout kita harus menyesuaikan panjang button sesuai dengan text atau konten yang ada didalamnya tetapi dengan menggunakan layout kita hanya mengubah textnya saja otomatis button akan mengikuti panjang text atau konten didalamnya. Langkah-langkah Pengunaan Buka file dan siapkan satu komponen utama (Button) Buka file dengan frame sesuai kebutuhan kalian. buatlah button beserta text Ubah text dan backgroud menjadi 1 group Ubah text dan backgroud me...

 Variant               Variant merupakan variasi dari suatu komponen yang sudah digunakan sebelumnya, variant dapat digunakan apabila desainer ingin menggunakan suatu komponen yang sama tetapi misalnya warna yang berbeda, dengan masalah seperti itu desainer dapat menggunakan variant. Dengan variant ini juga desainer dapat mengelompokan dan mengatur sebuah komponen yang sama dalam satu kesatuan atau dalam satu wadah. Contohnya jika kita ingin menggunakan button yang bentuknya sama tetapi warna dan textnya ingin berbeda kita dapat menggunakan variant ini. Untuk lebih tepatnya saya akan memberi langkah-langkah agar suatu komponen dapat menjadi variant. Langkah-langkah Penggunaan Buka file dan siapkan suatu komponen utama Buka file dengan frame sesuai kebutuhan anda Siapkan salah satu komponen utama untuk dijadikan variant, disini saya akan menggunakan komponen button yang akan dijadikan variant Ubah button tersebut menjadi komponent Select denga...

  Banner Promotion               Banner Promotion merupakan suatu media untuk mempromosikan suatu barang atau jasa atau bisa juga untuk menawarkan suatu barang dan jasa. Banner Promotion ini sangat dibutuhkan disaat anda atau kalian dalam menawarkan barang dan jasa, biasanya banner promotion di gunakan saat pembuat banner production ini menawarkan produk yang sedang ditawarkan agar dapat perhatian pengunjung dan pengunjung mengunjungi ke situs web atau halaman tertentu yang terkait dengan produk tersebut. Hal-hal Yang Harus Diperhatikan Dalam Banner Promotion Pemilihan ukuran layout atau frame. Penentuan produk apa yang ingin di promosikan Pemilihan gambar yang menarik  Pemilihan warna yang sesuai dengan gambar dan tidak bertabrakan Pemilihan font dari mulai ukuran, gaya font, dan warna font Pemilihan elemen-elemen yang sesuai dan selaras dengan desain Menerapkan kata-kata yang dapat menari pelanggan  Contoh tampilan banner promotio...

  Komponen           Komponen merupakan suatu elemen yang dapat digunakan kembali di seluruh desain yang sudah kita buat, singkatnya  kita dapat menggunakan kembali elemen yang sudah dibuat. Contohnya dalam membuat button jika kita ingin menggunakannya kembali kita dapat menjadikannya sebuah komponen agar kita tidak perlu copy paste suatu elemen satu satu. Elemen sangat bermanfaat dalam pembuatan desain yang sudah banyak section atau banyak tampilan. Ada dua aspek dalam dari sebuah komponen yaitu Komponen utama mendefinisikan properti komponen dan Instance yaitu salinan komponen yang dapat Anda gunakan kembali dalam desain. Instance ditautkan ke komponen utama dan menerima pembaruan apa pun yang dibuat pada komponen tersebut.  Dibawah ini merupakan langkah-langkah mengubah elemen menjadi suatu komponen. Langkah-langkah Mengubah Siapkan Desain Yang Sebelumnya Sudah Dibuat Buka aplikasi atau website figma dan buka projek desain yang s...

 Prototype               Prototype merupakan salah satu fitur yang disediakan oleh figma, fitur ini sangat bermanfaat dan fitur yang sering bahkan wajib digunakan oleh desainer mobile, website dan lain lain. Apa itu Prototype? Prototype merupakan sesuatu yang menghubungkan bagaimana pengguna dapat dengan desain yang dibuat atau User Experience (UX). Dalam  kesempatan kali ini saya akan menjelaskan cara menggunakan prototype menurut saya dan dengan materi yang sebelumnya saya pelajari. Langkah-langkah Penggunaan Siapkan Desain Yang Sebelumnya Sudah Dibuat Buka aplikasi atau website figma dan buka projek desain yang sebelumnya kalian sudah buat Usahakan didalam desain tersebut ada button yang ingin di hubungkan ke tampilan lain Siapkan Button Atau Elemen Lain Pilih button atau elemen mana yang jika di klik oleh pengguna mengarah ke tampilan lain. Jika belum ada buatlah dengan menambahkan button Tambahkan Prototype Klik elemen yang akan kal...

  Penentuan Tema?               Pentuan tema pada sebuah desain UI/UX sangatlah penting, penentuan tema merupakan langkah awal dalam menentukan desain. Jika pada langkah penentuan tema ini sudah di dapatkan atau dicapai kita dapat lebih mudah lanjut pada kelangkah selanjutnya. Jangan lupa pada penentuan tema kita harus memiliki alasan dan tujuan yang jelas. Pada kesempatan kali ini saya akan menjelaskan tema yang saya buat dalam pembuatan desain website. Tema          Pada projek kali ini saya akan memakai tema yaitu toko laptop. Pada tema kali ini desain yang saya buat berfokus pada penjualan toko laptop. Jumlah section yang saya ingin gunakan yaitu 7 section, apa saja isi dalam setiap section tersebut yaitu ada home, support apa saja dari website laptop tersebut, produk yang dijual, dan testimoni dari para pelanggan. Alasan          Alasan saya mengapa memilih tema toko laptop ini yaitu untu...

Tampilan Lebih Dari 1 Section ?           Mengapa kita harus belajar mendesain tampilan lebih dari 1 section? Nah, sebelumnya tampilan lebih dari 1 section adalah merupakan tampilan yang berada di 1 dekstop tetapi tampilan di setiap bagiannya berbeda beda, Mulai dari tampilan awal atau home, tampilan isi dari desain sesuai tema, hingga ke tampilan footer atau tampilan paling bawah yang biasanya berada di website yang isinya beberapa informasi penting mulai dari media sosial, dan lain-lain. Dalam kesempatan kali ini saya akan share beberapa pengalaman belajar dengan menjelaskan langkah-langkah dalam pembuatannya. Langkah-langkah Pembuatan Buatlah File atau Desain Baru Buka aplikasi atau website figma dan buatlah projek baru dengan klik "New Design File". Pilihlah ukuran dengan cara pilih "Frame Tool" dan pilih ukuran dekstop lalu atur width ke 1440px dan height sesuaikan dengan panjang berapa section yang diinginkan, disini saya menggunakan height sebesar 71...