Zeplin Sketch Plugin – Tasarım ve Mühendislik Arasındaki İş Akışı Köprüsü

Zeplin, ürün ekipleri için bağlantılı bir alan oluşturarak tasarımcılar ve geliştiriciler arasındaki boşluğu dolduran güçlü bir işbirliği aracıdır.

Neden Zeplin?

Herhangi bir ürün geliştirme bulmacasının önemli bir parçası, tasarımın geliştirme ile buluştuğu yerdir. Bir tasarım geliştirme aşamasına (“devreden”) geçmeye hazır olduğunda, mühendisler onu anlamak ve koda çevirmek için bir yola ihtiyaç duyarlar.

Zeplin, Sketch, Adobe XD, Figma ve Photoshop'tan tasarımlar alarak ve bunları kolayca kod parçacıkları, stil kılavuzları, teknik özellikler ve varlıklar oluşturabilecek bir formata aktararak aktarımı kolaylaştırır.

“Kırmızı çizgi” günlerine veda edin. Zeplin, yalnızca ürün tasarımcıları ve geliştirme ekipleri arasındaki işbirliğini geliştirmeye odaklanmıştır ve Airbnb, Dropbox, Pinterest, Microsoft ve diğer birçok şirketin önde gelen ürün ekipleri tarafından kullanılmaktadır.

Zeplin ile boyutları veya kenar boşluklarını manuel olarak yazmaya, kopyayı yazmaya, simgeleri dışa aktarmaya gerek yoktur. Tek kelimeyle harika ve tasarım araştırmalarına odaklanmak için çok zaman kazandırıyor. – Alex Potrivaev, Ürün Tasarımcısı @Intercom

Geçmiş yazılarımızdan birinde Toptal Tasarımcısı Micah Bowers, dijital ürünler üzerinde çalışan ürün ekiplerinin çeşitli işlevleri arasında verimli bir şekilde iletişim kurmak için standartlaştırılmış bir tasarım dili sistemine sahip olmanın öneminden bahsetmişti.

Tasarım varlıklarının versiyonlarını oluşturarak, bileşen kitaplıkları oluşturarak ve yaşam tarzı kılavuzları oluşturarak Zeplin'e aktarılan bir proje, ürün ekipleri için “tek gerçek kaynağı” olarak hizmet edebilir.

Temel olarak Zeplin'i Mühendislik ile işbirliği yapmak için gerçek kaynağımız olarak görüyoruz. Zeplin'de değilse, resmi değildir. – Jason Stoff, Kıdemli Tasarımcı, Dijital Ürünler @Starbucks

Zeplin Sınırlamaları

Zeplin birçok yararlı özelliğe sahip olsa da mükemmel değildir. Zeplin ücretsiz bir plan sunuyor, ancak bu plan kapsamında tek bir projeyle sınırlı. Hem iOS hem de Android için tasarım yaparken iki ayrı proje gerekecek. Bu noktada, ücretli bir plana ihtiyaç duyulacaktır.

Zeplin ve Sketch (veya yukarıda bahsedilen diğer uygulamalar) ile çalışma akışı bir kez anlaşıldığında, iş akışı kolaylaşıyor. Ancak, Zeplin biraz zaman ve dikkat gerektiren bir öğrenme eğrisine sahiptir. Genel bir bakışı görmek ve nasıl kullanılacağı hakkında daha fazla bilgi edinmek için aşağıdaki Zeplin demo videosuna bakın:

Sketch ve Zeplin ile Çalışmak: Adımlar ve İpuçları

1. Zeplin'i kullanmaya başlayın.

• Henüz bir Zeplin hesabınız yoksa bir Zeplin hesabı oluşturun. Ücretsiz kayıt olabilirsiniz: https://app.zeplin.io/register
• Mac veya Windows için Zeplin masaüstü uygulamasını indirin.
• Sketch için Zeplin eklentisini indirin.

2. Sketch dosyanızı hazırlayın.

