İyi Bir Tasarım Sistemi İçin Bir Reçete

Bu makale, ön uç ekiplerin harika tasarım sistemleri oluşturmasını ve göndermesini sağlayan ortak bir platform olan Backlight'taki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Gerçek dünyaya yaklaştıkça nüanslar ortaya çıkmaya başlasa da, teoride herkesin “Tasarım Sistemi”nin ne anlama geldiği konusunda nispeten benzer bir konsepti vardır. Hedef hala aynı olabilir, ancak farklı kuruluşlar bunları gerçekleştirmek için çeşitli stratejiler gerektirecektir. Mühendislik ve mimarideki pek çok karmaşık görevde olduğu gibi, iyi bir Tasarım Sistemini oluşturan şey için gümüş kurşun yoktur.

Başarılı çabalar, takımların ve en iyi uygulamaların ortaya çıkmasına izin veren birkaç ortak modeli paylaşıyor olsa da. Bu yazımızda, bir Tasarım Sistemi çatısı altında hangi çözümlerin yer aldığına ve projeleriniz boyunca göz önünde bulundurmanız gereken birkaç önemli adıma ve kontrol noktalarına göz atacağız. Deneyimlerimiz farklı olabilir, ancak umarım, kişisel olarak başarısız olduğum ve başarılı olduğum yerlerde sizin için öğrenmeler olacaktır.

Amaç ve Anlam

Bir "sistem"i birlikte çalışan parçaların bir bileşimi olarak ve "tasarım"ı bir şeyin görünüş ve işlevinin planı olarak düşünürsek. O zaman Tasarım Sistemini, bir sistemin birbirine bağlı parçalarının görüneceği, hissedileceği ve çalışacağı kalıpları dikte edecek bir tanımlar topluluğu olarak anlayabiliriz. Bu hala oldukça soyut, ancak göründüğünden daha fazlası olarak anlamak için yeterli.

Bir yapboz gibi bir araya getirdiğiniz ve tutarlı bir düzene ulaştığınız bir bileşen kitaplığı değildir. Bir tasarım sisteminin gerçekten bir sunum yönü vardır, ancak aynı zamanda işlev ve entegrasyon ile de ilgilidir. Bu deneyimle ilgilidir.

• Kullanıcı deneyimi
  Güvenilir ve işlevsel olarak tutarlı bir kullanıcı arayüzü ile.
• Geliştirici Deneyimi
  Entegre edilmesi kolay bileşenler ve tanımlanmış desenlerle.
• Paydaş Deneyimi
  Ürünün nasıl geliştiğine ve büyüdüğüne dair genel bir bakış ile.

Bu kadar çok hareketli parça ile, tüm tasarım sistemleri için tek bir cevap olmadığı anlaşılabilir.

Kasıtlı vs Organik

Bir ekip bir Tasarım Sistemi oluşturmaya karar verdiğinde, önceden karar vermeleri gereken iki yaklaşım vardır:

• Organik
  Mevcut bir uygulamayı referans olarak alın, parçalarını çıkarın ve başka bir uygulama tarafından kullanılacak kadar soyutlayın. Bu yaklaşım, başlangıçtan itibaren daha az karar alır, ancak benimseyenler tarafından yeni bulunan gereksinimleri karşılamak için ekibin daha reaktif çabasını gerektirir. Mimari kararlar, proaktif olmak yerine ihtiyaç ortaya çıktıkça alınma eğilimindedir.
• kasıtlı
  Belirteçler, desenler ve bileşenler önceden düşünülür. Minimum uygulanabilir ürünün (MVP) sınırları belirlenir ve çalışma başlar. Bu yaklaşım için hedeflere ve gereksinimlere sahip olmak, beklentileri paydaşlarla uyumlu hale getirmek için önemli bir adımdır.

Organik

Tasarım Sisteminin organik olarak gelişmesine izin verirken, çabanın başarısı, paydaşların ve benimseyenlerin satın almasına bağlıdır. Ve ekip, yol boyunca buldukları tüm bilinmeyenleri , sürekli destekle aşırı derecede yıkıcı olmadan temizlerken ne kadar etkili tepki verebilecek. Bu zor bir yol ve iletişim çok önemli. Takımın bağlamıyla sıkı bir şekilde bağlantılı olduğu için net bir eylem yolu yoktur.

Ek olarak, sistem çalışırken ince ayar yapmak zordur (yerel elektrikçinize sorun) ve görevler zaman aldıkça gereksinimler değişebilir: piyasa bileşen kitaplığınızı beklemez. Organik bir Tasarım Sistemi için olağan bir "yap ya da kır" anı, bir bileşen MVP'sinin (minimum uygulanabilir ürün) geliştirme hikayesini bulmaktır.

