Adobe'un VS Code için duyurduğu yeni eklentisi Adobe XD üzerine bir şeyler karalamak istedim. Şayet üzerine eklenecek yeni özellikler ile desteklenirse, gelecekte yazılımcıların önemli bir bölümünün XD üzerinden gelen tasarımları oldukça kolay yönetebileceği bir gerçek.
VS Code için duyurulan Adobe XD eklentisi ile artık XD üzerindeki tasarımları cloud aracılığıyla paylaşarak doğrudan projelerde kullanılabilir materyallerine erişebiliyoruz. Bildiğimiz üzere Adobe XD üzerinde 3 temel ayrım söz konusu: Color, Typography, Component
Bu yazıda sırası ile ilerleyerek Adobe XD'de proje oluşturarak bu projeyi nasıl eklenti ile kullanacağımızı öğreneceğiz. Hadi, başlayalım!
Adobe XD - Projemiz
Bu yazının amacı, XD ile nasıl proje yapacağımızdan ziyade var olan bir projenin nasıl eklenti ile birlikte kullanılabilir bir hale geleceğini anlatmak olduğu için bu kısımda ufak bir bilgilendirme yapacağım.
Hazırlanan tasarımlarda üst tarafta da belirttiğim gibi renk, font ve komponentler belirlenir. Bunlar XD üzerinde tanımlanır ve kütüphanede görüntülenir. Gelen güncellemelerden biri olan Cloud tarafındaki Library (DSP) ile artık oluşturulan her şey diğer Adobe programları ile ortak olarak kullanılabiliyor. Yani siz burada bir renk seti oluşturup Photoshop üzerinden bu sete ulaşabiliyorsunuz! Bu harika!
Tasarımcılar bir tasarımı hazırlarken kullanılan renkleri, tüm fontları ve komponentleri bir arada tutarlar. Ayrı bir sayfada (veya her birini ayrı bir sayfada) tutarken aynı zamanda bunları kütüphaneye de eklerler. Yani şöyle bir sayfa düzenimiz olduğunu düşünelim:
Burada gördüğümüz gibi projemizin ana sayfaları dışında colors, typography, components adlarında 3 farklı sayfamız var. Bu sayfalarımızda hazırladığımız tüm materyallerde yine sol tarafta gördüğünüz üzere "Document Assets" altında isimleri ile birlikte kayıtlı olarak duruyorlar.
Eğer bir frontend developer olarak çalışıyor veya çalışmak istiyorsanız işin bu tarafı hakkında da az çok bilgi sahibi olmanız her zaman avantajınıza olacaktır. Şimdi burayı temel olarak anladıysak projemizi cloud'a kaydedelim. Ben yine görselde gördüğünüz üzere MertProject olarak kaydettim.
Şimdi buraya tıklayarak (assets.adobe.com/libraries) kütüphanemizi yayınladığımız sayfaya ulaşabilirsiniz. Bu sayfada yeni oluşturduğumuz kütüphanemize tıkladığımızda şöyle bir sayfa bizleri karşılayacaktır:
İşte bu kadar! Artık oluşturduklarımızı paylaşmış olduk. Eğer bu işlemleri yazılımcı olarak siz değil de tasarımcı hazırlarsa 2. aşamaya doğrudan geçmeye hazırız demektir!
DSP Nedir?
Bir ufak ara bilgilendirme yapmak istiyorum.
DSP (Design System Packages), Tasarım Sistemi Paketi, ekiplerin hazırladıkları tasarım sistemlerini diğer uygulamalar ile paylaşmasına olanak sağlayan yeni bir formattır. Alt klasörleri de içermekte ve tasarıma dair bilgileri depolamaktadır. Bu konuda daha da detaya ulaşmak isterseniz AdobeXD\dsp Github sayfasına göz atabilirsiniz.
Projeyi VS Code'da İçeri Aktarmak (Import)
Öncelikle oluşturduğumuz ve library olarak web üzerinden ulaşabildiğimiz dosyamızı paylaşmalıyız. Burada doğrudan public bir url oluşturacağız fakat private olarak eklenti üzerinden import işlemi de yapabilirsiniz. Öncelikle son kaldığımız ekranda sağ üst tarafta yer alan ikon yardımı ile projemize ait bir link oluşturuyoruz.
Ve şöyle bir popup yardımı ile linkimizi kopyalıyoruz:
Bu işlemden sonra artık VS Code'a geçebiliriz. Öncelikle buraya tıklayarak (visualstudio.com) eklentiyi kurun. Sonrasında VS Code'un sağ alt tarafına gelen XD butonu ile veya CTRL + SHIFT + P > XD araması ile eklenti penceresine ulaşabilirsiniz.
Eklenti kurulduktan sonra karşınıza ilk görselde de gördüğünüz gibi 2 tane buton olan bir sayfa çıkacaktır: Load Package, Create Package. Daha önce herhangi bir DSP oluşturmadık. Dolayısıyla yeni bir proje için yeni bir paket oluşturmalıyız. Adımlar için aşağıdaki görseli takip edelim.
Ve artık son aşamaya geldik. Az önce kopyaladığımız linki artık yapıştırmamız gereken input alanını ekranda görüyor olmalıyız. Bu alana linkimizi yapıştırıp "Import" butonuna tıklıyoruz.
Ve işte mutlu son! Dosyalarımızı içeri aktarmayı başardık!
Visual Studio Code Üzerinde Çalışmak
Son görselimizde gördüğümüz gibi Visual Studio Code üzerinde Adobe XD eklentisine dosyalarımızı import etmeyi başardık. Artık bu sayfamızda Tokens, Typography ve Components başlıkları altında çalışmalarımız yer alıyor. Şimdi tek yapmamız gereken Start Editing butonuna tıklayarak istediğimiz güncellemeleri yapmak!
Start Editing butonuna tıkladıktan sonra ekranda yer alan her bölüm düzenlenebilir hale geliyor. Bölümlerin kenarlarında yer alan edit ikonları aracılığıyla düzenleyebilir ve sonrasında kaydedebilirsiniz. Fakat herhangi bir alanı düzenlemeden önce Start Editing ve hemen sonrasında Finish Editing butonlarına tıklayalım.
Ve işte o büyük an! (Çok büyük bir beklentiye girdik ama o kadar da büyük bir beklentiye gerek yok sanırım) Her Finish Editing butonuna tıkladığımızda düzenlemelerimiz derleniyor. Ve bu sayede değişikliklerimizi doğrudan yakalayabiliyoruz. İlk derleme işlemini başarıyla yaptığımızda şöyle bir uyarı alacağız:
Artık projemizi oluşturduğumuz dizinde yer alan dist\styledictionary yoluna gidersek (\Desktop\MertTopuzProject\dist\styledictionary) karşımızda css, scss klasörlerini ve içlerinde de variables.css ve variables.scss dosyalarını görmüş olacağız.
İşte örnekte de gördüğümüz gibi XD'de isimlendirdiğimiz gibi burada doğrudan hepsi otomatik olarak oluşmuş durumda. Buradaki yapıları doğrudan projemize dahil edebilir ve kullanmaya başlayabiliriz. İşlemleri detaylandırdığım için işlem yavaş gibi gelmiş olabilir fakat bir tasarımcının size özel oluşturduğu link ile projenize bunları dahil etmek saniyeler sürmekte!
Şimdi şu sol menüde yer alan sekmelere bir göz atalım:
- Tokens
Color, Size ve Custom olarak 3 tab bulunuyor. Örneğimizde yer alan tüm renklerimiz ve isimlerini burada görmekteyiz. İstediğimiz gibi düzenleyebiliriz.
Ayrıca herhangi birini düzenlemek için "Start Editing" butonunu kullandığımızda şöyle bir düzenleme ekranı bizlere gözüküyor. İstediğimiz gibi token ekler, siler veya güncelleyebiliriz.
- Typography
Fontlarımızı ve onlara ait detayları burada görüyoruz. Yazı tipine ait tüm detayları buradan kontrol edebiliriz.
Yine ekleme, silme ve güncelleme işlemleri yapabiliriz.
- Components
Şahsen beğendiğim ve epeyce kullanacağımı düşündüğüm bir alan olan components, temel amacıyla bize bir snippet oluşturma ve bunu projede kolayca kullanabilme imkanı sunuyor.
Burada bir tane component'i ele alarak detaylandırmak istiyorum.
İlk olarak bize bir önizleme sunuyor. Burada yer alan görseli istediğiniz başka bir görsel ile değiştirmeniz mümkün. Bunun yerine varsayılan olarak gelen görsel de doğrudan XD tarafından oluşturulmuş olan ve component'i temsil eden görseldir.
Tokens alanında ise projede belirlediğiniz hangi tokenlar bu component tarafından kullanılıyorsa tanımlayabilirsiniz.
Documentation ve Code Snippet ise en çok işimize yarayacak alanlar. Öyle ki projede bir alanda button component'ini kullanmak istediğimizde görüntüleyeceğimiz açıklama metnini düzenleyebiliyoruz. Documentation sekmesine doğrudan o componentinin açıklamasını yazabilirsiniz. Örneğin bu component için "Bu bir buton oluşturmaya yaramaktadır." şeklinde bir açıklama metni giriyorum. Bu alanın markdown desteği olduğunu hatırlatalım.
Gelgelelim Code Snippet kutusuna. Buraya componentin son haline ait kodu giriyoruz. Normalde React veya Vue gibi bir kütüphane kullanıyorsanız component'i direkt buraya bir snippet olarak eklediğinizi ve belirlediğiniz isim ile projede çağırabileceğinizi düşünün. Aslında tam olarak böyle. Bu alanı düzenlerken sizden bir snippet'ı çağırırken kullanmak istediğiniz bir tetikleyici ismi isteyecektir. Bu örneğimizde mert-button olarak tanımlayacağım. Örneğimizde sadece basit bir HTML ile hazırlanmış buton olduğunu varsayarak görseldeki gibi bu alanın son halini oluşturuyorum.
Görselde de işaretlediğim alanları güncelledikten sonra Finish Editing diyerek tüm değişikliklerin yeniden derlenmesini sağlamış oldum. Burada dikkatinizi çeken bir nokta olmalı aslında. Snippet adı xd_... şeklinde başlıyor. Buradaki "xd_" ön ekini bir sonraki bölümdeki ayarlar sekmesinden güncelleyebileceğiz.
O zaman component'i denemeye hazırız! Hemen bir .html uzantılı dosya açalım ve bir deneme yapalım.
İşte bu kadar! Artık snippet olarak eklediğimiz yapımızı doğrudan önizlemesi ve açıklamaları ile görebiliyoruz. Eğer siz bu açıklamayı göremiyorsanız "mert" yazdıktan sonra CTRL + SPACE ile açıklamalara ulaşabilirsiniz.
DSP Settings
Adobe XD eklentisine geri dönecek olursak, sol alt köşede yer alan DSP Settings sekmesini bir inceleyelim.
- DESIGN SYSTEM PACKAGE NAME
Pakete verdiğiniz isim olarak gözükmektedir. Projeyi import ettiğimizde kütüphane başlığı doğrudan buraya yazılmaktadır.
- VERSION NUMBER
Eğer takım ile üzerinde çalıştığınız bir proje varsa ortak sürümde çalışmak oldukça önemlidir. Tasarımı hazırlayan kişi versiyonu güncelleyecektir. Burada aynı sürümü takip ettiğinizden emin olabilirsiniz.
- STATUS
Bildiğiniz gibi herhangi bir yazılım projesinde çalışılan projenin durumunu temsil etmek için development, production, test gibi ortamlar oluşturulmaktadır. Buradaki amaç yazılımcının DSP durumunu daha iyi anlayabilmesi amacıyla kullanılabilir.
- LANGUAGES
Projeyi import etme aşamasında bizden bazı dilleri seçmemizi istemişti. Bizde CSS ve SCSS'i seçili hale getirmiştik. İşte burada bu bilgileri güncelleyebiliriz. Akabinde Start Editing - Finish Editing işlemini tekrar etmemiz halinde otomatik olarak yeni seçilen dillere ait klasörler de kaydedilecektir.
- Set code snippet prefix
İşte önceki bölümde de bahsettiğimiz gibi ön ek belirlememize olanak sağlayan alandır. Snippet'ı kullanırken başlangıcında xd_ gibi bir ifade vardı. Onun yerine proje adınızı girebilirsiniz: project- gibi.
- Creative Cloud Libraries
Önemli bir alan. Tasarımcının projede güncelleme yaptığı bilgisine ulaştığınızda proje linkini yeniden istemek, yeni bir klasör oluşturup oraya projeyi import etmek doğru bir yol değildir. Bunun yerine bu alana gelip doğrudan "Import" butonunu kullanırsanız projenin son haline ait değişiklikleri ile almış olacaksınız.
Diğer Editörler ve IDE'ler
Bu konuda bende merak içindeyim. Ürün yöneticisi olan Demian Borba'ya Twitter üzerinden yazdım ve aldığım yanıt şöyle.
Glad to hear you found the idea interesting. We're starting with VS @code but we can always evaluate investing in other code editors or IDEs depending on demand. If possible, please file a feature request on https://t.co/sXYIWgNH3Y ????
— Demian Borba (@demianborba) October 24, 2020
Bunun üzerine şuradaki konuyu oluşturdum. Eğer sizde bunu bekleyenlerdenseniz oylarsanız sevinirim.
Türkçe kaynak olması adına henüz çok yeni olan bu özelliği sizlere anlatmaya çalıştım. Umarım faydalı olmuştur. Bununla birlikte eğer eklenti hakkında yenilikleri ve var olan anlatımları da takip etmek istiyorsanız buraya tıklayarak bu konu için hazırlanmış detaylı sayfaya ulaşabilirsiniz.
Teşekkürler, iyi çalışmalar.