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

         

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 

  1. 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/.

  2. Login menggunakan akun google kalian

    • Masukan akun google dan password kalian, Jika tidak memiliki akun kalian dapat membuat  akun dengan click "create account".
tampilan jika sudah login.


Langkah-langkah Membuat Landing Page

  1. Buatlah file/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 yaitu 1440x1024px

  2. Menambahkan Grid

    • Klik kanan pada frame, pilih "Layout Grid," dan tambahkan grid kolom untuk membantu dalam pengaturan tata letak.

  3. Menambahkan Text Untuk Desain Navigation Bar

    • Klik pada option bar "Text" atau klik di keyboard (T)
    • Ketik untuk judul website yang nantinya posisinya berada di kiri
    • Lalu buat menu apa saja yang ada di website.

  4. Menambahkan Gambar

    • Tambahkan gambar dari local laptop dengan cara copy lalu paste ke dalam file projek yang akan di tambahkan gambar.
    • Atur ukuran gambar.

  5. Tambahkan Text Untuk Konten Halaman

    • Klik pada option bar "Text" atau klik di keyboard (T)
    • Tambahkan Text Sesuai Yang Anda Inginkan
    • Atur Font, Ukuran, dan Warna Font.

Tampilan UI Yang Sudah Jadi

        Dengan mengikuti langkah-langkah ini, Anda akan dapat membuat landing page desktop yang menarik dan fungsional di Figma.




                

Lokasi: Depok, Kota Depok, Jawa Barat, Indonesia

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 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