salah satu hubungan yang susah akur selain pasangan yang sedang berantem adalah hubungan antara desainer dan developer desainer enggak suka developernya karena website yang dievelop ternyata tidak sama dengan apa yang sudah didesain Begitu juga dengan developer tidak suka dengan desainernya karena desain yang dibuat itu terlalu rumit dan susah untuk dievelop nah Bagaimana cara mengatasi hal ini salah satunya adalah dengan desain handover desain handover atau desain handof adalah proses transfer file desain dari desainer ke developer sehingga desainnya sudah desainer buat bisa dimengerti dan mudah digunakan oleh developer di proses development nanti tidak ada proses handover yang sempurna karena setiap developer punya preferensinya sendiri-sendiri maka dari itu di video ini saya akan share proses handover yang biasanya saya lakukan ke developer saya haloak apa saja yang perlu dilakukan yang perlu disiapkan dan yang perlu dibuat supaya developer bisa lebih nyaman bekerja dengan kita begitu juga kita bisa lebih akur dengan para developer Tapi sebelumnya intro [Musik] dulu bikin website portofolio maupun website untuk usaha sekarang lebih mudah dengan hpanel dari ni guster karena punya fitur website Builder jadi kamu bisa bikin website dengan cepat tanpa perlu coding caranya pilih salah satu paket hosting rekomendasi saya adalah paket bisnis karena yang paling worthed Oh ya di halaman pembayaran masukkan ke dukupon kuku haldi untuk dapat diskon sebesar 10%. lalu pilih hostinger website Builder Pilih jenis website-nya ketik deskripsi singkat biar bisa di-build oleh Ai jadi deh tinggal Drag and drop aja buat ngedit saya percaya dengan ne goster karena saya sendiri menggunakannya untuk Website portofolio saya yaitu kukudi.com sudah terbukti aksesnya cepat fitur hosting lengkap dan yang terpenting custom sama support 24 jam dapatkan diskon hosting hingga 79% plus gratis domain dengan cara klik Link yang ada di deskripsi dapatkan juga bonus file figma dari desain yang pernah saya buat dengan ketentuan seperti berikut Halo semuanya kembali dengan saya kuko aldianto seorang UI UX desainer dari duweb.com sebenarnya proses handover ini berbeda-beda saya yakin setiap tim juga punya proses enover yang unik karena setiap developer punya preferensi dan kebutuhannya mereka masing-masing tapi di sini saya akan coba share proses handover yang biasanya saya lakukan Semoga bisa menjadi tambahan referensi buat teman-teman desainer dan juga developer di sini pengalaman yang saya bagi ini berdasarkan e pekerjaan saya yang yang pertama saya kerja di tim saya sendiri yaitu diswep.com di sana Saya bekerja dengan mas Erfan yang merupakan developer full stack jadi saya adalah desainer dan developer full stacknya adalah Mas Erfan di sini kita selalu bekerja sama dan kita selalu dan saya juga selalu ngasih Val and offer ke Mas Irfan seperti itu dan pekerjaan yang kedua juga saya kerjakan sekarang juga yaitu adalah saya sebagai UI desainer di sebuah perusahaan agensi eh web desain di austral namanya B webdesign.com di sana saya juga sebagai desainer dan kebanyakan di sana Saya mengerjakan web desain di sana setelah eh satu Project web desain selesai saya selalu kita selalu melakukan proses in over ke Developer jadi saya selalu menyiapkan file figma untuk e ditransfer atau untuk digunakan oleh developernya dari tim kami seperti itu jadi itu adalah e pengalaman yang akan saya share di sini saya akan bagi tipsnya menjadi dua bagian yaitu teknis dan nonteknis kita masuk ke bagian yang nonteknis dulu yang pertama tanya langsung ke developer cara paling enak dan tidak menerka-nerka adalah tanya langsung ke developer kita hal apa saja yang mereka butuhkan mungkin mereka butuh semua font untuk dilist mereka butuh semua list kode warna yang kita gunakan semua icon yang kita gunakan dan lain-lain dan kita harus menyiapkan itu jadi memang proses inover ini bisa beda-beda karena kadang permintaan developer juga bisa berbeda-beda yang penting harus tetap tektokan dan jaga komunikasi antara desainer dan developer yang kedua ajak Developer pakai inspect panel di figma ini kasusnya kalau pakai figma ya karena saya sendiri sehari-hari Memang menggunakan figma dan figma user pasti sudah tahu kalau di figma ada namanya developer mode dan akan saya Tunjukkan e sedikit saja untuk bayangan buat teman-teman yang belum tahu ini adalah tampilan figma salah satu file desain kami ini saya menunjukkan ini eh file figma ini karena ini sudah live Ya sudah live jadi harusnya enggak apa-apa sudah live dan untuk teman-teman yang pengin ngecek saya agak lupa nama website-nya bentar saya cari dulu ya scuba scuba Oh I ini ad scuba.com Nah di sini agak berbeda kalau kalian lihat di sini kan Eh di home di heronya ini kan gambarnya gini ya tapi di di website yang live itu video nah ini bukan gara-gara developernya enggak bisa bikin Bukan tapi karena memang ini adalah request sendiri dari klien seperti itu tapi untuk eh halaman yang lain dan section di bawahnya ini sama semuanya ini adalah desainnya dan ini adalah website yang sudah live nah ini sama semua sem nih sama semuanyanya ada yang rusak nanti biar dibenerin developernya sama semuanya keren sih keren Oke lanjut ke developer mode untuk ke developer mode teman-teman developer bisa ke sini di pojok sini Nah nanti akan kalau k hover ada tulisan Dev mode klik saja Nah nanti kalian e bisa inspect elemen kayak kalau kalian inspect elemen di browser ya ini mirip kalian klik saja elemen yang mau kalian inspect misal button ini nanti akan keluar css-nya seperti ini property cssnya seperti ini Apa saja style-nya Apa saja warnanya menggunakan apa dan lain-lain bahkan komputed ininya juga space-nya juga ada di sini nah ini juga bisa kalian ganti Enggak cuma SS bisa kalian ganti eh iOS atau Android tergantung kalian menggunakan apa seperti itu ya jadi eh untuk contoh lain mungkin ini teks kalau kalian klik juga nanti akan keluar eh fontnya itu apa size-nya berapa dan lain-lain seperti itu ya Kalian juga bisa lihat eh jarak antara satu elemen dengan elemen yang lain misalkan ini dengan ini Nah ini kan 16 yang merah itu 16 piksel dia jaraknya Jadi kalian bisa mengetahui jaraknya dari inspect elemen Ya mirip seperti inspect elemen di browser jadi dengan developer sudah bisa fitur Death mode Def figma kayak gini saya rasa ini sudah sangat membantu proses inover biar bisa lebih lancar yang ketiga ajarin developer cara sort image di vigma Kalau saya sendiri jujur untuk image saya saya enggak eksport semuanya Saya enggak eksport satu-satu untuk developer jadi image ya yang ada ya image yang ada di desain seperti ini nanti biar developernya sendiri yang bakalan ekspor Nah untuk mengekspor image gampang saja ini Saya tunjukkan secara cepat saja ya misal mau eksport ini gambar kuda laut klik saja di sini ini kita kembali ke mod yang bukan Dev Oh terny di Dev bisa di Dev mode juga bisa di sini juga bisa ada fitur ekspornya jadi sama saja ini untuk ukuran kalau satu kali berarti dia ukurannya akan sama seperti ini 800 820 pikel tapi kalau dua kali berarti ya 820 * 2 kayak gitu dan seterusnya lalu ini untuk e formatnya bisa PNG atau JP jpq untuk image Ya tapi kalau e kalian mengeksport icon misalkan ini saya sarankan menggunakan SPG karena ya masih bisa diedit warnanya oleh developer saat development nantinya seperti itu kalau developernya belum tahu cara ekspor gambar seperti itu ya tugas kita untuk mengajarin eksportnya perlu diperhatikan juga ukuran dan format ketika mengeksport image dan juga icon yang tadi Saya tunjukkan seperti itu yang keempat ajak developer untuk pakai fitur comand di figma walaupun kita sudah nyiapin file-nya dan menurut kita desain kita sudah jelas biasanya tetap bakal ada pertanyaan dari developer entah mengenai aset flow dan desain secara keseluruhan dan itu sangat normal malah harus Sebenarnya biar tidak ada kesalah pahaman nah disarankan developer nanya langsung di figma menggunakan fitur komand supaya kita juga bisa lebih tahu konteksnya itu e apa Mana bagian yang dimaksud oleh developer ini karena di figma kan bisa langsung kelihatan Ya bagaimana yang sedang dikomen dan juga sebagai dokumentasi untuk semua pihak Jika ada yang kurang jelas tentang Desain tersebut untuk caranya seperti ini ini juga Gampang kalau di figma eh di atas ada icon comen kalian klik saja Nah nanti csornya akan berubah eh seperti ini dan kalian klik bagian mana misalkan mau komen ini terus dia nanya ini font nya apa ya nanti langsung kalian bisa balas di sini seperti itu Terus misalkan tolong ini diekportin dong thank [Musik] you ya dan seterusnya oke itu dari sisi non teknisnya lebih ke banyak-banyak komunikasi ke developernya ya sekarang masuk ke sisi teknisnya untuk desainer perlu bikin apa saja yang pertama rapikan file desain kalian bayangkan developer baru dapat link figma Kalian terus dia buka Eh frame-nya itu ada banyak banget di mana-mana enggak beraturan bertebaran di mana-mana pasti mereka sudah malas duluan karena bingung mau mau mulai bacanya itu dari mana Nah tugas kita Sebelum ngasih file desain ke developer adalah merapikan file-nya singkrikan semua Elemen yang tidak ada hubungannya dengan desain final Kalau saya sendiri biasanya untuk dokumentasi Saya tidak menghapus frame-frame yang tidak digunakan ini tapi saya memindahkannya ke page baru yang biasanya saya namain draft Siapa tahu frame-frame tersebut atau elemen-elemen tersebut bisa masih diperlukan di masa mendatang jadi kita enggak perlu bikin elemennya dari awal lagi yang kedua kasih nama halaman dan frame biar developer tahu halamannya nya itu ada apa saja dan yang mana saja kita harus Ngasih nama tiap halaman dan juga frame halamannya itu Contohnya seperti ini Nah kalau saya biasanya Ngasih nama ini ini frame home ya kan sudah saya di sini framenya sudah saya kasih nama lalu di sini saya kasih teks yang besar homepage seperti itu begitu juga dengan halaman-halaman yang lain Mega menu halapan dive course dan lain-lain dan seterusnya Oke seperti itu contohnya selain frame yang kita namain halaman di panel kiri juga perlu kita namain biar developer Gampang kalau mau nyari desain di halaman lain di panel kiri itu yang saya makuk ini Nah di sini jadi eh Saya biasanya mengelompokkan atau meemanage file itu seperti ini jadi misalkan ada perubahan besar saya akan bagi ke halaman yang baru misalkan ini adalah web desain pertama tapi ternyata setelah dikirim ke klien e perubahannya atau feedbacknya dan revisinya itu banyak banget jadi perubahannya terlalu besar jadi saya bikin halaman baru yang saya namain web design 2.0 seperti itu lalu biasanya juga saya bedakan mobile version di halaman yang lain lalu yang tadi yang draft yang elemen yang engak E saya butuhkan lagi akan saya eh di draft dan cover seperti ini Nah ada pertanyaan yang paling sering saya dapat juga soal penamaan Apakah setiap frame dan elemen perlu kita namai juga Mas jawabannya perlu dengan tiga syarat ini yang pertama jika memang direquest oleh klien dan developer yang kedua jika memang ada waktu dan tenaga lebih karena menamai semua elemen ini bisa makan waktu dan tenaga apalagi kalau sedang ada deadline menamai setiap elemen sepertinya bukan prioritas utama dan yang ketiga kalau kalian bikin desain syistem nah namanya juga desain sistem semua harus benar semua harus terintegrasi jadi kalau namanya saja nama frame-nya tidak kalian namain nanti akan tambah bingung untuk orang-orang lain yang bakal Mengerjakan desain sistem ini jadi kalau kalian membuat desain sistem yang besar memang harus dinamai selain tiga syarat itu saya rasa tidak perlu Kalau saya sendiri memang jarang ngasih nama ke semua elemen karena saya biasanya kerja di agensi yang butuh kecepatan Selain itu klien juga kebanyakan tidak peduli dengan file figmananya mereka biasanya hanya melihat Prototype dan website yang sudah live saja sepertinya menamain halaman saja kayak yang tadi saya lakukan itu sudah cukup yang ketiga bikin user flow terutama untuk Project mobile app sepertinya userfow ini adalah salah satu hal yang wajib biar semua pihak dari mulai dari developer Project Manager dan klien tahu bagaimana flow yang benar dari desain kita untuk tutorial bikin user flow sudah pernah saya bikin di video ini menggunakan overflow tapi kalian juga bisa langsung bikin di fikmat juga kalau kalian mau lalu untuk Project web desain biasanya Saya cukup bikin flow dalam bentuk side map saja Contohnya seperti ini side map seperti ini jadi ee hepage bisa ke menu dan di bawah homepage ini ada halaman apa saja dan bisa ke mana saja seperti ini dia simpel saja kalau website ya cukup bikin S map Dan ini juga gak begitu banyak halamannya Cuma segini Jadi mapnya juga kecil seperti itu yang keempat bikin Prototype sekali lagi untuk Project web app atau mobile app saya rasa Prototype ini WIB dibikin selain biar developer tahu gimana interaksi app-nya nanti Prototype ini juga harus ditunjukkan ke klien Biar mereka bisa mencoba dan ngerasain gimana kalau desain itu sudah jadi nantinya untuk Project web desain Sebenarnya saya jarang bikin kecuali memang ada interaksi yang unik dan perlu ditunjukkan ke developer maupun klien untuk tutorial bikin Prototype sudah banyak saya bikin juga di e channel ini salah satunya adalah ini membuat aplikasi comin Nanti akan saya cantumkan video di atas ini Oke yang kelima bikin style guide style guide adalah kumpulan style yang kita gunakan dalam desain kita mulai dari font color button dan elemen-elemen lainnya akan Saya tunjukkan contohnya di sini e karena ini website-ennya kecil termasuk kecil sedikit dalamannya dan jadi sty gateennya yang saya buat untuk project ini juga kecil atau sedikit yang pertama ada font ada H1 H2 H3 dan body TS di sini ada properties-nya pakai font apa dan ukurannya berapa kayak gitu Dan kalau bisa e biar semuanya konsisten di desain kita di semua halaman eh daftarkan style ini ke ke sini buat local style di sini oke biar e desain kalian itu konsisten gitu aja Lalu ada colors namai warnanya itu apa saja dan sebutkan juga kasih e color kodenya seperti ini ini cuma contoh saja ya untuk layoutnya Terserah kalian mau mau bikin bagaimana untuk color ini juga kalau bisa kalian e save sebagai style di sini untuk memastikan warna kalian yang kalian gunakan itu sama di seluruh desain kalian yang ketiga ada Icons nah ini Kebetulan project ini yang banyak itu gambar jadi jarang pakai ion ionnya cuma ada sedikit seperti ini lalu button button di sini juga biasanya saya bikin beberapa stage ya Ada main button secondary secondary with icon dan alternatif seperti ini dan ini kalau bisa gunakan atau buat komponen ini komponen Jadi kalau kalian mau mengubah button di seluruh eh website kalian enggak butuh kalian enggak perlu rubah Dari halaman satu ke halaman lainnya kalian hanya perlu rubah satu komponen ini saja seperti itu dengan style gate yang seperti ini akan memudahkan developer di awal proses development karena mereka Jadi tahu mereka harus import font apa saja mereka harus bikin style untuk warna apa saja dan bikin komponen untuk elemen apa saja yang keenam bikin custom thumbnail Kalau yang ini penting Enggak penting sih sebenarnya tujuannya biar file kita kelihatan lebih rapi dari Jika dilihat dari dashboard figma dan biar lebih mudah mencarinya Ada baiknya kita bikin thumbnail untuk tiap file untuk tutorial e cara bikin custom thumbnail sudah pernah saya buat juga di video yang satu ini Nah itu adalah beberapa tips yang bisa saya berikan untuk e proses hanover bisa lebih lancar Nah masalahnya jika kita sudah melakukan semuanya itu tapi developer masih tidak mau mendevelop sesuai dengan desain kita solusinya adalah konsultasi ke Project Manager biarkan Project Manager yang memutuskan harus bagaimana kadang memang ada beberapa desain yang tidak jadi dievelop karena memakan banyak waktu dan resource sedangkan deadline-nya itu sudah mepet ini bisa dipahami dan saya dari Sisi desainer bisa mengerti tapi kadang ada juga developer yang engak mau develop persis dengan desain karena memang dianya saja yang malas kalau ini Saran saya untuk oknum-oknum seperti ini supaya kerja lebih keras karena ingat secapek capeknya kita kerja lebih capek lagi orang yang nyari kerja itu dulu video desain handover kali ini saya tahu cara-cara yang saya share tadi itu bukanlah best practisnya maka dari itu akan disesuaikan dengan tim kalian masing-masing mana tips yang bisa diterapkan saya juga sangat menerima Jika ada yang mau mengoreksi ataupun memberi saran tentang tips-tips tadi silakan langsung Tulis di komentar di bawah biar teman-teman yang lain juga bisa belajar untuk nonton video desain figma yang lain silakan ke playlist yang ini follow juga Instagram dan tiktok kuku Aldi karena di sana saya sering share tips-tips tentang freelance dan uiux design share juga video ini ke teman-teman kalian supaya kita bisa belajar bersama dan P saya adalah desain dulu aja nanti juga bisa saya kuk alanto [Musik] pamit than