Bagi Anda yang tinggal menikmati tampilan desain sebuah website mungkin tidak tahu bagaimana proses kerjasama antara desainer UX dan developer. Handoff pada Figma melalui proses mockup menjadi salah satu tahapan penting dalam proses tersebut.

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.

Mengenal Istilah Desain Handoff

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.

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.

Di dalam sebuah dokumen desain handoff, biasanya memiliki beberapa layer penting di antaranya mockup. Pembuatan Mockup ini seringkali menggunakan tools Figma. Handoff Figma menjadi salah satu yang paling populer karena tools ini memungkinkan kolaborasi proses desain yang berlaku secara real time. Layer yang lain adalah interaction, copy, checklist, specs, dan juga assets.

Baca juga : Perbandingan Tools Design UI/UX

Tahapan Proses Desain Handoff

Bagaimana agar proses desain handoff oleh desainer dan developer dapat berjalan dengan baik? Berikut ini tahapan dan prosesnya:

• Komunikasi Sejak Awal

Komunikasi perlu sejak awal antara desainer dan developer. Keduanya harus memiliki komunikasi yang selaras. Diskusi terkait bagaimana workflow atau guidelines, 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.

• Membuat Dokumen Checklist

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.

• Penataan Aset dan Spesifikasi

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. 

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. 

• Membuat Flow

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.

• Handoff Meeting

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.

Baca juga : Design Thinking – Alat Penting dalam Pengembangan Produk Digital

Handoff ini merupakan tahapan yang sangat penting. Kesalahpahaman pada fase ini akan berdampak pada launching produk yang sudah pasti akan lebih molor lagi waktunya.

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.

Proses handoff ini biasanya akan terjadi pada desain web, aplikasi dan sebagainya. Anda sendiri sebagai pengguna tak perlu bingung memikirkan prosesnya karena Anda cukup bermitra dengan pengembang website profesional.

Rekomendasi website development terbaik bisa Anda cek di Crocodic. Kami juga punya pilihan layanan Mobile Apps Development yang bisa Anda cek di sini. Tidak perlu bingung mempelajari handoff pada Figma. Kami hadir membantu Anda memiliki website dan aplikasi profesional untuk kompetisi marketing bisnis yang lebih unggul.

Source :
https://uxplanet.org/top-10-design-handoff-tools-for-designers-and-developers-81ba02618e33 
https://www.figma.com/design-process/
https://cliquestudios.com/mockups/