Beberapa minggu terakhir gue kepikiran terus terkait efisiensi workflow desain di Figma serta bagaimana menyusun handoff yang efisien ke developer. Masalah efisiensi ini muncul karena saat ini sedang terlibat dalam pengembangan produk yang halaman, flow & fitur yang didesain lumayan banyak. Selain itu ada kemungkinan desainnya dikerjakan lebih dari satu orang baik secara bersamaan atau pun menggantikan posisi designer sebelumnya. Selain itu untuk produk juga ada proses iterasi desain & fitur yang cukup sering serta membutuhkan manajemen catatan riwayat perubahan yang rapi.
Sebelum gue sudah coba browsing, cari template, baca berbagai blog serta nonton berbagai video product (UI/UX) designer luar negeri. Tapi entah mengapa belum menemukan jawaban yang memuaskan dan baru menemukan satu video yang oke. Gue juga sudah coba diskusi ke designer yang lebih berpengalaman tapi sayangnya belum mendapatkan jawaban yang memuaskan serta ada keterbatasan yang ada di luar kendali gue.
Malam ini tiba-tiba muncul rekomendasi video dari channel designer Indonesia. Tak dinyana ternyata beberapa pertanyaan yang terus terngiang-ngiang di kepala selama beberapa waktu terkahir terjawab di video tersebut. Berikut beberapa video yang menjawab beberapa pertanyaan gw terkait efisiensi workflow desain di Figma dan handoff yang efision ke developer.
1. Efisiensi Update Halaman yang Digunakan Berulang di Figma Menggunakan Plugin MockupMirror (Gratis)
Manage halaman yang sering digunakan berulang dengan plugin MockupMirror agar bisa update desain lebih efisien. Secara cara kerja plugin MockupMirror mirip dengan Componrnt Figma, bedanya plugin MockupMirror desain duplikatnya dalam bentuk image PNG.
2. Efisiensi Menggambar Flow di Figma Menggunakan Plugin Draw Connector (Berbayar) atau Arrow FigJam (Gratis)
Tutorialnya ada di bagian akhir video poin 1. Bisa disimak mulai menit 6:26.
- Draw Connector merupakan plugin berbayar. Harga lisensinya 19$ per user, sekali beli (bukan sistem langganan).
- Arrow FigJam merupakan arrow yang terdapat di FigJam Figma yang mana bisa digunakan secara gratis. Tinggal di-copy saja. Entah mengapa arrow FigJam lebih powerful dibandingkan arrow Figma.
3. Handoff Menggunakan Zeplin (Berbayar)
Ini video product designer luar negeri yang gue maksud di pembukaan tulisan ini. Setelah nonton video di atas sekarang jadi paham Zeplin saat ini merupakan tools yang paling powerful untuk handoff desain.
Berikut beberapa keuntungan menggunakan Zeplin:
- Organisasi file desain handoff lebih rapi
- Penyusunan screen flow lebih cepat
- Update perubahan desain lebih mudah
- Riwayat update desain suatu halaman terdokumentasi lebih rapi
- Annotation desain lebih mudah, lebih cepat & lebih gampang dibaca
- File lebih mudah di-inspect oleh develope sehingga designer tidak perlu membuat red line secara manual
- Ada single source of truth desain yang bisa diakses dengan mudah oleh designer, PM, developer & UX writer
- Dokumentasi handoff lebih efisien
Sejauh ini minusnya Zeplin yang gue temukan dalah designer harus mengupload tiap perubahan desain.
4. Handoff Menggunakan Zeplin Versi Advance (Berbayar)
Handoff di Zeplin bakal lebih powerful lagi jika memanfaatkan fitur design token & component yang dihubungkan dengan design system versi code untuk developer. Untuk lebih jelasnya silakan simak video di atas.
Tak heran jika biaya langganan Zeplin sebagai user role developer 2x lipat lebih mahal dari pada sebagai user role designer.
Itu lah beberapa hal yang bisa dimanfaatkan untuk efisiensi workflow desain di Figma serta handoff desain ke developer. Tapi pada akhirnya kita juga harus menyesuaikan workflow tim di mana kita bekerja sebab tiap tim/perusahaan punya sistem kerja sendiri-sendiri.
Cheers!
