24 EKİM 2020
CUMARTESİ
13.06
Youtube
Youtube kanalım açıldı! Daha detaylı ve güncel konu anlatımları için takip etmeyi unutmayın.
Adobe XD - VS Code Eklentisi

Adobe XD - VS Code Eklentisi

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.

Adobe XD - VS Code Eklentisi

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:

Adobe XD - VS Code Eklentisi Proje Önizleme

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.

Adobe XD - VS Code Eklentisi Publish

Ş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:

Adobe XD - VS Code Eklentisi Web Library

İş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.

Adobe XD - VS Code Eklentisi Get Link

Ve şöyle bir popup yardımı ile linkimizi kopyalıyoruz:

Adobe XD - VS Code Eklentisi Get Link

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.

Adobe XD - VS Code Eklentisi Settings

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.

Adobe XD - VS Code Eklentisi Settings

Ve işte mutlu son! Dosyalarımızı içeri aktarmayı başardık!

Adobe XD - VS Code Eklentisi

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:

Adobe XD - VS Code Eklentisi Compiled

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.

Adobe XD - VS Code Eklentisi Variables

İş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:

  1. 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.

    Adobe XD - VS Code Eklentisi Tokens

    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.

    Adobe XD - VS Code Eklentisi Tokens Edit

  2. Typography

    Fontlarımızı ve onlara ait detayları burada görüyoruz. Yazı tipine ait tüm detayları buradan kontrol edebiliriz.

    Adobe XD - VS Code Eklentisi Typography

    Yine ekleme, silme ve güncelleme işlemleri yapabiliriz.

    Adobe XD - VS Code Eklentisi Typography Edit

  3. 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.

    Adobe XD - VS Code Eklentisi Components

    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.

    Adobe XD - VS Code Eklentisi Components Edit

    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.

    Adobe XD - VS Code Eklentisi Components Edit

    İş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.

  1. 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.

    Adobe XD - VS Code Eklentisi DSP Settings Name

  2. 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.

    Adobe XD - VS Code Eklentisi DSP Settings Version

  3. 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.

    Adobe XD - VS Code Eklentisi DSP Settings Status

  4. 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.

    Adobe XD - VS Code Eklentisi DSP Settings Languages

  5. 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.

    Adobe XD - VS Code Eklentisi DSP Settings Prefix

  6. 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.

    Adobe XD - VS Code Eklentisi DSP Settings CC Libraries

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.

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.

BENZER YAZILAR
YORUMLAR 0
Bu konuya henüz kimse yorum yapmadı.
İlk yorumu sen yapmak ister misin?
YORUM BIRAK
Şuanda bu yoruma cevap yazıyorsunuz:
İptal Et