Bir yandan, mümkün olan en iyi deneyimi ve mükemmel kod kalitesini oluşturmak isteyen geliştiricilerimiz ve tasarımcılarımız var; diğer yandan, başarıyı ölçmek için KPI'lar, ROI'ler ve kısaltmalar grubu vardır. Dengeyi ve kalan ölçeklenebilirliği bulmak zor. Bitmemiş bir şeyi soyutlamak daha da zordur ve bu takip görevlerinin biriktirme listesinde unutulmasını önlemek, ürün yönetiminin bir milyon dolarlık sorusudur.

Organik yaklaşımla uğraşırken Tasarım Sisteminizde hızlı ve aşamalı olarak yineleme yapabilmek temel bir gereklilik haline gelir. Ayrıca, tüketici geliştiricilerinizden ekstra bir netlik düzeyi gerektirir (ayrı ekipler olması durumunda: biri Tasarım Sistemini oluştururken, diğeri ürün özelliklerini oluştururken). Her ikisi de, uygun bir ortak yaşama sahip olmak için beklentileri ürün gereksinimlerine ve geliştirici deneyimi gereksinimlerine göre net bir şekilde hizalamalıdır. Çünkü bir Tasarım Sistemi, kullanımı rahatsız ediciyse veya kullanıcı deneyimini herhangi bir şekilde daha da kötüleştiriyorsa hiçbir şey değildir.

kasıtlı

Tasarım Sistemini kullanmak için bir ürüne sahip olmadan önce bilinçli bir seçim yaparken, daha fazla planlama yapılması, bilinmeyenlerin temizlenmesi ve hazırlanması gereken altyapı vardır. Flipside, kısıtlamalarla daha fazla netlik getiriyor. hedefler, beklentiler. Limandan ayrılmadan önce yelkenler iki kez kontrol edilirse fırtına daha az korkutucu olur.

Sistemin öngörülebilirliği, önceden planlama yaparken de artar ve bunun nedeni, Tasarım Sisteminin başkalarını daha iyi hale getirme aracı değil, kendi ürünü haline gelmesidir. Bu soyutlama ile diğerlerinde kullanılan kalıplar ve çözümler daha kolay taşınır.

Organik yerine Kasıtlı seçimi ilk başta daha az deneyime sahip ekipler için test edilecek bir kavram kanıtı olmadığı için verimsiz görünse de, başlarken yaygın tuzaklardan kaçınmak özellikle yararlıdır. “Devlerin omuzlarında durmak” yaygın bir jargondur ve bu durumda doğruyu ifade eder. Dolayısıyla, bu konuda ileriye dönük en iyi tarif kabaca şöyle olmalıdır:

1. Temel gereksinimleri belirleyin;
2. Benzer durumlar için erken ve kapsamlı araştırma yapın;
3. Zımni çözümler ve stratejiler için 2'den elde edilen sonuçları gözden geçirin;
4. Ortak çözümlerin bir kombinasyonunu bir araya getirerek ve kendi sosunuzu ekleyerek her şeyi kendiniz yapın;
5. Yineleyin.

Bu beş adım kulağa basit ve açık gelebilir, ama değiller. İhtiyaç toplantılarından birini atlamak veya araştırmayı kısa kesmek kolaydır. Yine de bir tavsiye: Bunlardan herhangi birini unutursanız, 4. adımda faiz ödeyeceksiniz.

Verimlilik İçin Yapın

Bir bağımlılık güncellemesi uygulamalarını herhangi bir şekilde bozduğunda hiçbir paket tüketicisi hoşlanmaz. Söz konusu paketin bir Tasarım Sisteminin parçası olması farklı değildir. Aslında daha kötü olduğu söylenebilir. Bir uygulamayı bozan kurum içi bağımlılığın geri tepmesi, açık kaynaklı bir paket olduğunda olduğundan daha büyük olma eğilimindedir, ayrıca, kullanıcı arayüzü değişiklikleri ilk önce son kullanıcıların önünde "sessizce kırılma" eğilimindedir: bu özellikle sinir bozucudur.

Bunu akılda tutarak, şimdiden birkaç konuyu sıralayabiliriz:

• API Belgeleri
  Keşfetmeyi ve kullanmayı kolaylaştırın.
• sürüm oluşturma
  Sürümlerin tüketicileri nasıl etkilemesinin beklendiğini gösterir.
• değişiklik günlüğü
  Her sürümün taşıdığı değişiklikleri gösterir.
• serbest bırakma
  Kararlı kodun tüm tüketiciler için kolay teslim edilmesini sağlamanın akıllıca bir yolu.
• Geliştirme Ortamı
  Henüz onu kullanan bir uygulama yok, eserlerin nasıl sergilenip geliştirileceğini anlaması gerekiyor.

