{"id":10315,"date":"2022-07-01T16:34:23","date_gmt":"2022-07-01T09:34:23","guid":{"rendered":"https:\/\/crocodic.com\/?p=10315"},"modified":"2023-10-06T06:58:30","modified_gmt":"2023-10-05T23:58:30","slug":"proses-handoff-pada-figma","status":"publish","type":"post","link":"https:\/\/crocodic.com\/id\/proses-handoff-pada-figma\/","title":{"rendered":"Handoff pada Figma, Pengertian dan Tahapan Prosesnya"},"content":{"rendered":"<p>Bagi Anda yang tinggal menikmati tampilan desain sebuah <a href=\"https:\/\/crocodic.com\/id\/8-alasan-mengapa-perawatan-maintenance-website-mutlak-dilakukan-secara-profesional\/\">website<\/a> mungkin tidak tahu bagaimana proses kerjasama antara desainer UX dan <a href=\"https:\/\/crocodic.com\/id\/5-kesalahan-yang-sering-dilakukan-developer-mobile-apps\/\">developer<\/a>. Handoff pada Figma melalui proses mockup menjadi salah satu tahapan penting dalam proses tersebut.<\/p>\n\n\n\n<p>Proses handoff sendiri sering terkendala karena masing-masing dari desainer dan developer tidak saling memahami, perbedaan interpretasi. Seorang desainer misalnya tidak tau bagaimana kerja developer atau sebaliknya. Inilah yang membutuhkan solusi.<\/p>\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-mengenal-istilah-desain-handoff\">Mengenal Istilah Desain Handoff<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-tahapan-proses-desain-handoff\">Tahapan Proses Desain Handoff<\/a><\/li><\/ul><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-mengenal-istilah-desain-handoff\"><strong>Mengenal Istilah Desain Handoff<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/JjlBRkkJG9Wth_bdrSne_Y4OI4SB7Q4sn_h4c0Wbfz0P0TsuvjGk51q4VSMO5wipK2Yd4sGvnazIPJis0jaSbn-Dj25coe2sDtcnJHs2qMsFf__Och9X0vVfeuPSdMpqQKrPhIYW_Sk7kjFdViljhjo\" alt=\"Designer Figma\"\/><figcaption> <a href=\"https:\/\/unsplash.com\/photos\/jfR5wu2hMI0\">https:\/\/unsplash.com\/photos\/jfR5wu2hMI0<\/a>&nbsp; <\/figcaption><\/figure>\n\n\n\n<p>Apa itu desain handoff? Desain handoff adalah proses pengimplementasian desain yang telah dibuat oleh desain UX ke dalam bahasa pemrograman oleh seorang developer. Desain tersebut biasanya sudah mendapat persetujuan dari owner atau produk manager terkait.<\/p>\n\n\n\n<p>Desain handoff adalah proses pengimplementasian desain yang telah dibuat oleh desain UX ke dalam bahasa pemrograman oleh seorang developer. Desain tersebut biasanya sudah mendapat persetujuan dari owner atau produk manager terkait.<\/p>\n\n\n\n<p>Di dalam sebuah dokumen desain handoff, biasanya memiliki beberapa layer penting di antaranya <a href=\"https:\/\/cliquestudios.com\/mockups\/\">mockup<\/a>.<a href=\"https:\/\/cliquestudios.com\/mockups\/\"> <\/a>Pembuatan Mockup ini seringkali menggunakan tools <a href=\"https:\/\/www.figma.com\/\">Figma<\/a>. Handoff Figma menjadi salah satu yang paling populer karena <em>tools<\/em> ini memungkinkan kolaborasi proses desain yang berlaku secara real time. Layer yang lain adalah<em> interaction, copy, checklist, specs<\/em>, dan juga <em>assets<\/em>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>Baca juga : <\/em><a href=\"https:\/\/crocodic.com\/id\/sedang-mencari-aplikasi-ui-ux-terbaik-cek-disini-buat-perbandingannya\/\"><em>Perbandingan Tools Design UI\/UX<\/em><\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-tahapan-proses-desain-handoff\"><strong>Tahapan Proses Desain Handoff<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/jM070wUmwrAXBtrqmZBni_Zwtd26Sei9HJO0TfunC25hOefkEtw-oLic7NF3hbOt56djZY0NLp56MU8wCU0pdLICaCyTHUhJNKTtvie1alm4yUldvWIdyaJbEDGG2Dh5UZt2hcOQ1WKE-sD_3dGIkIQ\" alt=\"Design Wireframe\"\/><figcaption> <a href=\"https:\/\/unsplash.com\/photos\/ml1IgjV8OvY\"><strong>https:\/\/unsplash.com\/photos\/ml1IgjV8OvY<\/strong><\/a> <\/figcaption><\/figure>\n\n\n\n<p>Bagaimana agar proses desain handoff oleh desainer dan developer dapat berjalan dengan baik? Berikut ini tahapan dan prosesnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Komunikasi Sejak Awal<\/strong><\/li><\/ul>\n\n\n\n<p>Komunikasi perlu sejak awal antara desainer dan developer. Keduanya harus memiliki komunikasi yang selaras. Diskusi terkait bagaimana <em>workflow<\/em> atau <em>guidelines<\/em>, hingga design hand off tools apa yang paling tepat. Pemakaian istilah di produk ataupun pemberian nama di layar perlu juga dalam satu pemahaman yang sama.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Membuat Dokumen Checklist<\/strong><\/li><\/ul>\n\n\n\n<p>Guna mencegah agar tidak ada kasus file atau design yang hilang, Anda perlu membuat dokumen checklist. Checklist ini bisa Anda buat menggunakan Google Sheets atau Dropbox Paper. Anda bisa melengkapi checklist dengan keterangan apakah sudah diambil developer atau belum, tautan file desain, dan sebagainya.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Penataan Aset dan Spesifikasi<\/strong><\/li><\/ul>\n\n\n\n<p>Figma handoff template mampu mentransliterasi design menjadi bentuk bahasa pemrograman yang bisa dipahami programmer. Hasilnya seorang programmer tidak lagi mengira-ngira, ia akan langsung mendapatkan identitas teknis dari setiap element.&nbsp;<\/p>\n\n\n\n<p>Sebagai contoh programmer membuat rectangle putih. Jika tidak menggunakan fitur handoff, programmer harus mengira-ngira berapa ukuran dari shape rectangle putih. Namun, adanya fitur handoff dapat membantu detail ukuran dan identitas teknis secara otomatis.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Membuat Flow<\/strong><\/li><\/ul>\n\n\n\n<p>Flow yang Anda buat idealnya adalah prototype yang sifatnya interaktif. Bukan hanya desainer yang paham, tetapi juga developer. Alur dari semua screen harus logis dan saling terhubung satu sama lainnya.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Handoff Meeting<\/strong><\/li><\/ul>\n\n\n\n<p>Pertemuan ini bertujuan untuk memastikan bahwa semua informasi bisa mendapat pemahaman yang baik dan benar oleh pihak developer. Pada proses ini bisa Anda lakukan komunikasi tanya jawab, penjelasan informasi yang ada pada dokumen desain, dan sebagainya.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>Baca juga : <\/em><a href=\"https:\/\/crocodic.com\/id\/design-thinking-alat-penting-dalam-pengembangan-produk-digital\/\"><em>Design Thinking &#8211; Alat Penting dalam Pengembangan Produk Digital<\/em><\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Handoff ini merupakan tahapan yang sangat penting. Kesalahpahaman pada fase ini akan berdampak pada launching produk yang sudah pasti akan lebih molor lagi waktunya.<\/p>\n\n\n\n<p>Dalam proses handoff ini penting juga Anda ketahui bahwa proses penamaan harus konsisten. Nama file, produk, dan juga screen perlu Anda jaga konsistensinya agar developer mampu menavigasi semua file dengan baik.<\/p>\n\n\n\n<p>Proses handoff ini biasanya akan terjadi pada desain web, <a href=\"https:\/\/crocodic.com\/id\/mobile-app-apa-yang-paling-dibutuhkan-pada-tahun-2025\/\">aplikasi<\/a> dan sebagainya. Anda sendiri sebagai pengguna tak perlu bingung memikirkan prosesnya karena Anda cukup bermitra dengan pengembang website profesional.<\/p>\n\n\n\n<p>Rekomendasi website development terbaik bisa Anda cek di <a href=\"https:\/\/crocodic.com\/id\/website-development\/\">Crocodic<\/a>. Kami juga punya pilihan layanan <a href=\"https:\/\/crocodic.com\/id\/flutter-vs-react-native-mana-yang-lebih-cocok-untuk-proyekmu\/\">Mobile Apps<\/a> Development yang bisa Anda cek <a href=\"https:\/\/crocodic.com\/id\/impactful-mobile-apps-developer\/\">di sini. <\/a>Tidak perlu bingung mempelajari handoff pada Figma. Kami hadir membantu Anda memiliki website dan aplikasi profesional untuk kompetisi marketing bisnis yang lebih unggul. <\/p>\n\n\n\n<div style=\"height:51px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-preformatted\">Source :<br>https:\/\/uxplanet.org\/top-10-design-handoff-tools-for-designers-and-developers-81ba02618e33 <br>https:\/\/www.figma.com\/design-process\/<br>https:\/\/cliquestudios.com\/mockups\/<\/pre>","protected":false},"excerpt":{"rendered":"<p>Desain handoff adalah proses pengimplementasian desain yang telah dibuat oleh desain UX ke dalam bahasa pemrograman oleh seorang developer.<\/p>","protected":false},"author":43,"featured_media":10316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[354,355],"tags":[506],"class_list":["post-10315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-design","category-crocodic-dec","tag-figma"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/10315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=10315"}],"version-history":[{"count":5,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/10315\/revisions"}],"predecessor-version":[{"id":11449,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/10315\/revisions\/11449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/10316"}],"wp:attachment":[{"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=10315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=10315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=10315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}