Zeplin’i VSCode ile Birlikte Kullanmak

Türk girişimcilere ait çok önemli global uygulamalardan biri olan Zeplin, bugün itibariyle VS Code içerisinde yer alan eklentiler ile kullanılabilir hale geldi. Zeplin’i ve VS Code’da nasıl kullanacağımızı birlikte inceleyelim.

Zeplin Nedir?

Mobil & Web uygulama geliştiriciler için en büyük problemlerden biri, UI tasarımların hangi formatta, ne şekilde alınacağı. Tasarımcılar içinse, revizyon talepleri sonrası oluşan güncellemeler ya da spec’lerin değişimiyle birlikte oluşacak iletişim harbi… Zeplin, tasarımcılar ve geliştiriciler arasında bir köprü olan; bugün itibariyle Sketch, Figma, Adobe XD, Adobe Photoshop CC uygulamalarında yapmış olduğunuz tasarımları direkt olarak aktarabileceğiniz bir uygulama. Peki özelliği bununla bitiyor mu? Tabii ki hayır. iOS, Android ve web için yapılan tüm tasarımların ayrı ayrı eklenmesi sayesinde tüm proje ekibi erişebiliyor. Eklenen tasarımlarla ilgili kod parçaları oluşturarak, yazılımcıların işlerini kolaylaştırıyor. Herhangi bir tasarım ile ilgili yapılan yorum, ekibin diğer üyeleri tarafından görülürken; güncellemeleri akışı da oldukça kolay şekilde takip edilebilir. Yazılımcının ihtiyacı olan imaj, ikon gibi içerikleri de barındırdığı için karmaşanın önüne geçmiş oluyor.

Daha önce Android Studio ve XCode için eklentileri yayınlanan uygulamanın, bugün itibariyle VS Code eklentisi de duyuruldu. O zaman biz de vakit kaybetmeden kurulumumuzu yapalım ve React Native uygulamamızı yazarken tasarımlar da editörümüz içerisinde yer alsın.

Kurulum

Öncelikle VS Code içerisindeki Extensions Marketspace bölümünden Zeplin’i bulalım ve kuralım.

Sonrasında toolbar’ın en sonuna eklenen Zeplin logosunu göreceksiniz. Ona tıklayarak, Zeplin’e giriş yapın. Sizi, Zeplin’in sitesine yönlendirecek. Giriş yaptıktan sonra, VS Code eklentisi için izin isteyecek. Sonrasında ise eşleştirme için VS Code uygulamanızda kullanacağınız bir kod oluşturacak.

Bu kodu kopyaladıktan sonra, VS Code’a geri dönüp ⌘⇧P tuşlarına basarak, “Authenticate to Zeplin with token” komutunu seçiyoruz. Sonrasında açılan alana kopyaladığımız kodu yapıştırdığımızda, Zeplin’deki projelerimize ulaşmış oluyoruz.

Zeplin VS Code Eklentisi ile Başka Ne yapabiliriz?

• Bir proje ekibinde çalışıyorsanız, yüzlerce ekrandan sadece bir kaçı ile ilgileniyor olmanız muhtemel. Dolayısıyla ilgilendiğiniz içerikleri pin’leyerek çok daha kolay şekilde takip edebilirsiniz.

• İçeriklerde yapılan değişiklikleri Aktivite tabından takip edebilirsiniz. Bu sayede hali hazırda çalışmaya devam eden işlerinizle ilgili gelen güncellemeleri vakit kaybetmeden görüyor olacaksınız.

• Zeplin for Jira eklentisi sayesinde, ilgili tasarımlar için çok kolay şekilde sadece tek bir tıkla Jira kaydı açabilirsiniz.

Eğer Zeplin’in açık kaynak VS Code eklentisine destek olmak isterseniz, uygulamanın repo’suna https://github.com/zeplin/vscode-extension linkinden ulaşabilirsiniz.