Belirtmek önemlidir, bu öğelerin her birinin ne kadar öncelikli olduğu kilometrenize göre değişebilir. Ancak Tasarım Sistemi ölçeklendikçe, benimseme arttıkça ve özellikler büyüdükçe onlara olan ihtiyaç artacaktır. Bir ekibin ilerlemesini engellemek için yeterli olmayabilirler, ancak bu çözümleri bulmak için kapasite çarpıksa, kesinlikle üretkenliği engellerler.

Gerçeğin Kaynağı

Pek çok ekibin karşılaştığı bir diğer olası acı noktası, bir Tasarım Sisteminde gerçeğin kaynağını belirlemektir. Kod mu, kullanıcı arayüzü mü yoksa dokümantasyon mu? Birçok ürün çeşidi için sadece tüketici tarafına bakarız ve ana çıktının ne olduğunu kolayca tespit edebiliriz. Bu durumda zor olmasının nedeni, her tür tüketicinin onu farklı şekilde kullanması ve bu nedenle cevabın sorulan demografiye göre değişmesidir.

Tasarım Sistemi genellikle bir bileşen kitaplığı, belgeler ve stil kılavuzunun bir karışımıdır. Ve bu eserlerin her biri için sadece tüketici değil, zanaatkar da farklıdır. Bir geliştirici, tasarımcı, teknik yazar; her çıktıyı oluşturmak için farklı insanlar gerekli olacaktır.

Sıcak patates

Teslimatın tutarlı olmasını sağlamak için iletişim ve işbirliği çok önemlidir. Halihazırda kurulmuş olan şelale benzeri süreç, ikisi için de cesaret verici değil.

Her uzmanlığa dayalı olarak işbirliği veya yineleme için tasarlanmış (amaçlı) bir alan yoktur. Çoğu zaman tasarımcı bazı kod sınırlamalarından habersizdir ve geliştirici çıktı için tasarlanan UX hakkında bilgi sahibi değildir. Bu yaklaşım son derece önyargılı değil, onunla iyi bir ürün yaratmak mümkün. Ancak harika bir tanesi zordur, ekip düzeltmek için aktif bir çaba göstermedikçe sürecin her bir parçası neredeyse bağlantısızdır.

Her zaman şaşırtıcı olan Dan Mall ve Brad Frost, yeni bir süreç için eşit derecede harika bir isim buldular: Sıcak Patates. Bu süreç sadece iletişimi teşvik etmekle kalmaz, aynı zamanda işin gerçeğinin kaynağını birleştirerek takıma doğrudan işbirliğini dayatır. Bununla birlikte, teslim edilen her eser yalnızca ortak bir kökeni paylaşmakla kalmaz, aynı zamanda birleşik ekibin uzmanlığının bir ürünüdür.

Yine de bu tür bir işbirliğini sorunsuz hale getirmek, söylemek yapmaktan daha kolay. "Sessiz kaldın", "bağlantım kesildi" ve "beni duyabiliyor musun?" Sıkıntılar, bir araya getirildiğinde bilgi alışverişi kolayca gayri resmi olma eğilimindedir ve daha sonra süreç belgelenmesi zor veya çok senkronize olabilir. Daha az darboğaz istiyoruz, daha fazlasını değil.

Canlı işbirliği, akranlar arasında büyük boyutlara ulaştı. VSCode Share veya Figma'nın FigJam'leri, bulut IDE'leri gibi birçok seçenek vardır. Ancak farklı uzmanlıklar arasında yineleme yapmak söz konusu olduğunda, bu çok kolay değildir. Bunu, önceki bölümlerde bahsedilen alet takımı, mimari veya süreç yığınına ekleyin ve daha çalışmaya başlamadan önce yapmanız gereken bir yığın iş var.

Bir Sistemin Mimari

Yukarıda belirtildiği gibi, bir tasarım sistemini sürdürmek çok fazla iştir. En iyi tavsiye muhtemelen denemek ve mümkün olduğunda bir şeyleri sıfırdan yapmamaktır. Uygun olan yerlerde topluluk kaynaklarını kullanın. Bunu yapmak, sistemin belirli noktalarını korumak için daha az zaman harcayacak ve sistemin belirli bölümlerine zaten aşinalarsa, mühendislerin ve tasarımcıların işe alınmasına yardımcı olacaktır.

