Plugin Zeplin Sketch – Jembatan Alur Kerja Antara Desain dan Rekayasa

Zeplin adalah alat kolaborasi yang kuat yang menjembatani kesenjangan antara desainer dan pengembang dengan menciptakan ruang yang terhubung untuk tim produk.

Kenapa Zeplin?

Bagian penting dari setiap teka-teki pengembangan produk adalah tempat di mana desain bertemu dengan pengembangan. Ketika sebuah desain siap untuk pindah ke fase pengembangan ("handoff"), para insinyur membutuhkan cara untuk memahaminya dan menerjemahkannya ke dalam kode.

Zeplin memfasilitasi handoff dengan mengambil desain dari Sketch, Adobe XD, Figma, dan Photoshop dan mengekspornya ke dalam format yang dapat dengan mudah menghasilkan cuplikan kode, panduan gaya, spesifikasi, dan aset.

Ucapkan selamat tinggal pada hari-hari "redlining." Zeplin berfokus murni pada peningkatan kolaborasi antara desainer produk dan tim pengembangan dan digunakan oleh tim produk terkemuka di Airbnb, Dropbox, Pinterest, Microsoft, dan banyak lainnya.

Dengan Zeplin tidak perlu menulis ukuran atau margin secara manual, mengetik salinan, mengekspor ikon. Ini sangat mengagumkan dan menghemat banyak waktu untuk fokus pada eksplorasi desain. – Alex Potrivaev, Desainer Produk @Intercom

Dalam salah satu artikel kami sebelumnya, Desainer Toptal Micah Bowers berbicara tentang pentingnya memiliki sistem bahasa desain standar untuk berkomunikasi secara efisien di berbagai fungsi tim produk yang mengerjakan produk digital.

Dengan membuat versi aset desain, membuat pustaka komponen, dan membuat panduan gaya hidup, proyek yang di-porting ke Zeplin dapat berfungsi sebagai "sumber tunggal kebenaran" untuk tim produk.

Kami pada dasarnya menganggap Zeplin sebagai sumber kebenaran kami untuk berkolaborasi dengan Teknik. Jika tidak di Zeplin, itu tidak resmi. – Jason Stoff, Desainer Senior, Produk Digital @Starbucks

Batasan Zeplin

Meskipun Zeplin memiliki banyak fitur bermanfaat, itu tidak sempurna. Zeplin menawarkan paket gratis, tetapi di bawah paket itu, terbatas pada satu proyek. Saat mendesain untuk iOS dan Android, dua proyek terpisah akan diperlukan. Pada saat itu, rencana berbayar akan dibutuhkan.

Setelah alur bekerja dengan Zeplin dan Sketch (atau aplikasi lain yang disebutkan di atas) dipahami, alur kerja menjadi mudah. Namun, Zeplin memiliki sedikit kurva pembelajaran yang membutuhkan waktu dan perhatian. Untuk melihat gambaran umum dan mempelajari lebih lanjut tentang cara menggunakannya, lihat video demo Zeplin di bawah ini:

Bekerja dengan Sketch dan Zeplin: Langkah dan Tip

1. Memulai Zeplin.

• Buat akun Zeplin jika Anda belum memilikinya. Anda dapat mendaftar secara gratis: https://app.zeplin.io/register
• Unduh aplikasi desktop Zeplin untuk Mac atau Windows.
• Unduh plugin Zeplin untuk Sketch.

2. Siapkan file Sketch Anda.

• Sekarang setelah Sketch dan Zeplin siap digunakan, kita akan menyiapkan file Sketch untuk ekspor mulus ke Zeplin.
• Di Sketch, atur aset dan lapisan Anda menggunakan konvensi penamaan yang konsisten. Jika berkolaborasi dengan desainer lain, tentukan konvensi yang sesuai untuk semua orang di tim Anda. Bergantung pada jenis proyek apa ini (misalnya, iOS, Android, atau web), Zeplin akan secara otomatis menyesuaikan konvensi penamaan aset, menjadikan mengekspornya sebagai proses satu langkah.
• Buat simbol untuk elemen dan aset umum dalam Sketch. Ini akan memungkinkan Anda untuk mengatur komponen di Zeplin.
• Simpan warna ke dalam palet dan font "Warna Dokumen" Anda sebagai "Gaya Teks" di file Sketsa Anda. Ini akan muncul di panduan gaya yang dibuat Zeplin Anda.

3. Jadikan aset dapat diekspor di Sketch.

• Ini adalah langkah yang sangat penting. Setelah aset Anda dikelompokkan ke dalam simbol, buka halaman Simbol di file Sketch Anda.
• Klik pada grup di dalam simbol, seperti "ic-menu" (ikon folder)
• Dengan grup yang disorot, cari tindakan "Jadikan Dapat Diekspor" di sisi kanan bawah "Inspektur" Anda di Sketch dan klik opsi ini. Ikon irisan sekarang akan muncul di sebelah nama grup Anda.
• Langkah ini akan memungkinkan para insinyur untuk mengekspor aset langsung dari Zeplin.

4. Buat proyek baru di Zeplin.

• Pilih jenis proyek yang sedang Anda bangun. Perhatikan bahwa Anda harus memiliki proyek terpisah untuk iOS dan Android, meskipun desainnya identik. Ini karena Zeplin akan menghasilkan kode yang berbeda berdasarkan jenis proyek.
• Pilih resolusi proyek yang cocok dengan artboard Sketch Anda (misalnya, 1x, 320px).

