Figma’da tasarım sistemi oluşturma üzerine ipuçları

Projede kullanacağınız renkler tam olarak belirli olmasa bile önce renkten başlayın. Renkleri daha sonra güncellemek isterseniz ve yaratacağı efordan çekiniyorsanız, birden fazla stili aynı zamanda değiştirmenize olanak sağlayan Batch Styler eklentisi imdadınıza yetişecektir. 

Tint ve shade oluşturma renk kısmının yapı taşı diyebiliriz. Bunları manuel olarak oluşturmak veya dış bir kaynak kullanmak yerine, Color Compass gibi Figma eklentileri size hız kazandıracaktır.

Tint ve shade isimlendirmesi için alışılagelmiş 100,200… gibi sayı sisteminin yanı sıra, renkleri hangi amaçla kullanacağınıza işaret eden etiketler de ekleyebilirsiniz. Sahnede kullanırken, arama yaparken yönlendirici olacaktır.

Örneğin;

100 (Background), 300 (Disabled), 500 (Base)

Sade ama yeterli bir tipografi paneli

Sketch’in aksine Figma, text style’ı hizalama ve renk ile tanımlamayı zorunlu kılmayarak çok daha temiz ve sade bir style paneli oluşturmanıza olanak tanır.  Bu özellikten faydalanın. Tipografi için kullanacağınız boyutları ve bu boyutların varyantları olarak ağırlıklarını oluşturmak yeterli olacaktır. Hizalama ve rengi hem sahnede, hem de kütüphanede bir komponent oluşturma esnasında gönlünüzce değiştirebilirsiniz. 

Bu kısımdaki isimlendirme kuralı tamamen size ve kendinizi en rahat hissettiğiniz yapıya bağlı aslında. H1-H2… gibi Hn etiketleri veya S-M-L gibi boyutlandırmaların yanı sıra milyonlarca farklı isimlendirme yöntemi var. Benim tavsiyem, bunlardan hangisini seçerseniz seçin ek olarak yanına font boyutlarını iliştirmeniz. Sahnede style seçerken 24 pikselin hangi etikete tekabül ettiğini hatırlamak yerine direkt 24 yazarak arama yapmak müthiş bir hız kazandırıyor. 

Tipografi kısmının kütüphane dosyasındaki gösterimi için de sonsuz yöntem olsa da, bu kısım için önerim style ismi ve boyutunun yanı sıra line height ve letter spacing değerlerini de belirtmeniz. 

Son olarak, tıpkı renk gibi tipografi için Batch Styler kullanarak birden fazla stili aynı anda değiştirebilirsiniz.

İkonlar

İkon aramak, istediğiniz şekle getirmek ve bulamadığınız ikonları sıfırdan çizmekle zaman kaybetmemek için elinizin altında mutlaka çeşitli ve geniş bir ikon seti bulundurun. Nucleo ve Streamline gibi 10.000 üzeri ikon içeren ücretli setler ise bir projedeki neredeyse tüm ikon ihtiyacınızı karşılayacaktır.

Çok çeşitli ikon ihtiyacı olmayan projeler için ise ücretsiz olan Feather Icons ve Eva’yı öneririm.

İkonları yaratırken birden fazla layer içeren ikonları (eğer tek parça olarak kullanacaksanız) flatten seçeceği ile tek bir layer haline getirin. Ve tüm ikon layer’larının aynı isimde olmasına dikkat edin. Bu sayede sahnede bir ikonu değiştirdiğinizde yerine gelen ikonu tekrar renklendirmek zorunda kalmazsınız. 

Asset panelini sade tutmak için her bir ikonun line, filled ve diğer seçeneklerini varyant olarak tanımlayıp tek bir komponent yaratın. 

İkonları isimlendirirken, ikonun kullanım amacı yerine kullandığınız şeklin ismini tercih edin. Kullanım amaçlarını da description kısmına, aralarına virgül ekleyerek yazarsanız kolaylıkla bulunmasını sağlayabilirsiniz. 