Arka Işık geliyor. Tüm bu mimari kurulumunu hızlandırmak için bir dizi aracı üzerinde düşünülmüş ancak esnek bir şekilde bir araya getiren bir hizmet olarak platformdur. Sıfırdan başlayabilir veya projenize en uygun başlangıç ​​şablonunu seçebilirsiniz. Tamamen gerekli değilse hiçbir tekerlek yeniden icat edilmez, tüm başlangıçlarında topluluk kaynaklarını kullanırlar (denediğim, Yogi, ChakraUI'ye dayanmaktadır), onlar için daha az bakım gerektirir ve tüketici kilitlenmekten endişe etmez. Ek olarak, kod, sürüm oluşturma platformunuza iletilecektir, bu nedenle gerekirse hareket etmekten yalnızca birkaç kabuk komutu uzaktadır.

Bir kez orada, bir sürüm oluşturma platformu (Gitlab ve GitHub desteklenir), Storybook tabanlı bir sanal alan, bir VSCode tabanlı IDE, birim testleri ve hatta NPM kayıt defterine yayınlama ile entegrasyon ayarlayacaktır (bu sonuncusu, onlarla olan planınıza bağlıdır. sizin veya onların hesabına olabilir).

Çoklu Çıkışlar

Çoğu Tasarım Sisteminin gerektirdiği en az 3 farklı çıktı olduğunu daha önce haritalamıştık: dokümantasyon, kod, kullanıcı arayüzü. Mimari her birinin çıktısını almaya hazır olduğunda, ekip genellikle başka bir zorlukla karşılaşır: onları senkronize halde tutmak. Geliştiriciler her zaman değişiklikleri atomik hale getirmeye heveslidir, bir yere dokunursunuz ve bu bilgiyi tüketen her yere yayılırlar. Bir Tasarım Sisteminde, bunun nasıl başarılacağı her zaman açık değildir.

Sıcak Patates Sürecini takip etmiyorsanız, geliştiriciler tarafından halihazırda hangi UI güncellemelerinin ele alındığının izini kaybetmek kolaydır. Ve yapsanız bile, o zaman belgeler var. Arka ışık, her şeyi sıralayarak bu sorunu giderir.

Ve değişiklikler yapıldıktan sonra, platformun kontrol panelinden ayrılmadan. Güncellenmiş canlı belgeleri kontrol etmek mümkündür.

Ve tüm bunlar, mimarinizi güçlendirebileceklerinin yalnızca yüzeyini tırmalamaktan başka bir şey değil. Ayrıca şunları elde edersiniz:

• “Görsel İnceleme” özelliği ile Çekme İsteklerinde ekran görüntüsü testi
• Yerleşik Birim Testleri ile Test Odaklı Geliştirme desteği
• Canlı önizlemeli korumalı alan

Tasarım Sisteminiz için eksiksiz bir geliştirme ortamıdır. Ve başlangıçlarını kullanmamaya karar verseniz bile tüm bu entegrasyonları elde edersiniz. Tasarım Sisteminizi sıfırdan besleyecek bileşen kitaplığını oluşturmanız için altyapı orada.

Gerçek Zamanlı Uzaktan İşbirliği

Daha önce de belirtildiği gibi, Sıcak Patates Süreci, ekiplerin uzaktan ve asenkron bir çalışma yöntemi kurması için zahmetli hale gelebilir. Arka ışık, iki özelliğin birleşimiyle şunları ele alır:

• Tasarım entegrasyonu;
• Canlı bir bağlantı paylaşın.

Tasarım entegrasyonu, tasarım aracınızın tasarım eserini aynı platform içinde getirir. Böylece ekibin geri kalanı aynı panodan bakabilir, yorum ekleyebilir ve çalışmalara referans verebilir:

Bu özellik sayesinde, ekibiniz nerede olursa olsun, sıcak patates süreci çizim tahtasında başlar. Sekmeleri değiştirmeden, kendi yapabileceğim her şeyden çok tanıtım gifleriyle daha iyi açıklanan bağlantı paylaşma özelliğiyle kodlama sürecini de sorunsuz hale getiriyor. Geliştiriciler, herhangi bir yerde herhangi bir şey yayınlamadan, herhangi bir işlem arası olmadan çalışmalarının gerçek zamanlı uzaktan bağlantısını paylaşabilir; bu, ayrıntılı çalışmayı hızla yinelemesi gereken ekipler için büyük bir destektir.

paket servisler

Henüz değilse, umarım, bir Tasarım Sistemi oluşturmanın ve sürdürmenin ne anlama geldiği şimdi daha açıktır. Bir avuç CSS sınıfından, belirteç tanımından ve yazı tipinden çok daha fazlası; araçlar, aktif destek ve savunuculuktur. Bir projenin kullanışlılığı, çıktısının kalitesi ve sürekli değişen gereksinimlere ne kadar hızlı uyum sağlayabildiği ile belirlenir.

Yani başka bir şey değilse de, projenizi oluştururken kendinizi üretken ve verimli olmaya hazırlayın. Hâlâ zemininizi buluyorsanız, Arka Işık gibi araçlar size mantıklı varsayılanlar ve kullanıma hazır harika bir Kullanıcı Deneyimi ile yardımcı olacaktır. Zaten belirli bir mimariye sahipseniz, savaşlarınızı akıllıca seçin ve gerisini halletmek için topluluğu kullanın.