Cara Membuat dan Menambahkan Mockup ke Desain Figma Anda Menggunakan Plugin

Jika Anda seorang desainer yang suka memamerkan desain Anda dengan menggunakan maket, Anda dapat membuatnya dengan mudah di Figma.

Alih-alih menyimpan desain Figma Anda dan pindah ke program lain untuk membuat mockup, Anda dapat dengan mudah mengunduh plugin mockup di Figma. Ada banyak opsi plugin dalam berbagai gaya, tetapi semuanya mudah digunakan dan diintegrasikan ke dalam desain yang lebih besar.

Cara Menemukan dan Mengunduh Plugin Figma

Mengunduh dan menginstal plugin di Figma adalah sama apakah Anda menggunakan aplikasi atau versi browser. Dari Beranda browser Figma, klik Komunitas > Plugin dan Widget, dan cari melalui daftar atau gunakan bilah pencarian.

Dari aplikasi Figma, beranda akan menawarkan opsi yang sama dengan peramban untuk membuka laman komunitas. Tetapi jika Anda berada di halaman desain, Anda dapat mengklik logo Figma, lalu Plugin. Jika Anda sudah menginstal plugin, Anda akan melihatnya tercantum di sini.

Untuk menemukan lebih banyak, pilih Jelajahi Plugin di Komunitas.

Ini akan membawa Anda ke halaman komunitas di dalam aplikasi tempat Anda dapat mencari plugin lain.

Di halaman komunitas, Anda akan menemukan uraian kecil untuk setiap plugin, tanggal pembaruan terakhir, dan seberapa sering setiap plugin diunduh. Untuk informasi lebih lanjut tentang setiap plugin—seperti komentar dari pengguna dan panduan penggunaan—mengklik namanya akan membawa Anda ke halaman informasi plugin itu.

Setelah Anda menemukan plugin yang ingin Anda unduh, klik tombol biru Install tombol.

Jika Anda tidak yakin apa yang harus dicari, berikut adalah lima plugin mockup favorit kami. Ada banyak lagi, tetapi ada baiknya untuk memulai di suatu tempat.

• Mockup Tanah Liat 3D
• Mockup Sudut
• MockRocket - Mockup 3D
• Maket
• Elemen 3D Vektor

Cara Menggunakan Plugin Mockup di Figma

Proses pemasangan plugin sama terlepas dari jenis plugin yang Anda gunakan, tetapi mungkin ada beberapa perbedaan dalam cara penggunaannya. Itulah mengapa selalu yang terbaik untuk membaca halaman komunitas masing-masing plugin untuk detail tambahan.

Di Figma, Anda dapat memilih ukuran bingkai siap pakai untuk layar tertentu, seperti iPhone 13 atau Android besar atau kecil. Anda harus membuat desain untuk ukuran perangkat yang diinginkan daripada mencoba mengubah ukuran desain nanti agar sesuai dengan mockup Anda, tetapi beberapa mockup akan memungkinkan ukuran yang sedikit berbeda tanpa distorsi.

Anda bahkan dapat menggunakan tangkapan layar dari perangkat Anda, yang akan berukuran sempurna untuk mockup perangkat yang sama.

Mockup biasanya untuk desain layar statis, meskipun Anda bisa membuat maket video di Photoshop. Kami akan fokus pada mockup Figma untuk perangkat genggam, tetapi Anda bisa buat mockup dari awal di Photoshop untuk perangkat lain. Setelah desain layar Anda selesai, Anda dapat melanjutkan ke pembuatan mockup produk.

Kami akan menunjukkan cara menggunakan tiga plugin yang kami sarankan: Clay Mockups 3D, Angle Mockups, dan Vectory 3D Elements. Mari kita langsung masuk.

Mockup Tanah Liat 3D

Dengan desain Anda terbuka, pilih bingkai dan kemudian pergi ke Plugin dan pilih Mockup Tanah Liat 3D. Ini akan membuka jendela di mana Anda dapat memilih perangkat untuk mockup. Desain Anda harus ditampilkan di layar mockup di jendela ini.

