Sketch dan Zeplin: Membantu Designers dan Developers Berkolaborasi

Kolaborasi antara designers dan developers sangat penting untuk keberhasilan proyek web, dan ini merupakan ukuran keberhasilan sebuah tim. Sementara berbagi ruang kerja yang sama tidak ternilai harganya, memiliki sumber kebenaran online yang membantu kolaborasi ini sangat membantu. Dalam artikel ini kita akan melihat Zeplin dan bagaimana cara kerjanya dikombinasikan dengan Sketch untuk menyatukan tim.

Kata hati tentang Sketch

Sekitar enam bulan yang lalu, ketika saya pindah pekerjaan, saya didorong untuk mencoba Sketch. Hal hebat tentang perangkat kunak ini adalah bahwa ia secara khusus berfokus pada desain antarmuka dan ikon; dari artboard denfan ukuran tertentu untuk web, seluler, dan ikon, hingga fitur yang membantu meningkatkan proses desain, Sketch harus dimiliki oleh para designers.

Selain itu, kurva pembelajaran jika Anda pengguna Photoshop atau Ilustrator menengah hampir tidak ada.

Berikut beberapa contoh yang memberi Anda ikhtiar tentang yang dapat Anda lakukan dengan sketch:

1. Buat Halaman untuk mengatur konten Anda (misalnya: desain ponsel, desain desktop) dan Artboards di dalam halaman ini untuk memalsukan produk Anda (misalnya: membuat perjalanan pelanggan selangkah demi selangkah).
2. Gunakan Inspector untuk menemukan semua detail tentang objek tertentu (ukuran posisi, warna, gaya font, opasitas, dan banyak lagi).
3. Menggunakan fitur ekspor ekspor Artboards atau objek individu ke format file tertentu (PNG, JPG, PDF, dan sebagainya).

"Saya dev, saya belum pernah menggunakan Sketch!"

Dalam beberapa tahun terakhir yang designers telah belajar untuk berkolaborasi antara mereka sendiri yang menggunakan alat bantu seperti InVision, tetapi platform ini masih kekurangan fitur yang memungkinkan untuk desain cepat selesai untuk tim development.

Kami tidak meminta para developers untuk mahir dalam alat yang sama designers gunakan mockup produk. Yang mengatakan, tidak harus kita memerlukan designers untuk pindah dari apa yang mereka lakukan yang terbaik: Desain! Membangun sebuah "dokumen spesifikasi" setiap kali mereka menyerahkan desain yang jauh dari menjadi "agile", dan dapat berarti banyak membuang-buang waktu antara menyerahkan desain dan harus iterate jika perlu.

Zeplin

Ini adalah dimana Zeplin memasuki adegan.

Zeplin adalah alat kolaborasi untuk UI designers dan developers front end. Ini melampaui alur kerja desain dan membantu tim dengan desain cepat selesai.

Hal ini memungkinkan designers untuk meng-upload wireframes mereka atau rancangan visual yang lurus dari sketch dan menambahkannya ke folder proyek di Zeplin. Yang terbaik? Anotasi akan secara otomatis ditambahkan ke desain (ukuran, warna, margin dan bahkan CSS saran untuk elemen tertentu) yang akan meninggalkan Anda dengan repository online yang seluruh tim dapat berkontribusi.

"Zeplin bekerja sangat baik sebagai sumber tunggal kebenaran, ketika digunakan sebagai demikian.

Juga, karena tersedia sebagai aplikasi mandiri serta aplikasi web, Anda dapat mengaksesnya pretty much manapun. Membuatnya mudah untuk memeriksa desain dan hal-hal seperti jarak, ukuran, warna, dll"– Daniel Setas Pontes, Javascript developers @NOW TV, Sky

Mengekspor desain dari Sketch ke Zeplin

Zeplin bekerja sebagai plugin dalam Sketch, sehingga meng-upload desain hanya satu klik.

Berikut adalah cara untuk memulai sebuah proyek:

1. Download Zeplin (mac) & menginstal. Developers tidak perlu menjalankan OS X karena mereka hanya perlu mengakses alat berbasis web untuk mendapatkan akses ke konten.
2. Membuat proyek-proyek.
3. Pilih platform yang telah Anda rancang.
4. Label proyek (pastikan Anda memilih nama yang akrab bagi seluruh tim).

Dengan Sketch, pilih objek individu dan membuat mereka diekspor. Ini akan memungkinkan Anda dev team untuk mengekspor setiap elemen kemudian dari dalam Zeplin. Berikut adalah cara kerjanya:

1. Selanjutnya, pilih artboards yang ingin Anda upload ke Zeplin.
2. Pergi ke Plugins > Zeplin > Export Selected Artboards.
3. Pilih proyek yang Anda ingin upload desain Anda, lalu klik Import.

Bekerja dengan Zeplin

Sekali di Zeplin, Anda dapat menavigasi antara proyek dan dengan mudah menjelajahi semua komponen di dalamnya. Mencari tahu tentang spesifikasi dari elemen tertentu juga intuitif; memilih elemen yang Anda inginkan, maka semua informasi yang relevan akan muncul di kolom sisi kanan.

Developers: di sini adalah bagaimana cara bekerja, setelah Anda sudah membuka alat berbasis web dan masuk:

1. Pilih objek yang Anda inginkan untuk diperiksa.
2. Lihatlah kolom sisi kanan untuk informasi rinci seperti gaya font, warna, dan sebagainya (informasi akan ditampilkan menurut objek yang Anda pilih).
3. Salin CSS disarankan.

Jika tim desain diizinkan untuk unsur-unsur ekspor ketika mengimpor desain ke Zeplin, tim development harus mampu mengekspor aset individu. Aset akan tersedia untuk di-download dalam SVG format dan tiga ukuran PNG yang berbeda.

1. Di sini Anda dapat menambahkan catatan dan komentar untuk desain.
2. Di sini Anda dapat menyalin dan berbagi link proyek, bahkan mungkin mengintegrasikan dengan tim kendur saluran untuk mendapatkan pemberitahuan atau mengundang anggota tim untuk berkolaborasi!

Mengapa tim Anda harus membuat bergerak

Bekerja dengan Zeplin memiliki banyak keuntungan, berikut adalah beberapa contoh:

• Anda akan menghindari membuat dokumen spesifikasi; sesuatu yang tidak mudah untuk di perbarui.
• Membuat desain beranotasi instan dengan semua informasi yang relevan untuk para developers dan designers lain.
• Anda dapat membuat desain yang diekspor, sehingga developers mendapatkan akses cepat ke aset individu.
• Membuat sebagai banyak proyek yang Anda inginkan, kemudian meng-upload dan update dengan hanya beberapa klik.
• Membuat gaya panduan yang akan membantu tim desain yang tetap konsisten.
• Mengambil keuntungan dari integrasi Slack, langsung notifiying tim Anda setiap kali ada update.

Cobalah!

Bekerja dengan Sketch dan Zeplin adalah cara yang bagus untuk designers untuk berkolaborasi secara harmonis dengan developers. Tim saya suka bekerja dengan cara ini-saya akan senang mendengar pikiran dan pengalaman bekerja dengan alat ini!

Link yang berguna

• Sketch plugin
• Sketch tutorial pada Envato Tuts +
• Sketch website template di Envato Market
• @zeplin_io di Twitter
  
• zeplin.io