Capaian Pembelajaran:

1. Mahasiswa mampu membuat desain sistem produk yang responsif dan mudah disesuaikan dengan kebutuhan pengguna.
2. Mahasiswa mampu melakukan prototyping di Figma, sehingga dapat membuat mockup produk yang responsif.

-------------------------------------------------------------------------

 

Halo Explorers, gimana kabarnya? Setelah belajar penggunaan figma, maka saatnya kalian mengimplementasikan untuk pembuatan produk.

Membuat desain sistem produk yang responsif dan mudah disesuaikan dengan kebutuhan pengguna dapat dilakukan dengan menggunakan Figma. Berikut adalah langkah-langkah yang dapat Anda ikuti:

 

1.    Menentukan Kebutuhan Pengguna: Mulailah dengan memahami kebutuhan pengguna Anda dan tujuan desain sistem produk. Identifikasi persona pengguna, tujuan mereka, dan tantangan yang mereka hadapi.

2.    Penelitian dan Inspirasi: Lakukan penelitian tentang tren desain terbaru, pengalaman pengguna yang baik, dan praktik terbaik dalam desain responsif. Telusuri contoh-contoh desain sistem produk yang sudah ada untuk mendapatkan inspirasi.

3.    Membuat Komponen: Dalam Figma, Anda dapat membuat komponen untuk elemen desain yang sering digunakan, seperti tombol, input fields, menu navigasi, dan lain-lain. Pastikan untuk mendesain komponen dengan fleksibilitas sehingga dapat disesuaikan dengan kebutuhan yang berbeda.

4.    Grid System: Gunakan fitur grid di Figma untuk membangun sistem grid yang konsisten dan responsif. Ini akan membantu menyelaraskan elemen-elemen desain Anda secara konsisten di berbagai ukuran layar.

5.    Breakpoints: Tentukan breakpoint penting dalam desain responsif Anda, misalnya untuk perangkat mobile, tablet, dan desktop. Sesuaikan elemen desain, tata letak, dan ukuran font sesuai dengan breakpoint yang relevan.

6.    Prototipe Interaktif: Figma memungkinkan Anda untuk membuat prototipe interaktif yang dapat dijalankan untuk menguji responsivitas desain sistem produk. Tambahkan interaksi seperti perpindahan halaman, animasi, dan elemen interaktif lainnya untuk menggambarkan bagaimana desain bekerja di berbagai perangkat.

7.    Kolaborasi dan Umpan Balik: Libatkan tim Anda dan pihak-pihak terkait dalam proses desain. Figma memungkinkan kolaborasi secara real-time, sehingga anggota tim dapat memberikan umpan balik langsung dan berkontribusi pada desain sistem produk.

8.    Dokumentasi Desain: Buat dokumentasi desain yang jelas dan terstruktur untuk sistem produk Anda. Ini akan membantu tim pengembang dan anggota tim lainnya memahami dan mengimplementasikan desain dengan benar.

9.    Pengujian dan Iterasi: Uji desain sistem produk Anda pada berbagai perangkat dan ukuran layar. Gunakan hasil pengujian untuk melakukan iterasi dan memperbaiki desain yang mungkin tidak sesuai dengan kebutuhan pengguna.

 

 

Dengan menggunakan Figma, Anda dapat memanfaatkan fitur-fitur dan alat yang tersedia untuk membuat desain sistem produk yang responsif, mudah disesuaikan, dan dapat dikolaborasikan dengan tim Anda.

Kalian juga dapat menggunakan Figma untuk membuat prototipe mockup produk yang responsif. Berikut adalah langkah-langkahnya:

 

1.    Desain Komponen: Mulailah dengan merancang komponen-komponen desain yang akan digunakan dalam mockup produk Anda. Ini termasuk tombol, menu navigasi, input fields, dan elemen desain lainnya. Pastikan untuk mendesain komponen dengan fleksibilitas sehingga dapat menyesuaikan dengan berbagai ukuran layar.

2.    Membuat Frame: Buat frame untuk menampung dan mengatur elemen-elemen desain Anda. Frame akan menjadi area kerja untuk mockup produk.

3.    Menambahkan Interaksi: Gunakan fitur "Prototype" di Figma untuk menambahkan interaksi ke elemen desain. Pilih elemen yang ingin Anda jadikan tautan interaktif, dan pilih tindakan yang ingin Anda terapkan, misalnya perpindahan ke frame lain atau animasi.

4.    Mengatur Tautan Antara Frame: Tentukan bagaimana elemen-elemen desain akan berinteraksi dengan menautkan frame satu dengan yang lain. Anda dapat mengatur tautan untuk menggambarkan perpindahan halaman, perubahan tampilan, atau animasi yang responsif.

5.    Menyesuaikan Transition dan Timing: Atur transisi dan waktu antara tautan untuk mengontrol bagaimana prototipe berjalan. Anda dapat mengatur transisi seperti slide, fade, atau dissolve, dan menyesuaikan durasi transisi sesuai kebutuhan.

6.    Mengatur Breakpoints: Jika Anda ingin menampilkan responsivitas desain, tentukan breakpoint yang relevan untuk perangkat mobile, tablet, dan desktop. Duplikat frame dan atur tata letak elemen-elemen desain sesuai dengan ukuran layar yang berbeda.

7.    Uji Prototipe: Gunakan mode "Present" di Figma untuk menjalankan prototipe Anda dan menguji responsivitasnya. Periksa bagaimana desain dan interaksi beradaptasi dengan perubahan ukuran layar.

8.    Iterasi dan Perbaikan: Berdasarkan hasil pengujian, lakukan iterasi dan perbaikan pada desain dan interaksi Anda. Perhatikan masukan dan umpan balik dari pengguna atau tim Anda untuk meningkatkan kualitas prototipe produk.

9.    Bagikan dan Kolaborasi: Figma memungkinkan Anda untuk berbagi prototipe dengan tim atau pengguna lain untuk mendapatkan umpan balik lebih lanjut. Anda dapat mengundang orang lain untuk melihat dan memberikan komentar langsung di prototipe.

 

Dengan menggunakan Figma, Anda dapat membuat prototipe mockup produk yang responsif dan menguji interaksi serta responsivitas desain sebelum melangkah ke tahap pengembangan yang lebih lanjut.

 

Referensi:

 

Tugas kalian coba ikuti tutorial membuat design system dengan klik link dibawah ini https://www.halodesigners.com/halofigma#demo-cta

 

TUGAS MINGGUAN