Cara Membuat UI Design Menjadi Mockup Otomatis di Figma

Cara Membuat UI Design Menjadi Mockup Otomatis di Figma

Cara Membuat UI Design Menjadi Mockup Otomatis di Figma

UI Design merupakan salah satu bagian dari seni grafis yang membuat sebuah tampilan dari aplikasi mobile, website, smart tv, dan semacamnya. Biasanya seorang UI Designer untuk mempresentasikan desain tampilan sebuah aplikasi kedalam bentuk Mockup.


Dengan menampilkannya dalam bentuk Mockup membuat desain User Interface kamu terlihat lebih realistic dan seperti aslinya ketika sudah menjadi aplikasi yang siap digunakan oleh user.


Dikesempatan kali ini Dgrafis.com akan memberikan sedikit tips dan trik bagaimana caranya membuat Mockup UI tanpa ribet dan tanpa harus mengeditnya di Photoshop menggunakan namun langsung membuatnya di Figma.


Lebih tepatnya yang akan kita manfaatkan disini adalah fitur Plugin dari Figma, sebelumnya bagi kamu yang belum tau Figma sedikit informasinya; Figma merupakan software aplikasi yang dipakai untuk membuat UI Design.


Jika kamu tertarik belajar membuat UI Design di Figma tunggu artikel selanjutnya yang membahas tutorial tersebut ya...


Lanjut, untuk kamu yang sudah menggunakan Figma dan punya desain UI yang akan digunakan sebagai Portfolio ikuti langkah-langkah dibawah ini agar tampilan desain yang kamu buat lebih menarik untuk dipresentasikan.



1. Install Plugin Mockuuups Studio di Figma

Pertama silakan kamu install Plugin bernama Mockuuups Studio di menu Community > Plugin, ketik aja dipencarian nama plugin yang udah disebutin tadi

Membuat mock up menggunakan plugin Mockuuups Studio di Figma
(Klik untuk memperbesar)


2. Buka file Design

Kemudian buka file desain yang sebelumnya sudah kamu buat pilih Plugin > Mockuuups Studio

Membuat mock up menggunakan plugin Mockuuups Studio di Figma


Akan muncul tampilan seperti ini, kemudian pilih Frame UI Design yang ingin dimasukan ke dalam template mockup

Membuat mock up menggunakan plugin Mockuuups Studio di Figma

3. Pilih Jenis Mockup

Dan kamu akan disuguhkan dengan pilihan jenis Mockup yang menarik seperti berikut (kamu bisa memilih lebih banyak jenis Mockup jika meng-upgrade ke Premium)

Membuat mock up menggunakan plugin Mockuuups Studio di Figma

4. Save Hasil Mockup

Kemudian pilih Export > Export as File untuk menyimpan Mockup dalam format file JPG 

Save as Mockup


Selesai, sekarang membuat Mockup untuk tampilan desain UI menjadi sangat mudah dan cepat berkat Plugin ini.

Tertarik lebih lanjut belajar UI Design di Figma ? Nantikan tutorialnya di Dgrafis.com!

Segini dulu untuk tutorial singkatnya, semoga bisa bermanfaat bagi kamu yang baru tau yaa.
Load comments