Tutarlılık Anahtardır – Bir Figma Tasarım Sistemi Nasıl Oluşturulur

İyi bir tasarım sisteminin, sevk ettiğimiz ürünlerin kalitesi ve bunları geliştirme hızımız üzerinde büyük bir etkisi olabileceği, tasarımcılar arasında yaygın bir bilgidir. Google, GitHub, IBM gibi şirketlerin ve diğerlerinin bunları daha hızlı daha iyi ürünler oluşturmak için kullanmasıyla birlikte kapsamlı bir tasarım sistemi oluşturma durumu defalarca açıklığa kavuşturulduğundan, soru "Neden bir tasarımımız olmalı? sistem?” “Harika bir tasarım sistemini nasıl oluşturabiliriz?”

Peki bir tasarım sistemi tam olarak nedir? Will Fanguy, bunu “herhangi bir sayıda uygulama oluşturmak için birleştirilebilen, net standartlar tarafından yönlendirilen yeniden kullanılabilir bileşenler topluluğu” olarak tanımlıyor. Bir tasarım sistemi, yalnızca bir UI bileşen kitaplığı ve bir kalıp kitaplığı değil, aynı zamanda bir stil kılavuzu, en iyi uygulamalar, kod ve daha fazlasını içerebilir. Bir mimarın bir bina planı gibi, bir tasarım sistemi de ürünleri oluştururken ürün ekibi için “tek gerçek kaynağı” olarak hizmet eder ve tutarlılığın korunmasına yardımcı olur.

GitHub, Figma bileşen kitaplığını paylaşacak kadar ileri gitti - Figma tabanlı bir tasarım sistemine harika bir örnek. Öykü Kitabı ve Bileşene Dayalı Geliştirme gibi daha kapsamlı araçlar da bir tasarım sistemini uygulamak ve belgelemek için son derece yararlı kaynaklardır.

Bir tasarım sistemi, tasarım tutarlılığını korur ve bir ürün yaratmaya dahil olan herkes için faydalı olmalıdır. Tasarımcıların daha hızlı yeni ekranlar, akışlar ve prototipler oluşturmasına yardımcı olan bir araç takımıdır. İyi bir tasarım sistemi, geliştiricilerin tasarım kararlarının arkasındaki mantığı anlamasına yardımcı olur ve daha uyumlu bir ürün oluşturmaya yardımcı olur. Tasarım sürecini hızlandırır ve tasarımcılara deney için daha fazla zaman tanır.

Figma ile çalışan tasarımcılar için, Figma'da bir bileşen kitaplığı oluşturmanın kapsamlı bir tasarım sisteminin nasıl önemli bir parçası olabileceğine bakalım.

Bileşen Kitaplığının Gücü

Bazen bir tasarım sistemi oluşturmaya çok erken yatırım yapmak verimsiz olabilir. Bir ürünü tasarlamanın ilk aşamalarında süreç hala akıcıdır. Örneğin, iki birincil gezinme çubuğu deneniyorsa, her ikisini de bir bileşen kitaplığına eklemek, ekipteki herkesin kafasını karıştıracağından mantıklı olmaz. Ürün tasarımının oturmasını beklemek daha iyidir - tercihen test edilmiş ve bir şekilde kesinleşmiştir.

Bir ürün olgun bir ürünse ve mevcut bir bileşen kitaplığına sahip değilse, tasarım sistemi halihazırda mevcut uygulama tarafından belirlenmelidir. Ama henüz kodlanmadı. Bu noktada, ortak UX kalıplarını tanımlamak ve ürünü, ürün boyunca düzenli olarak kullanılan bir dizi bileşene ayırmak avantajlı olacaktır. Ek olarak, bileşen kitaplığının herkesin kolayca erişebileceği merkezi bir konumda tutulması idealdir.

Bir Tasarım Sistemi Öncelikle Bir Araç Takımıdır

Araç takımı gibi bir tasarım sistemini kullanmaya çalışmak, etkinliği açısından harika bir turnusol testidir. Birden fazla tasarımcı, süreçlerini hızlandırmak için düzenli olarak kullanıyorsa, iyi bir iş çıkarıyor. Geliştiriciler renkler, yazı stilleri veya tasarımcılardan daha az girdi ile çalışmak için buna başvurabiliyorsa, bu da iyiye işarettir.

Oldukça karmaşık bileşenleri veya yalnızca bir veya iki kez kullanılabilen bileşenleri ürüne dahil etmek genellikle yararlı değildir. Bir şey ne kadar yeniden kullanılabilirse, bir tasarım sistemine o kadar çok aittir.

Figma kısa süre önce, ekiplerin bir tasarım sisteminin farklı bölümlerinin ne kadar etkili olduğunu görebilecekleri ve onu optimize etmeye yardımcı olabilecekleri kuruluşlar için tasarım sistemi analitiği yayınladı.

Figma Neden Bileşen Kitaplığı Oluşturmak İçin Harika?

