Sederhanakan Handoff Dari Sketsa Ke Kode Visual Studio Dengan Indigo.Design

(Ini adalah artikel bersponsor.) Jika Anda memikirkannya, tim perangkat lunak sangat mirip dengan tim olahraga. Sementara setiap anggota tim bekerja menuju tujuan yang sama persis, peran yang mereka mainkan dan tindakan yang mereka ambil sangat berbeda satu sama lain.

Itulah mengapa sangat penting untuk memiliki cara yang mulus untuk memindahkan bola dari satu anggota tim ke anggota tim lainnya.

Sayangnya, handoff yang terjadi dalam tim perangkat lunak tidak secara alami semulus apa yang Anda lihat di lapangan olahraga. Dan salah satu alasan utama untuk ini adalah sistem dan pendekatan yang berbeda yang digunakan untuk membangun produk.

Desainer membuat UI dengan piksel sempurna di Sketch, hanya perlu menerjemahkannya ke dalam bahasa yang dapat digunakan pengembang saat mereka membuat aplikasi di Visual Studio Code IDE. Tanpa cara yang mulus untuk memindahkan desain produk melalui pipeline, inefisiensi ini menyebabkan pengerjaan ulang dan debugging yang mahal setelah aplikasi dipindahkan dari desainer ke pengembang.

Tak perlu dikatakan, solusi untuk masalah handoff Sketch-to-IDE telah lama datang. Bukannya tim perangkat lunak tidak tahu bagaimana berkolaborasi atau berkomunikasi dengan baik satu sama lain. Hanya saja sistem dan strategi mereka yang berbeda membuat transisi dari satu tim ke tim lain menjadi kikuk, memakan waktu, dan sarat kesalahan.

Hari ini, kita akan melihat mengapa ini terjadi dan bagaimana agensi Anda dapat memperbaiki masalah dengan dua plugin dan platform cloud prototyping dari Indigo.Design.

Di Mana Kesalahan Handoff Desainer-Pengembang?

Pertama, yang harus benar-benar kita tanyakan adalah:

Mengapa handoff desainer-pengembang menjadi masalah seperti itu?

Nick Babich baru-baru ini menulis tentang bagaimana desainer berusaha keras untuk menciptakan solusi digital yang diukur dengan sempurna dan dibuat secara konsisten. Tetapi sistem desain tidak dengan lancar menerjemahkan ke sistem pengembangan.

Semakin banyak yang dilakukan desainer terhadap sebuah antarmuka, semakin mereka harus benar-benar berkomunikasi dengan pengembang. Jadi, tidak cukup hanya dengan menyerahkan file desain Sketch dan membiarkan pengembang menjalankannya. Desainer harus menyediakan spesifikasi desain yang menjelaskan bagaimana semua bagian yang bergerak perlu ditata, diberi jarak, ditata, diwarnai, digunakan, dan seterusnya.

Ini adalah satu-satunya cara untuk memastikan bahwa suatu aplikasi pada akhirnya menghasilkan piksel yang sempurna. Meski begitu, masih membutuhkan banyak implementasi dari pihak pengembang begitu mereka berada di dalam IDE mereka.

Seperti yang dapat Anda bayangkan, seluruh proses ini membutuhkan banyak waktu untuk dilakukan oleh seorang desainer. Namun tanpa spesifikasi desain, pengembang akhirnya harus memainkan permainan tebak-tebakan yang berisiko.

Tidak hanya itu, pengembang biasanya tidak terbiasa membuat kode dengan HTML dan CSS, yang merupakan pekerjaan yang membosankan dan hanya mewakili UI. Ada lebih banyak kode di balik layar yang membuat aplikasi web berfungsi dan tidak semua pengembang mahir atau tertarik untuk belajar menulis markup UI. Ketika mereka dipaksa ke posisi ini, kurva pembelajaran yang curam menambah lebih banyak waktu untuk proyek dan pengerjaan ulang dan debugging yang dihasilkan membuat biaya melonjak di luar kendali.

Jadi, sungguh, penyerahan desainer-pengembang telah menjadi masalah waktu siapa yang bisa kita buang?

“

Apakah desainer yang harus membuat garis ulang semuanya sehingga pengembang tahu bagaimana mengubah desain menjadi kenyataan?

Atau:

Apakah pengembang yang harus melihat desain, mengukur secara manual semua yang ada di layar dan berharap mereka mendapatkan semua spesifikasi dengan benar hanya dengan melihatnya?

Tidak ada yang menang dalam kedua skenario. Dan Anda akan menggerogoti margin keuntungan Anda dalam prosesnya.

