Figma'daki Takım Kütüphaneleri

Bugün, projeler arasında bileşenleri paylaşmak için Ekip Kitaplıklarının beta sürümünü duyurmaktan heyecan duyuyoruz. Bu sürümle birlikte, tasarım sistemlerinin oluşturulmasını, sürdürülmesini ve kullanılmasını kolaylaştırmak için tüm ekipte Bileşenler ile kurduğumuz temeli inşa ediyoruz. Takım Kütüphaneleri bugün figma.com adresinde üründe bulunmaktadır.

Sorun

Günümüzde ürün tasarımındaki yaygın sorunların çoğu, çoğu tasarım aracının geleneksel baskı tasarım araçlarını taklit etmek için yapılmış olmasından kaynaklanmaktadır.

Bu uygulamaların çekirdeği, fotoğrafları düzenlemek, karmaşık illüstrasyon çalışmaları yapmak veya üzerlerinde metin bulunan statik dikdörtgenler yapmak için yapılmıştır. Fiziksel kağıtlar etkileşime sahip değildir, bu nedenle bu araçlarla uygulamaların resimlerini çizebilirken, uygulamanın gerçekten farklı bağlamlarda nasıl davranacağını hiçbir zaman gerçekten anlamazlar. Gerçekçi uygulama davranışını statik bir çalışma yüzeyinde iletmek veya gerçekte platformun API'sinde bulunmayan kısıtlamaları kullanmak yeterli değildir.

Sorunları daha kötü hale getirmek için, gerçeğin kaynağınız hareketli bir hedeftir. Bir tasarım sistemi oluştururken, bazı güzel dokümantasyonların ve iyi tanımlanmış bir sembol sisteminin bulunduğu bir ana dosya ile başlayabilirsiniz. Bu harika bir başlangıç, ancak sembolleri bir dosyadan diğerine kopyaladığınız anda senkronizasyon dışı kalır ve yalnızca manuel olarak güncellenebilir. Şimdi tüm tasarım belgelerinizi incelemelisiniz, sembolleri değiştirmeli ve geçersiz kılmalarını istediğiniz zaman bir sembolde güncellemelisiniz.

Tasarımcılar olarak, araçlarımız kalıcı tasarım sistemleri oluşturmak için gereken senkronize ve bileşik bileşen yapılarını desteklememektedir.

Brad Frost’un Atom Tasarımı

Bunların hiçbiri yeni değil. Tasarım sistemleri bir süredir ürün tasarımında sıcak bir sohbet konusu olmuştur. Dünyadaki en başarılı tasarım ekiplerinin Facebook, Google ve Airbnb gibi dünyadaki en başarılı tasarım ekiplerinin, ekiplerinin daha verimli çalışabilmesi için tasarım sistemlerine yoğun bir şekilde yatırım yapmasının bir nedeni var - çünkü tasarım araçları yetişemedi. Sonuç olarak, bu şirketler kendi özel araçlarını oluşturmak ve işleri bütün bu sistemleri sürdürmek olan personeli işe almak zorunda kaldı.

Airbnb’nin Tasarım Dili Sistemi

Boşluğu doldurmak

Geçtiğimiz Haziran ayında takıma katılmamdan çok önce, Figma, görsel tasarımı dinamik kullanıcı arayüzü tasarımına bağlayan bir araç oluşturmak için çalışıyor. Şimdiye kadar, biz serbest bırakıldı:

  • Güvenilir ve sezgisel vektör düzenleme
  • Sistem davranışını gösteren kısıtlamalar
  • Yüksek düzeyde tasarım sistemlerinin kişisel düzeyde uygulanabilir olmasını sağlayan yeniden kullanılabilir, dinamik bileşenler

Şimdi, bileşenleri tüm dosyalarınızda ve ekip üyelerinizde kullanılabilir kılmak için bir Beta Takım Kütüphanesi sürümü yayınlıyoruz.

Takım Kütüphaneleri, neden Figma'yı web'de yarattığımıza mükemmel bir örnektir. Dosyalar ve ekip üyeleri arasında paylaşılan, senkronize edilmiş bileşenleri yeniden kullanarak etkili, ölçeklenebilir tasarım sistemleri oluşturmanıza olanak tanır. Bu özellik, çok çeşitli cihazlar ve platformlar için daha hızlı tasarım süreçleri sağlayarak, kurallar ve yapıyla mizanpaj oluşturmayı daha kolay ve verimli hale getirir. Her zaman çevrimiçi olduğundan, dosyalarınız arasında etkin bir şekilde sıfır senkronizasyon zamanı yoktur.

Figma'daki Takım Kütüphaneleri

Bizim yaklaşımımız

Sistemik tasarım, “sahip olması güzel” olmaktan, ürün tasarımında bir gereksinim haline gelmeye başladığı gibi, uygulamaların ayrık, açıkça tanımlanmış parçalardan bileşimi, React gibi çerçeveler yoluyla mühendislikte daha popüler hale geldi. Ürün döngüsü küresel olarak daha temiz ve daha sürdürülebilir bir yapıdan faydalanıyor, bu yüzden tasarımcılara Figma'daki bu iş akışından faydalanmalarını sağladık.