Anda dapat mengubah sudut mockup serta warna di jendela ini. Setelah Anda puas dengan tampilannya, klik Simpan sebagai Gambar.

Anda dapat kembali dan mengubah warna atau aspek lainnya kapan saja dengan mengklik Edit Mockup dibawah plugin di menu sebelah kanan. Sekarang Anda dapat menambahkan plugin Anda ke desain yang lebih besar seperti presentasi atau portofolio Anda.

Mockup Sudut

Untuk menggunakan Angle Mockup, Anda perlu membuat akun Angle untuk mengunduh perpustakaan mockup dari situs web mereka. Pada Situs web Angle, klik Masuk, yang akan memunculkan popup yang dapat Anda klik Daftar dan tambahkan detail Anda untuk membuat akun gratis.

Setelah masuk, untuk mengunduh maket, klik Maket > Unduh Sampel. Untuk set mockup yang lebih komprehensif, Anda dapat membayar untuk akses premium, tetapi sampel yang ditawarkan dengan akun gratis sudah cukup baik.

Setelah diunduh, unzip file tersebut. Ini berisi sampel yang dapat Anda gunakan di Figma, Sketch, dan Adobe XD, serta beberapa wallpaper gratis. Membuka Sudutgambar. Anda akan menemukan dua video untuk membantu menggunakan maket, serta empat set file Figma dengan berbagai maket.

Untuk mengimpor file ke akun Figma Anda, buka browser Figma dan klik profil Anda. Anda dapat mengakses ini dari aplikasi dengan membuka Berkas > Buka Peramban Berkas. Drag dan drop setiap file Angle ke Figma. Kemudian buka file Angle dengan mengklik dua kali dari halaman browser Figma.

Temukan sudut perangkat yang ingin Anda gunakan untuk mockup Anda dan salin (Cmd + C untuk Mac atau Ctrl + C untuk Windows). Tempelkan (Cmd + V untuk Mac atau Ctrl + V untuk Windows) ke dalam artboard yang sama dengan desain utama Anda.

Di palet layer, perluas layer layar mockup hingga Anda melihat layer dengan ikon gambar berjudul Tempatkan Artboard Di Sini. Pilih lapisan itu. Lalu pergi ke Plugin > Mockup Sudut dan pilih desain asli Anda di jendela popup.

Ini akan ditampilkan di jendela pratinjau di sudut mockup Anda, tetapi itu tidak akan menampilkan perangkat mockup. Klik Berlaku dan layar Anda sekarang harus berada di mockup perangkat pada sudut yang benar.

Elemen 3D Vektor

Vectary 3D bekerja mirip dengan Clay Mockups 3D, meskipun memiliki lebih sedikit opsi untuk maket perangkat karena juga menawarkan berbagai aset 3D. Buka desain Anda, pilih bingkai, dan pergi ke Plugin > Elemen 3D Vectary.

Temukan mockup yang ingin Anda gunakan di perpustakaan popup, lalu klik Memuat Bingkai. Setelah desain Anda muncul di layar perangkat, klik Ekspor Gambar.

Sekarang Anda memiliki mockup 3D dari desain Anda di perangkat yang Anda pilih. Anda dapat menambahkannya ke desain lain dengan mudah.

Setelah mockup Anda selesai, Anda dapat menyimpannya sebagai file PNG agar mudah digunakan dalam desain lain. Klik File > Ekspor. Pilih gambar yang Anda pilih untuk diekspor, lalu klik Ekspor untuk PNG terakhir Anda.

Tambahkan Realisme ke Desain Anda Dengan Figma Mockup

Ada banyak kegunaan untuk membuat maket untuk desain Anda. Dengan berbagai plugin Figma, Anda dapat menemukan berbagai macam gaya untuk digunakan yang dapat Anda tambahkan ke presentasi, portofolio, atau buat hanya untuk bersenang-senang untuk memamerkan karya desain Anda.

Dengan sedikit perbedaan dalam aplikasi, plugin mockup Figma mudah diakses dan digunakan, jadi mengapa tidak mencobanya?

Cara Membuat Template Master untuk Presentasi di Figma

Baca Selanjutnya