Mungkin ada beberapa agensi yang percaya bahwa memaksa desainer dan pengembang untuk bekerja di platform yang sama adalah solusi terbaik. Dengan begitu, tidak perlu melakukan semua terjemahan atau interpretasi ini selama handoff dari Sketch ke Visual Studio Code. Namun hal itu sering mengakibatkan terhambatnya kreativitas di pihak perancang atau terhambatnya kemampuan untuk membangun solusi perangkat lunak yang efektif di pihak pengembang.

Jadi, apa jawabannya?

Tingkatkan Handoff Desainer-Pengembang Dengan Indigo.Design

Ini tidak seperti Indigo.Design adalah platform pertama yang mencoba memecahkan masalah handoff untuk tim perangkat lunak. InVision dan Zeplin telah menawarkan solusi mereka sendiri.

Masing-masing platform ini telah membuat spesifikasi visual lebih mudah diakses oleh pengembang sekaligus meningkatkan efisiensi tim perancang-pengembang. Secara khusus:

• Desainer tidak perlu menandai UI lagi karena platform menangani garis merah.
• Pengembang dapat mengekstrak spesifikasi desain secara manual tanpa bantuan desainer.

Meskipun demikian, dengan platform seperti InVision dan Zeplin, pengembang masih harus memeriksa setiap elemen dan mengkodekannya secara manual berdasarkan spesifikasi yang diekstraksi. Platform ini juga belum menciptakan jembatan yang mulus antara Sketch dan Visual Studio Code.

Jadi, jika desainer dan pengembang ingin bekerja seefisien mungkin satu sama lain, Indigo.Design telah mengembangkan jawaban untuk masalah mereka:

Langkah 1: Desain dalam Sketsa

Hanya ada satu hal tentang fase ini yang harus diubah untuk desainer. Aplikasi, halaman, dan alur akan tetap dirancang seperti biasa dalam Sketch, menggunakan komponen dari Kit UI Indigo.Design.

Namun, tidak ada lagi kebutuhan untuk mengkompilasi garis merah atau spesifikasi untuk aplikasi lagi. Indigo.Design menanganinya untuk Anda.

Untuk memanfaatkan ini, desainer Anda harus membuang sistem prototipe apa pun yang mereka gunakan sebelumnya. Dengan sistem baru yang efisien dan bebas kesalahan ini, desainer Anda dapat dengan mudah memasukkan desain mereka ke cloud menggunakan plugin Indigo.Design.

Ini dapat diakses di bawah Plugins menu > Indigo.Design > Publish Prototype :

Perancang tidak perlu mengekspor file dan mengunggah ke sistem lain agar klien dapat meninjau atau bekerja sama dengan pengembang. Mereka harus tetap berada di tempat mereka untuk mempublikasikan prototipe.

Hanya perlu sekitar satu menit untuk menyelesaikan prosesnya juga. Perancang kemudian diberikan tautan ke cloud yang dapat mereka bagikan dengan klien dan orang lain untuk meninjau dan mengomentari prototipe.

Langkah 2: Bekerja di Indigo.Design Cloud

Untuk memasukkan orang lain ke cloud itu mudah. Tautan yang diberikan akan membawa mereka ke cloud pengalaman tempat desain dapat ditinjau:

Sangat mudah untuk meninggalkan komentar di atas desain juga. Yang harus dilakukan pengguna adalah membuka panel Komentar, menjatuhkan pin, dan melampirkan komentar mereka ke sana:

Ada lebih banyak perangkat lunak kolaborasi ini daripada itu. Prototipe juga dapat diedit dari cloud.

Untuk mengakses ini, perancang, pengembang, dan siapa pun dengan akses grup akan menemukan proyek dari pustaka prototipe:

Klik “Edit Prototipe” untuk masuk ke editor Indigo.Design:

Setelah layar dipilih, perancang dapat menambahkan hotspot untuk membuat interaksi baru di aplikasi.

Anda juga dapat menggunakan editor Indigo.Design untuk memeriksa spesifikasi UI aplikasi:

Melayang di atas elemen mengungkapkan spesifikasi jarak relatif. Mengklik elemen mengungkapkan lebih banyak detail:

Pengembang juga dapat mengedit atau menyalin CSS yang ditulis dan dikeluarkan dengan rapi dari panel ini juga. (Meskipun mereka tidak harus melakukannya, seperti yang akan saya jelaskan di langkah berikutnya.)

Lihat apa yang saya maksud tentang menghemat waktu desainer dalam menghasilkan spesifikasi? Hanya dengan memasukkan desain ini ke dalam cloud Indigo.Design, spesifikasi dibuat secara otomatis.

Langkah 3: Bangun Kode Visual Studio