• Artık Sketch ve Zeplin kullanıma hazır olduğuna göre, Sketch dosyamızı Zeplin'e sorunsuz dışa aktarma için ayarlayacağız.
• Sketch'te, tutarlı adlandırma kurallarını kullanarak varlıklarınızı ve katmanlarınızı düzenleyin. Diğer tasarımcılarla işbirliği yapıyorsanız, ekibinizdeki herkes için geçerli olan kuralları belirleyin. Bunun ne tür bir proje olduğuna bağlı olarak (örneğin, iOS, Android veya web), Zeplin varlıkların adlandırma kurallarını otomatik olarak ayarlayacak ve bunları dışa aktarmayı tek adımlı bir süreç haline getirecektir.
• Sketch içinde ortak öğeler ve varlıklar için semboller oluşturun. Bu, Zeplin'de bileşenleri kurmanıza izin verecektir.
• Renkleri "Belge Renkleri" paletinize ve yazı tiplerini Sketch dosyanızda "Metin Stilleri" olarak kaydedin. Bunlar, Zeplin tarafından oluşturulan stil rehberinizde görünecektir.

3. Sketch'te varlıkları dışa aktarılabilir yapın.

• Bu çok önemli bir adım. Varlıklarınız semboller halinde gruplandırıldıktan sonra, Sketch dosyanızdaki Semboller sayfasını açın.
• “ic-menü” (klasör simgesi) gibi bir sembol içindeki bir gruba tıklayın
• Grup vurgulanmış durumdayken, Sketch'te “Müfettiş”inizin sağ alt tarafındaki “Dışa Aktarılabilir Yap” eylemini bulun ve bu seçeneğe tıklayın. Artık grubunuzun adının yanında bir dilim simgesi görünmelidir.
• Bu adım, mühendislerin varlıkları doğrudan Zeplin'den dışa aktarmasına olanak tanır.

4. Zeplin'de yeni bir proje oluşturun.

• İnşa etmekte olduğunuz proje türünü seçin. Tasarımlar aynı olsa bile iOS ve Android için ayrı projeleriniz olması gerektiğini unutmayın. Bunun nedeni, Zeplin'in projenin türüne göre farklı kodlar üretmesidir.
• Sketch çalışma yüzeylerinizle eşleşen proje çözünürlüğünü seçin (örneğin, 1x, 320px).

5. Sketch çalışma yüzeylerini Zeplin'e aktarın.

• Sketch'ten, Zeplin'e dışa aktarmak istediğiniz tüm çalışma yüzeylerini vurgulayın.
• Eklentiler > Zeplin > Seçileni Dışa Aktar… seçeneğine gidin veya klavyenizde ⌃⌘E tuşuna basın.
• Ardından, Sketch'ten Sembolleri dışa aktaracağız. Sketch'te Semboller sayfasını açın ve tüm çalışma yüzeylerini vurgulayın. Zeplin'e aktarın.

6. Projeyi Zeplin'de düzenleyin.

• Artık Sketch çalışma yüzeyleriniz Zeplin'de olduğuna göre, resmi bölümlere ayıralım.
• Projenizin Pano görünümünden, kategoriler halinde gruplandırmak için benzer ekranları seçin. Vurgulandıktan sonra sağ tıklayın ve “Seçimden Yeni Bölüm”ü seçin. Zeplin dosyanız düzgün bir şekilde organize olana kadar bunu tekrarlayın.

7. Zeplin'deki bileşenleri kullanın.

Belki de Zeplin'in en kullanışlı özelliklerinden biri, varlıkları bileşen kitaplıklarında düzenleme yeteneğidir. Bu, bir projenin tasarımları farklı ekip üyeleri tarafından birden fazla platform için geliştirildiğinde önemlidir. Airbnb tasarımcısı Karri Saarinen'in Görsel Dil Oluşturma bölümünde özetlediği gibi, tasarımın birleştirilmesi çok önemlidir:

Daha iyi ve daha hızlı inşa etmek için birleşik bir tasarım sistemi gereklidir; daha iyi çünkü uyumlu bir deneyim kullanıcılarımız tarafından daha kolay anlaşılır ve bize ortak bir dil sağladığı için daha hızlıdır.

