PART 10 FIGMA || Pemanfaatan UI Kit

 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

  1. Buka Aplikasi Figma ataupun Menggunakan Website Figma

    • Buka aplikasi Figma yang dapat dilalui via website maupun aplikasi figma tersebut.

  2. Pilih bagian "Explore Comunity"

    • Pada bagian home dikiri bawah (untuk di perangkat yang saya gunakan) klik pada menu "Explore Comunity"

    • .

  3. Cari judul atau Kata Kunci Yang Sesuai Dengan Projek Yang Akan Dibuat.(Contoh: Mobile)

    • Jika kalian sudah mengikuti step sebelumnya, kalian akan tampil pada halaman pencarian.
    • Pada halaman pencarian kalian dapat mencari kata kunci yang sesuai dengan projek yang akan dibuat. Dalam kesempatan kali ini saya akan mencotohkannya dengan mencari untuk projek pembuatan android.


  4. Pilih salah satu UI Kit Yang Akan Anda Gunakan

    • Pada kesempatan kali ini memilih salah satu UI Kit 
    • Jika sudah klik "Open With Figma".


  5. Karyakan UI Kit Yang Kalian Pilih dan Sesuaikan Dengan Projek Kalian

    • Jika ingin menggunakan sebuah komponen yang diberikan oleh UI Kit yang kalian pilih, kalian dapat mencari di "Assets" lalu pilih ke "Local Assets"
    • Sesuaikan dengan projek yang anda buat.

            UI Kit merupakan fitur yang sangat layak digunakan, gunakan fitur ini dengan sebaik-baiknya, saya harap penjelasan yang saya berikan dapat tersampaikan dengan baik.


Komentar

Posting Komentar

Postingan populer dari blog ini

PART 2 FIGMA || Cara Menggunakan Plugin

Gambar
  Apa Itu Plugin?           Menurut saya, Plugin merupakan fitur yang dimiliki oleh figma yang termasuk fitur yang sangat membantu di aplikasi figma itu sendiri. Dengan menggunakan plugin di dalam figma kita dapat memperoleh elemen-elemen yang dibutuhkan saat sedang mendesain suatu tampilan UI/UX dan adanya figma ini dapat mempercepat atau memudahkan persoalan dalam hal tersebut.    Berikut salah satu contoh plugin Bagaimana Cara Menginstal Plugin?          "Bagaimana sih cara menginstal plugin??", tenang aja saya disini akan memberi dan mengarahkan cara menginstal plugin menurut versi saya yang sudah saya pelajari sebelumnya yaa. Langsung saja, berikut langkah-langkah dalam menginstal plugin: Buka aplikasi atau web figma, lalu kalian bisa login menggunakan akun gmail masing masing. Buatlah projek baru dengan mengklik "New Desain File". Lalu, klik option pada pojok kiri atas jika diarahkan cursor muncul keterangan "Ma...
Baca selengkapnya

PART 1 FIGMA || Membuat Tampilan UI/UX Untuk Dekstop

Gambar
            Tentang Figma           Figma adalah salah satu tools atau aplikasi desain yang dapat digunakan pada windows dan Mac OS untuk membuat prototype aplikasi serta berbagai desain lainnya. Aplikasi ini berbasis vektor, sehingga memang sangat cocok digunakan untuk membuat user interface aplikasi atau website. Figma adalah satu dari sekian banyak tools desain seperti Adobe XD, Sketch, dan yang lain. Namun, figma masih menjadi pilihan yang populer, khususnya untuk kamu yang perlu berkolaborasi secara real time bersama tim. Langkah-langkah Untuk Login  Buka aplikasi atau web figma Jika kalian ingin membuka via website buka dengan alamat url berikut (figma.com) dan klik login. Dan jika ingin menggunakan aplikasi silahkan download di link berikut https://www.figma.com/downloads/. Login menggunakan akun google kalian Masukan akun google dan password kalian, Jika tidak memiliki akun kalian dapat membuat  akun deng...
Baca selengkapnya

PART 6 FIGMA || Komponen Dalam Figma

Gambar
  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...
Baca selengkapnya