Sekarang, katakanlah desain Anda cukup baik untuk dikembangkan. Pemindahan prototipe Indigo.Design ke Visual Studio Code semudah memindahkan dari Sketch.

Ambil tautan cloud asli yang disediakan oleh plugin Indigo.Design di Sketch. Jika Anda tidak memilikinya lagi, tidak apa-apa. Anda dapat mengambilnya dari layar perpustakaan di Indigo.Design:

Yang harus dilakukan pengembang sekarang adalah menginstal ekstensi Indigo.Design Code Generator. Inilah yang memungkinkan Visual Studio Code untuk berbicara langsung dengan Indigo.Design untuk mengambil prototipe.

Setelah ekstensi disiapkan, pengembang akan melakukan hal berikut:

Buka shell aplikasi yang sudah dikembangkan. Kemudian, luncurkan Generator Kode Indigo.Design. Di sinilah Anda akan memasukkan tautan cloud:

Ini akan mengungkapkan pop-up dengan desain aplikasi yang hidup di cloud serta komponen individu yang terdiri darinya.

Pengembang memiliki opsi untuk menghasilkan kode untuk semua komponen aplikasi atau untuk pergi ke komponen demi komponen, hanya memeriksa yang mereka butuhkan. Ini sangat membantu jika aplikasi sedang berjalan dan pengembang hanya perlu mengimpor komponen baru ke dalam VSC.

Dengan mengklik "Hasilkan Aset Kode", komponen yang dipilih akan ditambahkan ke Angular sebagai HTML dan CSS yang dapat dibaca dan semantik.

Pengembang sekarang tidak perlu khawatir lagi dalam hal membangun kembali gaya atau mengonfigurasi spesifikasi lainnya. Sebaliknya, mereka dapat menghabiskan waktu mereka membangun fungsionalitas bisnis dan benar-benar menyempurnakan produk.

Catatan Tentang Proses Ini

Sangat penting untuk menunjukkan bahwa alur kerja Sketch – cloud – Visual Studio Code ini tidak hanya bekerja dengan iterasi pertama dari sebuah desain. Pengembang dapat membangun sementara desainer bekerja melalui umpan balik dengan klien atau studi kegunaan dengan pengguna — sesuatu yang telah diperhitungkan oleh Indigo.Design.

Jadi, katakanlah perancang memindahkan UI formulir masuk melalui Indigo.Design dan pengembang membuat kode untuk membuat semuanya bergerak.

Saat mengerjakan formulir, pengembang menerapkan beberapa kode otentikasi dalam file TypeScript.

Namun, sementara itu, perancang menerima pesan dari klien, memberi tahu mereka bahwa Login Universal dengan Google yang baru perlu diterapkan. Yang berarti UX harus berubah.

Saat pembaruan sudah siap dan prototipe disinkronkan ke Indigo.Design, perancang mengirim pesan kepada pengembang untuk memberi tahu mereka tentang perubahan tersebut. Jadi, pengembang meluncurkan Visual Studio Code Generator sekali lagi. Namun, saat membuat ulang layar login, mereka memilih "Jangan Ganti" pada file TypeScript. Dengan cara ini, mereka dapat mempertahankan kode yang mereka tulis sambil mengimpor HTML dan CSS baru secara bersamaan.

Pengembang kemudian dapat membuat penyesuaian yang diperlukan berdasarkan desain yang diperbarui.

Bungkus

Indigo.Design telah secara efektif menciptakan handoff yang efisien dan bebas bug untuk desainer yang bekerja di Sketch dan pengembang yang bekerja di Visual Studio Code.

Desainer tidak membuang waktu mendesain di satu platform dan membuat prototipe di platform lain, menyusun spesifikasi desain, atau berurusan dengan ekspor file. Pengembang tidak membuang waktu untuk mencoba membuat ulang maksud desain dari file statis.

Seperti yang dikatakan Jason Beres, Wakil Presiden Senior Pengembangan Produk untuk Indigo.Design:

Dengan pembuatan kode Indigo.Design, semua bug ini 100% dihindari. Tidak hanya semangat desain yang dipertahankan, tetapi HTML dan CSS pixel-perfect dibuat sehingga pengembang tidak berada dalam posisi yang tidak menguntungkan karena harus mencocokkan desain secara manual.

Dan dengan mengatasi kekusutan teknis dalam alur kerja dan penyerahan desainer-pengembang, agensi Anda akan sangat mengurangi biaya pengerjaan ulang dan debugging. Anda juga akan meningkatkan keuntungan dengan memberikan tim perangkat lunak Anda cara yang lebih efisien dan lebih cepat untuk mendapatkan aplikasi melalui proses dan dalam kondisi piksel sempurna.