5. Ekspor artboards Sketch ke Zeplin.

• Dari Sketch, sorot semua artboard yang ingin Anda ekspor ke Zeplin.
• Buka Plugins > Zeplin > Export Selected… atau tekan E pada keyboard Anda.
• Selanjutnya, kita akan mengekspor Simbol dari Sketch. Buka halaman Simbol di Sketsa dan sorot semua papan seni. Ekspor ke Zeplin.

6. Atur proyek di Zeplin.

• Sekarang setelah artboard Sketsa Anda ada di Zeplin, mari atur karya seni menjadi beberapa bagian.
• Dari tampilan Dasbor proyek Anda, pilih layar serupa untuk dikelompokkan ke dalam kategori. Setelah disorot, klik kanan dan pilih "Bagian Baru dari Pilihan." Ulangi ini sampai file Zeplin Anda diatur dengan benar.

7. Memanfaatkan komponen di Zeplin.

Mungkin salah satu fitur Zeplin yang paling berguna adalah kemampuan untuk mengatur aset ke dalam pustaka komponen. Ini penting ketika desain proyek dikembangkan untuk berbagai platform oleh anggota tim yang berbeda. Penyatuan desain sangat penting, seperti yang dijelaskan oleh desainer Airbnb Karri Saarinen dalam Membangun Bahasa Visual:

Sistem desain terpadu sangat penting untuk membangun lebih baik dan lebih cepat; lebih baik karena pengalaman yang kohesif lebih mudah dipahami oleh pengguna kami, dan lebih cepat karena memberi kami bahasa yang sama untuk digunakan.

• Pilih tab “Styleguide” di bagian tengah atas Zeplin (di sebelah “Dashboard”).
• Setelah di tab "Styleguide", pilih tab sekunder, "Komponen." Di sini, Anda akan melihat semua simbol Anda diekspor dari Sketch.
• Atur ini menjadi beberapa bagian seperti "Ikon," "Gambar," "Elemen Umum," dll. Anda dapat mempelajari lebih lanjut tentang tab Komponen panduan gaya proyek Anda di Zeplin di sini.

8. Ekspor panduan gaya dari Zeplin.

• Dari tampilan Dasbor proyek Zeplin Anda, temukan tombol "Bagikan" di sudut kanan atas aplikasi.
• Pilih "Bagikan", lalu temukan "Adegan" di bagian bawah menu. Pilih "Aktifkan" dan kemudian "Buka." Ini akan menghasilkan panduan gaya dinamis untuk proyek Anda. Bagikan URL dengan tim Anda.

9. Beri anotasi pada desain Anda di Zeplin.

• Menambahkan catatan ke desain itu mudah dengan Zeplin. Dari tampilan layar yang mendetail, pilih ikon tambahkan catatan dan sematkan catatan Anda ke komponen.
• Anda dapat menambahkan catatan dengan menahan Cmd ( Ctrl untuk pengguna Windows dan Linux) dan mengklik di mana saja di layar.
• Anda bahkan dapat menyebutkan rekan satu tim lain dengan “@” dan mereka akan menerima pemberitahuan.

10. Berkolaborasi, berbagi, dan menggunakan kontrol versi.

• Sekarang setelah file Zeplin Anda siap untuk dibagikan dengan tim Anda, undang pengguna melalui alamat email mereka, atau kirimkan URL proyek kepada mereka.
• Terus perbarui file Zeplin Anda dengan mengekspor artboards dari Sketch.
• Zeplin akan secara otomatis mengontrol versi file Anda dan Anda dapat terus berkolaborasi dengan anggota tim menggunakan "sumber kebenaran" yang dinamis ini.

Kesimpulan

Menciptakan alur kerja yang dinamis, terorganisir, dan kolaboratif antara tim desain dan pengembangan sangat penting untuk membangun produk digital yang hebat. Memiliki jembatan alur kerja seperti Zeplin memberdayakan desainer untuk membubuhi keterangan layar dan memudahkan fase handoff yang sering ditakuti dengan spesifikasi yang lengkap dan tepat.

Fleksibilitas untuk memperbarui aset secara dinamis dari satu sumber pusat, seperti simbol di Sketch yang diekspor ke komponen di Zeplin, menciptakan fleksibilitas yang luar biasa. Insinyur kemudian dapat dengan mudah mengekspor aset ke dalam kode asli, menghemat waktu dan kebosanan.

Sementara UX yang bijaksana dan desain yang indah secara estetika adalah akar dari produk yang sukses, proses untuk mendapatkan desain itu ke tangan pengguna sangat penting.

Desainer yang ingin menjadi efisien dan mengandalkan satu "sumber kebenaran" harus mempertimbangkan alur kerja Sketch to Zeplin yang diuraikan di atas. Kekuatan di balik hubungan perangkat lunak yang kuat antara kedua alat desain ini akan membantu desainer dan tim pengembangan mencapai garis akhir dengan lebih mudah dan memuaskan.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Adobe XD vs. Sketch – Alat UX Mana yang Tepat untuk Anda?
• Cara Membangun Kerangka Desain yang Efektif (Termasuk Kerangka UI Sketsa Gratis)
• Hal-Hal yang Mungkin Tidak Anda Ketahui Tentang Tipografi di Sketsa
• Mengenal Pengembangan Plugin Sketch
• Membuat Ilustrasi yang Membingungkan Pikiran dengan Sketsa dan Looper dalam Waktu Singkat