Adobe XD (Experience Design) ile Zeplin Entegrasyonu

237

Experience Design üzerinde hazırladığınız GUI tasarımlarınızı farklı ortam veya platformlarda çalışan yazılımcı ve geliştirme ekipleri ile paylaşabilirsiniz. İşin güzel yanlarından birisi de seçili nesnelerin CSS kodlarının Zeplin üzerinden alınabilmesi. Bu sayede tasarımdan koda geçiş için hiç de fena olmayan bir yardımcı haline dönüşüyor.

Zeplin

Adobe XD, Photoshop CC, Figma veya SketchApp tasarımlarınızı web üzerinde ekip veya müşterilerinize sunmanıza, geri bildirimler almanıza yarayan bir araç. Her ne kadar UI yazılım araçlarının kendi içinde bu işi yapabilecek bir paylaşım aracı olsa da Zeplin kullanımı sadece paylaşım değil geniş eklenti kütüphanesininde etkisi büyüktür.

Zeplin ile açacağınız ücretsiz hesap oluşturabilirsiniz. Böylece 1 aktif proje üzerinde ücret ödemeden rahatlıkla çalışabilirsiniz. STARTER planı ile aylık 17$ ile 3 aktif proje, GROWING BUSINESS planı aylık 26$ ile de 12 aktif proje üzerinde çalışabilirsiniz. Bu fiyatlar yıllık alımlardaki indirimli fiyatlar. Aylık bazda ki alımlarınızda sırasıyla 19$ ve 29$ fiyatlarına çıkıyor. Büyük organizasyonlar için ise kullanıcı başına olan tarifesinde 7,65$ fiyatı bulunuyor. Ancak burada en az kullanıcı sayısı 16 olmalıdır. 16 ve üstü kullanıcılar için kullanıcı başı fiyatıdır.

Zeplin’in en güncel fiyat listesine ise buradan ulaşabilirsiniz.

Şimdi zeplin.io web sayfasına giriş yaptıktan sonra sağ üst kenarda bulunan Sign up free / Ücretsiz kayıt ol butonu ile kayıt işlemlerinizi tamamlayın.

Adresinize gelen e-postayı açın ve hesabınızı onaylayın. Ardından kullanıma hazır hale gelecektir.

Pekala, şimdi Adobe XD ile entegrasyonu nasıl yapacağız buna bir bakalım.

Zeplin Eklentisinin Yüklenmesi

Zeplin hesap onay e-postasında gelen linkler ile macOS ve Windows için bilgisayarınıza indirebilirsiniz. Ayrıca sizin için altta paylaşıyorum.

İndirme işlemlerinin ardından uygulama açılınca oluşturduğunuz hesap bilgileri ile tekrar giriş yapın. İşlem tamam. Artık Adobe XD içindeki tasarımlarınızı paylaşmaya hazırsınız.

Zeplin uygulaması zerinde proje sayfalarına göz atabilir, kullandığınız SketchApp, Figma, XD ve Photoshop CC programlarından direkt export alabilirsiniz.

Experience Design’dan Zepline Export Almadan Önce Dikkat Etmeniz Gerekenler

Adobe XD projenizi Zeplin üzerinde paylaşmadan önce dikkat etmeniz gerekenlere değinecek olursak;

  • Artboard isimlerini birdefa da doğru şekilde verin. Artboard isimlerindeki bir karakter değişiminde bile farklı bir sayfa olarak görülecektir.
  • Export ederken Artboard’u seçin ve ardından export komutunu çalıştırın.

  • Eklediğiniz jpg, png, svg, ai gibi dosyalarınızı mutlaka export edileceğini belirleyin. Aksi halde projeyi paylaştığınız ekip arkadaşlarınız ilgili görüntülere ulaşamayacaklardır.

Adobe XD‘den Zepline Export Alma

Adobe Xd üzerinde çalışmanızı tamamladıktan sonra artık export almaya hazırsınız. Hemen üst tarafdaki gereklilikleri de yerine getirmeyi unutmayın.

Zeplin’e göndermek istediğiniz Artboard/Sayfayı seçin ve File Export Zeplin komut veya WIN: CTRL + ALT + E, macOS: CMD + Option + E kısayoluyla export işlemini başlatabilirsiniz.

Ardından Zeplin yardımcı penceresinde bulunan Import butonuna tıklayarak yüklenmesini sağlayabilirsiniz.

Yükleme işleminin ardından Zeplin masaüstü veya web uygulaması üzerinden projeniz görüntülenebilir, yorumlar yapılabilir.

Burada üzerinde durmadığım stillendirme ve sembol işlemleride ayrıca değineceğim bir konu olacak. Ancak burada şu kadarını ileteyim, tasarım sürecinizde eklediğiniz her nesne, yazı veya görselin genel tasarım konseptinize uygun renk, font, boyut ve daha bir çok şey olarak uyumlu olması gerekiyor. Konsept belirlendiğinde (bir nebze UI Kit) zaten bu tür detaylar çıkacağı için bu standartlara uyarak hareket etmelisiniz. Bu standartlarıda stillendirdiğinizde veya komponentlerinizi sembolleştirdiğinizde zaman aynı tasarım diline sahip bir iş sürecine sahip olabilirsiniz.

Velhasıl; Experience Design ile hazırladığınız tasarımı Zeplin’e yüklediniz, ekip veya müşteriniz ile paylaştınız, geri bildirimler ile de süreci ilerlettiniz ve tamamladınız. Harikasın arkadaş 😉

İşinizi, ailenizi, çevrenizdekileri kısaca hayatı sevin, sevdikçe dikenler yok olur sadece güzellik kalır. Bir sonraki makalemde görüşene dek sevgilerle.