Örneğin;

Icon / Plus
Description: Add, expand, create, new, increase

Tüm bunlar zaman alıcı görünebilir ve maalesef bildiğim kadarıyla bu işlemleri hızlandıracak bir eklenti yok. 

Komponent

Bir tasarım sistemi oluştururken zamanımızın çoğunu alan kısım genellikle komponentler oluyor. Komponent oluşturma sırasıyla ilgili 2 yaklaşımdan benim önerim daima buton, avatar, input gibi daha küçük elementlerle işe başlamanız. Bu elementler elinizin altında bunları hazır bulunduğunuz sürece, kompleks bir komponenti yaratırken nihai yapıdan memnun olana kadar aralarından hızlıca seçim yapabilirsiniz.  

Buton, input, kart gibi farklı varyantlarını yaratacağınız komponentler için mutlaka bir base, yani komponent içinde komponent oluşturun. Varyantları bu yöntemle yaratmak base komponentte yaptığınız bir değişikliğin tüm varyantlara uygulanmasını sağlar. Base komponentin sadece kütüphanede kalması ve sahne olarak kullandığınız dosyada görünmemesi için, komponenti isimlendirirken başına nokta (.) veya alt çizgi (_) ekleyebilirsiniz. 

Kompleks komponentleri oluştururken, daha önce kütüphanede komponent olarak tanımlamadığınız diğer elementleri (building blocks) de ana yapının yakınında toplayın. Güncelleme konusunda sizi rahatlatacak ve hızlandıracaktır. Bu elementleri de komponent olarak tanımlamaktan çekinmeyip, yine isimlendirirken nokta (.) veya alt çizgi (_) kullanabilirsiniz. 

Bu kısım için de eklenti önerisini atlamayalım. Bazen aceleniz olduğunda, komponent oluşturmayı atlayabilir ve aynı elementi kullanarak artboard’ları çoklamış olabilirsiniz. Geriye dönüp, tümünü manuel olarak değiştirmek oldukça sıkıcı ve zaman alan bir iş. Tüm elementleri tek bir komponente dönüştürmeye yardımcı olabilecek harika bir eklenti var: Master

Ayrıca, farklı artboard’lardaki tüm elementleri komponente dönüştürmek için önce hepsini seçmeniz gerek. Bunun için de A Selector veya Similayer kullanabilirsiniz.

Ortaya karışık öneriler

Figma’da gerçekten kapsamlı ve doğru bir tasarım sistemi hazırlamak için Auto-Layout ve Variants özelliklerine hakim olmanız gerekiyor. Zaman buldukça bu özellikleri kurcalayın, denemeler yapın, bulabildiğiniz tüm kaynakları yalayıp yutun. Başlangıçta zorlanabilirsiniz, ancak emin olun zamanla keyif alarak yapmaya başlayacaksınız. 

Constraints and resizing paneli komponent oluşturma noktasında kritik rol oynuyor. Oluşturduğunuz Auto-Layout kurgusu çalışmıyorsa muhtemelen bu paneldeki bir hata veya eksiklikten kaynaklıdır. 

Diğer tasarımcıların ve şirketlerin hazırladığı tasarım sistemlerini inceleyin. Özellikle kütüphane düzeni noktasında yararlı fikirler bulacaksınız.

Son olarak, zamanınız kısıtlı olsa bile temiz ve düzenli bir kütüphane dosyası oluşturmaya gayret edin. Oluşturduğunuz dosyayı sadece sizin değil, başka tasarımcıların ve yazılımcıların da kullanacağını unutmayın. Düzenli bir kütüphane hem uzun vadede çalışma hızını arttırır, hem projeye dahil olan diğer tasarımcıların daha tutarlı ve hızlı ilerlemesini sağlar hem de iş yazılım aşamasına geldiğinde ortaya istediğiniz gibi bir sonuç çıkmasını sağlar.