Figma, birçok harika özelliğe sahip güçlü bir tasarım aracıdır, ancak karmaşık ürünler tasarlarken özellikle yararlı hale gelen bir dizi öğe vardır: Stiller , Bileşenler ve Kitaplık Dosyaları . Bu özellikler tasarım sistemlerinin güncel tutulmasına yardımcı olur, tasarımlar arasında tutarlılığın korunmasına yardımcı olur ve birden çok tasarımı merkezi bir konumdan güncellemek için bir kısayol sağlar.

• Stiller , tek bir yerde tanımlanan ve birçok nesneye uygulanabilen renkler ve yazı stilleridir (yazı tipi, boyut, ağırlık vb.).
• Bileşenler , düğmeler veya sohbet balonları gibi şeylerdir ve Stillerden, şekiller ve metin gibi nesnelerden ve diğer Bileşenlerden oluşturulabilir.
• Kitaplık Dosyaları , Stillerin ve Bileşenlerin birden çok dosya arasında ve bir ekip veya kuruluşla paylaşılmasına olanak tanır.

Figma'nın özünde işbirliği ve paylaşım vardır. Tasarım dosyaları tarayıcıdaki herkes tarafından düzenlenebilir, özgürce paylaşılabilir ve birden fazla kullanıcının aynı anda düzenleyebildiği için gerçek zamanlı olarak güncellenir. Bu, tasarım sistemini yalnızca tasarımcılar arasında değil, aynı zamanda geliştiriciler ve diğer paydaşlarla daha verimli işbirliğine açar.

Kitaplık Dosyası Oluşturma

Figma'da, bir tasarım sisteminin başlangıcı olarak aşağı yukarı hizmet edecek bir kütüphane dosyası oluşturulabilir. Burada, daha sonra ekip veya organizasyon boyunca paylaşılan ve birden fazla tasarımda kullanılan Stilleri ve Bileşenleri tanımlayabiliriz. Stiller ve Bileşenler tek bir yerde güncellenebilir ve bu değişiklikler daha sonra tüm bireysel tasarım dosyalarına otomatik olarak getirilebilir.

Bunun birkaç önemli avantajı vardır:

1. hız . Bir tasarımcının potansiyel olarak yüzlerce tasarımı manuel olarak güncelleme ihtiyacını ortadan kaldırarak zaman kazandırır. Bileşenlerin tek bir kitaplık dosyasında yönetilmesiyle, bir rengin tek bir yerde güncellenmesi, yalnızca birkaç tıklamayla bileşen kitaplığı kullanılarak oluşturulan her tasarıma yayılabilir.
2. tutarlılık Görevi otomatikleştirerek hata olasılığını azaltır.

organizasyon

Figma'da bir tasarım sistemi kurarken, araçlar ve teori arasında paralellikler çizmek faydalıdır. Örneğin, Figma'daki Stiller, Brad Frost'un Atomik Tasarım modelindeki Atomlardan bile daha temel, en temel seviye olarak kabul edilebilir. Bunlar, ürünün estetiğini oluşturmaya yardımcı olan renk ve yazı tipi gibi şeylerdir.

Basit bir Figma bileşeni, Atomik Tasarım modelinde bir atom olarak kabul edilecektir, örneğin bir düğme. Daha karmaşık bir Figma Bileşeni, daha sonra şablonlar ve sayfalar oluşturmak için kullanılan bir molekül veya organizma olarak kabul edilir.

Bir bileşen kitaplığında bulunması gereken en yararlı şeylerden bazıları şunlardır:

• Renkler
• yazı tipleri
• Marka varlıkları, logo vb.
• Navigasyon
• Düğmeler
• Bildirimler
• modlar
• Form öğeleri ve doğrulama

Figma'da Tasarım Sistemi Oluşturma – Başlarken

Bu örnekte, basit bir oturum açma formu oluşturacağız ve çıkarsanabilecek ve kullanılabilecek Bileşenleri ve Stilleri açıklayacağız.

İlk olarak, bu formdan yeniden kullanılabilir olması muhtemel Bileşenler ve Stiller hakkında düşünelim. Logo, form alanları ve düğme içeren bir kart var. Ayrıca yararlı olabilecek üç yazı tipi stili ve birkaç farklı renk ve efekt vardır.

Dahil edilecek Stiller ve Bileşenler Kitaplıkta yukarıdaki gibi tanımlandıktan sonra, bir Kitaplık dosyası oluşturma ve onu doldurmaya başlama zamanı.

Bir Figma Kitaplığı Dosyası Oluşturun

Yeni bir dosya oluşturun ve bunu Kitaplık olarak yayınlayın. Yeni bir dosya oluşturulduktan sonra Varlıklar sekmesine tıklayın, Kitaplık simgesine tıklayın ve ardından Yayınla öğesine tıklayın. Bu, Stilleri ve Bileşenleri kitaplık dosyasında yayınlar, böylece diğer dosyalarda kullanılabilirler.

Stiller ve bileşenler artık kütüphane dosyasında oluşturulabilir ve diğer dosyalarda kullanılabilir ve merkezi kütüphane dosyasından güncellenebilir.

Figma Stili Nasıl Oluşturulur

