{"id":2729,"date":"2022-09-12T16:11:40","date_gmt":"2022-09-12T09:11:40","guid":{"rendered":"https:\/\/mez.ink\/blog\/blog\/?p=2729"},"modified":"2022-09-12T16:20:24","modified_gmt":"2022-09-12T09:20:24","slug":"tutorial-prototyping-figma-design","status":"publish","type":"post","link":"https:\/\/mez.ink\/blog\/tutorial-prototyping-figma-design\/","title":{"rendered":"Tutorial Figma: Membuat Prototyping Figma Design Mudah"},"content":{"rendered":"\n<p>Setelah membahas <a href=\"https:\/\/mez.ink\/blog\/blog\/tutorial-basic-tools-figma\/\">cara menggunakan basic tools figma<\/a>, tutorial figma kali ini akan membahas langkah-langkah membuat prototyping figma design dengan mudah. Dengan prototyping tool Figma, kamu dapat membuat alur interaktif untuk melihat bagaimana pengguna dapat berinteraksi dengan desain kamu.<\/p>\n\n\n\n<p>Selain itu, membuat prototipe sangat berguna bagi kamu para <a href=\"https:\/\/www.ekrut.com\/media\/ui-ux-designer\">UI\/UX designers<\/a> yang ingin:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Melihat interaksi dan alur pengguna terlebih dahulu.<\/li><li>Membagikan ide dan merevisi projek<\/li><li>Mendapatkan umpan balik dari orang-orang yang bekerja dengan kamu.<\/li><li>Memeriksa bagaimana pengguna bertindak satu sama lain.<\/li><li>Menunjukkan desain kamu kepada orang-orang atau client yang penting.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Langkah-Langkah Membuat Prototyping Figma Design Dengan Mudah<\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Flows dan Starting Points<\/strong><\/h2>\n\n\n\n<p>Dengan pembuatan prototipe Figma, Kamu dapat membuat beberapa alur untuk prototipe Kamu pada satu halaman sehingga Kamu dapat melihat bagaimana pengguna akan bergerak melalui desain Kamu.<\/p>\n\n\n\n<p>Hubungan antar frame dan links pada satu halaman disebut flow. Prototipe dapat menampilkan seluruh jalur yang diambil pengguna melalui aplikasi atau websitemu, atau dapat fokus pada bagian tertentu dari jalur tersebut dengan alurnya sendiri. Misalnya, prototipe kamu mencakup semua cara yang mungkin untuk berinteraksi dengan situs eCommerce. Kamu dapat membuat akun, menambahkan item ke keranjang, dan check out menggunakan alur dalam prototipe.<\/p>\n\n\n\n<p>Saat kamu menghubungkan dua frame untuk pertama kalinya di Figma, titik awal starting point untuk flows akan dibuat. Kamu juga dapat menambahkan flow starting points ke prototipe kamu dengan mengklik frame pertama yang ingin kamu hubungkan dengan frame lain, buka tab <strong>prototype<\/strong> lalu klik <strong>flow starting point<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto0.png\" alt=\"\" class=\"wp-image-2730\" width=\"589\" height=\"424\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Menambahkan Connections<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#1 Buka Tab Prototype<\/strong><\/h3>\n\n\n\n<p>Jika kamu tidak dapat menemukannya, tab <strong>prototipe<\/strong> ada di sudut kanan atas. Pada tab ini, Kamu dapat mengatur hal-hal seperti perangkat atau device yang ingin kamu gunakan, warna latar belakang, dan halaman pertama yang akan dimuat.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto2.png\" alt=\"\" class=\"wp-image-2732\" width=\"504\" height=\"438\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#2 Pilih Komponen yang ingin di link dan arahkan ke frame tujuan<\/strong><\/h3>\n\n\n\n<p>Gambar di bawah menunjukkan komponen yang telah kamu hubungkan ke frame tujuan. Cukup klik pada komponen seperti button, teks, foto, dll., lalu seret ke frame kedua atau frame yang baru saja kamu buat untuk menambahkan action.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto3.png\" alt=\"\" class=\"wp-image-2733\" width=\"529\" height=\"409\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Menambahkan Interaction dan Custom Animation<\/strong><\/h2>\n\n\n\n<p>Jika kita mengklik salah satu <strong>arrow<\/strong> prototipe berwarna biru yang kita buat sebelumnya, halaman ini akan muncul.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto4.png\" alt=\"\" class=\"wp-image-2734\" width=\"547\" height=\"395\"\/><\/figure>\n\n\n\n<p>Ada banyak animasi untuk dipilih, dan kita dapat mengubahnya agar sesuai dengan kebutuhan setiap aplikasi atau website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Mengatur Device untuk Menampilkan Prototype<\/strong><\/h2>\n\n\n\n<p>Untuk mengatur device yang kamu inginkan dalam menampilkan prototype yang sudah kamu buat, kamu dapat meng-klik tab<strong> prototype<\/strong>, lalu klik opsi <strong>device<\/strong> dan pilih device dan model sesuai keinginan kamu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto9.png\" alt=\"\" class=\"wp-image-2735\" width=\"531\" height=\"346\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Menampilan atau Mempresentasikan Prototype<\/strong><\/h2>\n\n\n\n<p>Setelah proses prototyping selesai, kamu dapat menampilkan atau memrpesentasikan prototype kamu dengan cara klik logo play di kanan atas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto5-1024x640.png\" alt=\"\" class=\"wp-image-2736\" width=\"548\" height=\"337\"\/><\/figure>\n\n\n\n<p>Prototype kamupun akan berfungsi sesuai dengan yang kamu kerjakan.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/proto6-1024x485.png\" alt=\"\" class=\"wp-image-2737\" width=\"649\" height=\"305\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/proto6-300x142.png 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/proto6-150x71.png 150w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Penutup<\/strong><\/h2>\n\n\n\n<p>Itulah langkah-langkah cara membuat prototyping figma design dengan mudah. Semoga tutorial figma kali ini dapat membantu kamu mempelajari figma dari dasar. Untuk tutorial figma lainnya, kamu dapat mengunjungi <a href=\"https:\/\/mez.ink\/blog\/blog\/category\/tutorial-figma\/\">tutorial Figma<\/a> di <a href=\"https:\/\/mez.ink\/blog\/blog\/\">Mezink Blog<\/a>. Semoga bermanfaat!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah membahas cara menggunakan basic tools figma, tutorial figma kali ini akan membahas langkah-langkah membuat prototyping figma design dengan mudah. Dengan prototyping tool Figma, kamu dapat membuat alur interaktif untuk melihat bagaimana pengguna dapat berinteraksi dengan desain kamu. Selain itu, membuat prototipe sangat berguna bagi kamu para UI\/UX designers yang ingin: Melihat interaksi dan alur [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":2564,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[288],"tags":[225,256,295,293,276,257],"class_list":{"0":"post-2729","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorial-figma","8":"tag-figma","9":"tag-figma-101","10":"tag-figma-beginner","11":"tag-figma-download","12":"tag-figma-tools","13":"tag-tutorial-figma"},"_links":{"self":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/comments?post=2729"}],"version-history":[{"count":5,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2729\/revisions"}],"predecessor-version":[{"id":2745,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2729\/revisions\/2745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/media\/2564"}],"wp:attachment":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/media?parent=2729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/categories?post=2729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/tags?post=2729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}