• Zeplin'in üst orta kısmındaki ("Gösterge Tablosu"nun yanında) "Stil Kılavuzu" sekmesini seçin.
• "Stil Kılavuzu" sekmesine girdikten sonra ikincil sekme olan "Bileşenler"i seçin. Burada, Sketch'ten dışa aktarılan tüm sembollerinizi göreceksiniz.
• Bunları “Simgeler”, “Görüntüler”, “Ortak Öğeler” vb. bölümler halinde düzenleyin. Zeplin'deki proje stil kılavuzunuzun Bileşenler sekmesi hakkında daha fazla bilgiyi buradan edinebilirsiniz.

8. Stil kılavuzlarını Zeplin'den dışa aktarın.

• Zeplin projenizin Pano görünümünden, uygulamanın sağ üst köşesindeki "Paylaş" düğmesini bulun.
• "Paylaş"ı seçin, ardından menünün altındaki "Sahne"yi bulun. "Etkinleştir"i ve ardından "Aç"ı seçin. Bu, projeniz için dinamik bir stil kılavuzu oluşturacaktır. URL'yi ekibinizle paylaşın.

9. Tasarımlarınıza Zeplin'de açıklama ekleyin.

• Tasarımlara not eklemek Zeplin ile çok kolay. Bir ekranın ayrıntılı görünümünden not ekle simgesini seçin ve notunuzu bir bileşene sabitleyin.
• Cmd (Windows ve Linux kullanıcıları için Ctrl ) tuşunu basılı tutup ekranda herhangi bir yere tıklayarak not ekleyebilirsiniz.
• Hatta diğer takım arkadaşlarından “@” ile bahsedebilirsin ve onlar bir bildirim alacaklar.

10. İşbirliği yapın, paylaşın ve sürüm kontrolünü kullanın.

• Artık Zeplin dosyanız ekibinizle paylaşmaya, kullanıcıları e-posta adresleri aracılığıyla davet etmeye veya onlara proje URL'sini göndermeye hazır olduğuna göre.
• Çalışma yüzeylerini Sketch'ten dışa aktararak Zeplin dosyanızı güncellemeye devam edin.
• Zeplin, dosyalarınızın sürümünü otomatik olarak kontrol edecek ve siz de bu dinamik "gerçeğin kaynağını" kullanarak ekip üyeleriyle işbirliğine devam edebilirsiniz.

Çözüm

Tasarım ve geliştirme ekipleri arasında dinamik, organize ve işbirliğine dayalı bir iş akışı oluşturmak, harika dijital ürünler oluşturmak için çok önemlidir. Zeplin gibi bir iş akışı köprüsüne sahip olmak, tasarımcılara ekranlara açıklama ekleme yetkisi verir ve eksiksiz ve kesin özelliklerle genellikle korkulan devir aşamasını kolaylaştırır.

Zeplin'deki bir bileşene aktarılan Sketch'teki bir sembol gibi varlıkları tek bir merkezi kaynaktan dinamik olarak güncelleme esnekliği muazzam bir esneklik yaratır. Mühendisler daha sonra varlıkları kolayca yerel koda aktararak zamandan ve can sıkıntısından tasarruf edebilirler.

Başarılı bir ürünün temelinde düşünceli UX ve estetik açıdan güzel tasarımlar yer alırken, bu tasarımın kullanıcıların eline geçme süreci kritik öneme sahiptir.

Verimli olmak ve tek bir "gerçek kaynağına" güvenmek isteyen tasarımcılar, yukarıda ana hatları verilen Sketch to Zeplin iş akışını dikkate almalıdır. Bu iki tasarım aracı arasındaki güçlü yazılım ilişkisinin arkasındaki güç, tasarımcıların ve geliştirme ekiplerinin bitiş çizgisine daha kolay ve memnuniyetle ulaşmasına yardımcı olacaktır.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Adobe XD ve Sketch - Hangi UX Aracı Size Uygun?
• Etkili Bir Tasarım Çerçevesi Nasıl Oluşturulur (Ücretsiz Çizim Kullanıcı Arayüzü Çerçevesi İçerir)
• Sketch'te Tipografi Hakkında Bilmediğiniz Şeyler
• Sketch Plugin Geliştirme ile Tanışma
• Kısa Zamanda Sketch ve Looper ile Akıl almaz İllüstrasyonlar Oluşturma