Tutorial Figma Untuk Pemula : Membuat Mobile Prototype Instagram Sederhana dan Tips Figma Bagi Pemula

on



Figma adalah perangkat lunak berbasis cloud yang digunakan untuk desain antarmuka pengguna (UI) dan pengalaman pengguna (UX). Figma memungkinkan desainer untuk membuat wireframe, prototipe, dan desain yang interaktif untuk berbagai platform, seperti aplikasi web, mobile, dan desktop.

Kelebihan Figma untuk Desain UI/UX

  • Efisiensi Waktu: Dengan fitur kolaborasi dan akses cloud, waktu pengerjaan desain dapat dipercepat.
  • Kompatibilitas Tim Remote: Cocok untuk tim yang bekerja secara remote.
  • Bebas Instalasi Berat: Membuka ruang bagi pengguna dengan perangkat berspesifikasi rendah.
  • Harga Kompetitif: Tersedia paket gratis dengan fitur yang cukup untuk pemula, serta opsi premium untuk kebutuhan profesional.

Tutorial ini dirancang untuk membantu pemula memahami cara menggunakan Figma untuk membuat prototype aplikasi Instagram yang sederhana. Dalam tutorial ini, kita akan membahas tiga submateri penting yang sering digunakan dalam pembuatan prototype, yaitu:

  1. Scroll atau Gulir ke Bawah
    • Membuat efek gulir vertikal yang memungkinkan pengguna melihat konten tambahan di layar, seperti feed Instagram.
  2. Geser ke Kanan dan Kiri
    • Menambahkan interaksi swipe horizontal untuk meniru fitur seperti Stories atau album foto.
  3. Tab Overlay
    • Membuat overlay interaktif yang muncul ketika sebuah elemen diklik, seperti membuka menu atau tampilan detail.

Tutorial ini cocok untuk pemula karena setiap langkah akan dijelaskan secara terperinci, mulai dari menyiapkan artboard, menambahkan elemen desain, hingga menyusun interaksi dasar. Anda juga akan mendapatkan tips praktis tentang cara memaksimalkan fitur Figma agar desain Anda terlihat profesional, meskipun Anda baru memulai.

Langkah-langkah Membuat Prototype Instagram Sederhana di Figma

  1. Mengakses Figma

    • Anda bisa menggunakan Figma langsung melalui website di https://figma.com atau dengan mengunduh dan menginstalnya di laptop. Pilih opsi yang paling nyaman untuk Anda.

  2. Membuat Project Baru

    • Setelah login, buat project baru dengan menekan kombinasi tombol Ctrl + N.
    • Beri nama project Anda (misalnya Prototype Instagram).

  3. Membuat Artboard (Frame)

    • Klik tombol Frame di toolbar sebelah kiri, atau cukup tekan tombol F pada keyboard.
    • Di panel kanan, akan muncul daftar perangkat (device) yang tersedia. Pilih ukuran perangkat yang sesuai, seperti iPhone 11 Pro.
    • Setelah dipilih, sebuah persegi panjang putih akan muncul di area kerja. Ini adalah artboard kita, tempat Anda mendesain tampilan aplikasi.

  4. Membuat Tampilan Scroll (Gulir ke Bawah)



    • Tambahkan elemen desain untuk membuat tampilan awal Instagram:
      • Header: Klik tombol R pada keyboard untuk membuat persegi panjang di bagian atas artboard. Tambahkan teks seperti "Instagram" dengan menggunakan tool Text (T).
      • Footer: Tambahkan persegi panjang di bagian bawah artboard untuk navigasi. Buat tiga ikon navigasi sederhana menggunakan bentuk persegi atau lingkaran.
      • Konten Tengah: Tambahkan beberapa persegi panjang untuk meniru postingan Instagram. Anda bisa membuatnya di tengah artboard.
    • Untuk membuat efek scroll, perpanjang panjang artboard Anda:
      • Klik nama artboard (misalnya Page 1) di panel sebelah kiri.
      • Seret ujung bawah artboard ke bawah untuk menambah panjangnya.
      • Tambahkan beberapa elemen tambahan (seperti konten atau postingan).
    • Agar header dan footer tetap di tempat saat digulir:
      • Pilih elemen header dan Group elemen tersebut (Ctrl + G).
      • Pada panel Constraints, atur posisinya menjadi "Top" dan "Left".
      • Aktifkan fitur Fixed Position di menu Prototype pada bagian Scroll Behavior. Lakukan hal yang sama untuk footer, tetapi ubah posisinya menjadi "Bottom" dan "Left".

  5. Membuat Efek Geser Horizontal (Swipe)

    • Buat beberapa kotak kecil untuk merepresentasikan Instagram Stories, posisikan secara horizontal di luar area frame.
    • Pilih semua kotak (blok atau tekan Shift untuk memilih satu per satu).
    • Klik kanan dan pilih Frame Selection. Ini akan membungkus kotak ke dalam sebuah frame baru.
    • Kecilkan ukuran frame agar sesuai dengan lebar artboard, tanpa mengubah ukuran kotak di dalamnya.
    • Aktifkan opsi Clip Content di panel kanan (menu Design) agar hanya bagian dalam frame yang terlihat.
    • Di menu Prototype, ubah Overflow Behavior menjadi Horizontal Scrolling.

  6. Membuat Navigasi pada Footer

    • Tambahkan frame baru untuk halaman kedua (Page 2). Pastikan ukurannya sama dengan frame pertama.
    • Di Page 1, pilih salah satu ikon navigasi pada footer.
    • Klik tab Prototype di menu kanan, lalu tarik tanda plus biru dari ikon tersebut ke Page 2.
    • Atur interaksi menjadi Navigate To. Sekarang, klik pada ikon navigasi akan membawa Anda ke halaman berikutnya.

  7. Membuat Overlay 



    • Buat frame baru (contoh: Overlay Frame) untuk elemen overlay yang akan muncul.
    • Kembali ke Page 2, pilih elemen yang akan memicu overlay (misalnya tombol atau ikon).
    • Di tab Prototype, tarik tanda plus biru dari elemen tersebut ke Overlay Frame.
    • Ubah interaksi menjadi Open Overlay dan centang semua pengaturan (seperti Close when clicking outside).

  8. Menguji Prototype

    • Klik tombol Present di sudut kanan atas untuk melihat dan mencoba prototype yang telah Anda buat.

Dengan langkah-langkah ini, Anda telah berhasil membuat prototype Instagram sederhana di Figma!

Comments

Post a Comment