Stiller oluşturmak, aşağıdaki adımlarda ana hatlarıyla belirtilen diğer dosyalarda olduğu gibi Kitaplık dosyalarında da aynıdır.

• Stil oluşturmak istediğiniz nesneyi seçin. Stiller renkler, metin özellikleri, efektler ve düzen ızgaraları olabilir.
• Yeni Stilde kullanılacak özelliğin yanındaki Stiller düğmesini (bir karede dört nokta) tıklayın, ardından yeni bir Stil oluşturmak için açılır penceredeki artı düğmesini tıklayın.

• Bu, Stili adlandırmak için bir modal gösterecektir. Sunum adı yerine semantik bir ad kullanmak genellikle yararlıdır, örneğin, “Yeşil” yerine “Birincil Renk”, bu nedenle Stilin ne için kullanılacağı daha açıktır.
• Ekranın sağ alt kısmında görünen açılır pencereyi kullanarak Stili Ekip Kitaplığınızda yayınlayın veya Kitaplığı ilk aşamada yayınlamak için atılan adımları tekrarlayın.

İşte Figma'nın bir stilin nasıl oluşturulacağına dair öğreticisi.

Figma Bileşeni Nasıl Oluşturulur

Bir Bileşen oluşturmak da çok kolaydır. Bileşen oluşturmak istediğiniz nesneyi seçin, ardından sağ tıklayın ve "Bileşen Oluştur"u seçin.

Bileşenler, Stiller ile aynı şekilde Ekip Kitaplığına yayınlanır.

İşte bir bileşenin nasıl oluşturulacağına dair Figma'nın öğreticisi.

Birkaç Stil ve Bileşen oluşturulduktan sonra Kitaplık dosyası ekiple paylaşılabilir ve Stiller ve Bileşenler herhangi bir sayıda dosyada kullanılabilir.

Figma Kitaplığını Kullanma

Bu Stilleri ve Bileşenleri başka bir dosyada kullanmak için Kitaplık dosyasının yeni Stilleri ve Bileşenleri içinde kullanmak istediğimiz mevcut bir tasarım dosyasına bağlanması gerekir. Kitaplıklar modunu tekrar açın (Varlıklar, Kitaplık simgesi) ve geçiş anahtarını açın Kullanılacak Kitaplık dosyası için.

Bileşen Kitaplığı artık kullanıma hazırdır. Bileşenler, ekranın solundaki Varlıklar sekmesinden tasarım dosyasına sürüklenerek yerleştirilebilir. Kitaplık stilleri, metin stillerini, dolgu renklerini, konturları, efektleri ve düzen ızgaralarını değiştirirken yerel stiller ile aynı şekilde kullanılabilir.

Kitaplıkta Bileşenler ve Stiller güncellendiğinde, bunları kullanan dosyaların değişiklikleri kabul etmesi gerekir. Figma, Kütüphane dosyasında güncellemeler yapıldığında bir bildirim göstererek bunları yayınlama seçeneği sunar. Yayınlandıktan sonra, Bileşenleri ve Stilleri kullanan tüm dosyalar, bileşenlerini ve stillerini güncellemek için benzer bir bildirim veya varlıklar sekmesi aracılığıyla değişikliği kabul etmelidir. Bu, değişikliklerin beklenmedik bir şekilde yayınlanmasını ve güncellenmesini önler.

Figma'da Bileşen Kitaplığı Oluşturmanın Ötesi

Figma, tam teşekküllü bir tasarım sisteminin yalnızca bileşen kitaplığı bölümünü kapsar. Tam kapsamlı bir tasarım sistemi için marka yönergeleri, içerik stili kılavuzları ve geliştirici belgeleri gibi dahil edilebilecek diğer parçaları göz önünde bulundurmaya değer.

Mailchimp'in içerik stili kılavuzu, içerik aracılığıyla ses tonunu ve marka bilinci oluşturmayı ayrıntılandıran mükemmel bir örnektir. GitHub, bileşen kitaplığının kodda nasıl çalıştığına dair harika belgelere sahiptir ve Google'ın Materyal Tasarım Sistemi de tasarım sisteminin arkasındaki mantığı belgeleyen bazı mükemmel örneklere sahiptir.

Bir tasarım aracı olarak Figma çok olgunlaştı ve sürekli olarak yeni özellikler ekleniyor. Tüm organizasyonun erişebileceği yerleşik analitik içeren bir Figma tasarım sisteminin eklenmesi ileriye doğru atılmış dev bir adımdır. Bu özelliklerin eklenmesi, Figma'nın tam teşekküllü, kapsamlı bir tasarım aracı olmayı hedeflediğini ve bunu gerçekleştirme yolunda ilerlediğini gösteriyor.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Bir Tasarım Aracı Olarak Figma'nın Gücü
• Figma ile İşbirlikçi Tasarımı Kolaylaştırın
• Mini Eğitim – Tüm Tasarım Süreci için Figma'nın Özelliklerinden Yararlanma
• Mini Eğitim – Figma Düğme Bileşenleriyle Çalışma
• Bu En İyi UX Araçları ile İşinizde Ustalaşın