Programlama prensiplerini bir tasarım aracına dahil etmek, kesin ve kuru değildir. Pek çok tasarımcının teknik ekip arkadaşlarından farklı düşündüğünü biliyoruz, bu yüzden birkaç mühendislik kavramı aldık ve onları daha erişilebilir hale getirdik.

Nasıl çalışır

Özelliğin özü üç basit adımda açıklanabilir: Yayınla, Ekle ve Güncelle.

1. Yayınla

Bir tasarım dosyasında çalışırken ve en yeni UI konseptleri yelpazesini yinelemeye başladığınızda, kaçınılmaz olarak kaçınılmaz olarak, olası birçok çözümden hangisinin One ™ olduğu konusunda karar verilmesi gereken bir noktaya geleceksiniz.

Sonunda o noktaya geldiğinde:

  1. Müfettişin kenar çubuğundaki “Kütüphaneye Ekle” düğmesine tıklayarak ekip kütüphanesinde kullanılabilir yapmak istediğiniz bileşeni seçin.
  2. Dosyadan istediğiniz kadar bileşen ekleyin.
  3. Değişikliklerinizi inceleyin ve bunları ekibinizin kütüphanesinde yayınlayın.

Kütüphaneyi kaynak dosyadan ayırmak, tasarım sisteminiz için gerçeğin kaynağını değiştirebilecek kişilerin izinlerini yönetmenizi sağlar. Yalnızca kaynak dosyaya düzenleme izinleri olan kişiler kaynak bileşenlerinizi değiştirebilir, ancak View erişimi olan herkes bu dosyadaki yayınlanmış bileşenleri kullanabilir. Bu nedenle, artık Prodüksiyon Tasarımcılarınız dosyayı son simge varlıklarıyla düzenleyebilecek tek kişiler ve Marka Tasarımcılarınız renk belgelerinizi kontrol edebilecek tek grup. Diğer herkes işini kullanabilir, ancak kuralları belirleyemez.

2. ekle

Bileşenlerinizi ekibinizin kütüphanesine ekledikten sonra, kaynak dosyayı görüntüleme iznine sahip olan herkes tarafından kullanılabilir. Paylaşılan bileşenler, araç çubuğundaki bileşenler aracını tıklatarak ve eklenecek bileşenleri seçerek herhangi bir dosyaya eklenebilir.

Bileşenleri yuvalayabilir ve bunları ekip kitaplığında yayınlayabilirsiniz. Bu şekilde, tek tek kaynak öğelerden modüller oluşturabilir, daha sonra bu modülleri daha karmaşık görünümlerde ve diğer dosyalardaki akışlarda yeniden kullanabilirsiniz. Derinden iç içe geçmiş bileşenler, tek bir doğruluk kaynağının korunmasını inanılmaz derecede kolay ve öngörülebilir hale getirir.

3. Güncelleme

Marka yönergeleriniz değiştiğinde ve varlıkların güncellenmesi gerektiğinde ne olur? Değişiklikleri mevcut bileşen içinde yapın ve tekrar yayınlayın. Tıpkı onları ilk olarak ekip kitaplığına eklediğinizde ve son sürümden neyin değiştiğini görmek için hoş bir görsel fark göreceksiniz gibi bir onaylama aşaması alacaksınız. Kaynak dosyadaki bir bileşeni silip bu değişiklikleri yayınlarsanız, o bileşenin ekip kitaplığından da kaybolduğunu görürsünüz; böylece tasarım sisteminizin yalnızca geçerli bölümleri ekibinizle paylaşılır.

Ekip kitaplığındaki bir bileşeni değiştirebilmek, bileşen farklı UI araştırmalarında kullanıldığında sorunlu olabilir, bu yüzden işini kaybetmemek için ek bir adım attık. Farklı bir dosyada kullanmakta olduğunuz bir bileşende bir değişiklik yayınlandığında, sizi güncelleme için uyaran bir bildirim göreceksiniz. Kabul edip etmemeyi seçebilir ve daha sonra karar vermenize karar verirseniz daha sonra ekip kütüphanesi aracılığıyla güncelleyebilirsiniz.

Sonuç

Açık ve kurallara dayalı bir tasarım sistemi oluşturarak, UI bileşenleriniz mümkün olan en basit biçimde oluşturulabilir ve bakımı yapılabilir ve tüm güncellemeler sisteminizin geri kalanında öngörülebilecek ve kademeli olacak şekilde uygulanacaktır.

Bunu bugün bir beta özellik olarak başlatıyoruz, çünkü kullanıcı geri bildirimlerine dayanarak mümkün olan en hızlı şekilde honlanmaya başlamasını istiyoruz. Şu anda Figma.com'da Ekip Kütüphanelerini deneyebilirsiniz - sadece bir bileşen yapın ve 'Kütüphaneye Ekle'ye tıklayın!

Ne düşündüğünüzü ve bunu sizin ve iş akışınız için nasıl daha iyi hale getirebileceğimizi duymayı çok isteriz.