PART 3 FIGMA || Cara Membuat Tampilan UI/UX Lebih Dari 1 Section

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

  1. 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 7168px yang dapat dibagi menjadi 7 section.


  2. Buatlah Rectangle Untuk Pembagian Per Section

    • Tambahkan rectangle yang masing masing rectangle memiliki ukuran 1440px dan 1024px


  3. Berikan Background Pada Masing-masing Section

    • Klik pada section yang ingin diubah background
    • Klik fill pada left option bar
    • Ganti warna sesuai dengan keinginan


  4. Berikan Konten ke Masing-masing Section Yang Sudah Dibuat

    • Masukan text, gambar, icons, dan elemen lainnya sesuai section apa dan apa isi untuk section tersebut
    • Atur ukuran gambar.


  5. Susun Setiap Konten ke Dalam Dekstop Yang Sudah Dibuat

    • Blok 1 section atau gunakan shift untuk memilihnya.
    • Seret kedalam atau drag ke dalam dekstop yang tadi sudah dibuat



            Nah, Step by step dalam pembuatan tampilan UI/UX lebih dari 1 section sudah selesai. Mungkin penjelasan yang saya berikan cukup singkat namun, saya harapkan dengan diberikan penjelasan yang cukup singkat ini dapat mudah dimengerti. Jika ada kesalahan dalam pemberian kata mohon maaf, semoga postingan ini bermanfaat. 


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