Tasarım sistemlerinizi fraktal ile belgeleyin

Feb 2, 2026

Nasıl Yapılır

Tasarım sistemleri hakkında daha fazla şey öğrenmeyi seviyor musunuz? O zaman kıdemli UI mühendisini kaçırmayın Minya Markham yerinde New York'u oluştur 28 Nisan'da, Pantsuit'i nasıl oluşturduğunu tartışacağını tartışacak, Hillaryclinton.com'da barındırılan uygulamaların çoğunu kullanan tasarım sistemi. Ve batı kıyısında, San Francisco'yu oluştur 9 Haziran'da, Stephanie rewis Satıcı Tasarım Sistemini oluştururken öğrendiği derslerden bazılarını paylaşacak.

Şimdiye kadar, birçoğumuz tanıdık stil rehberleri . Ancak buhar kazanan yeni bir tasarım sistemi dokümantasyonu vardır: Desen Kütüphanesi. İkisi arasındaki ana fark, aracın belgelerinin birincil kaynağıdır.

Bir stil rehberinin dokümantasyonu, bir Markdown dosyasından kaynaklanma eğilimindedir, bu nedenle yazarın yazarın kopyalanması ve yapıştırılması zorunludur. Bu, birden fazla bileşeni bir araya getirirken korumak neredeyse imkansızdır.

Öte yandan, bir desen kütüphanesi, bileşen HTML dosyalarımızı birinci sınıf vatandaş olarak ele alır. Her bir bileşen kendi sayfasını alır, burada işaretlemeyi görüntüler ve HTML'yi doğrudan HTML dosyasından oluşturur. Bu, HTML dosyalarının ve belgelerin asla senkronizasyondan çıkmasını sağlar.

Desen kitaplıkları genellikle düz HTML yerine bir şablonlama dili kullanılarak oluşturulur. Şablonlar değişkenleri ve diğer mantığı içerebilir, ardından çeşitli veri kümelerinde geçebilir ve bir bileşenin varyasyonlarının görüntülenmesini sağlayabiliriz.

Daha karmaşık ekranlar veya hatta tam sayfalar oluşturmak için birkaç şablonun birleştirilmesi mümkündür. Bu dosyalar çok esnektir, hatta üretimde bile kullanılabilirler! Desen kütüphanemizde yapılan herhangi bir değişiklik, tüm işaretleri olarak, kütüphane veya üretim için tüm işaretler tarafından otomatik olarak alınır - tek bir kanonik şablondan kaynaklanır.

Design systems will be covered at both Generate New York and San Francisco this year — Tasarım sistemleri bu yıl da New York ve San Francisco'yu üretecek

Fraktal girin

Clearlev tarafından yaratıldı, Fraktal Web bileşeni kitaplıklarını oluşturmanıza ve belgelenize ve bunları projelerinize entegre etmenize yardımcı olur. Bu eğitimde, nasıl çalıştığına daha yakından bakacağız (demo'nun bitmiş bir sürümünü indirin) İşte ).

Fraktal, NPM üzerinden kurulan bir NODE.JS modülüdür. Öncelikle, modülü küresel olarak yüklemek istiyorsanız, yeni bir proje oluşturabilirsiniz:

npm install --global @frctl/fractal

Bu paket yüklü, yeni bir proje oluşturun:

fractal new project-name

Bu komut, kurulum işlemi boyunca sizi yürüyen bir kurulum rehberi başlatır. Projenin unvanını soracak; bileşenlerin, belgelerin ve ortak klasörlerin isimleri; Ve sürüm kontrolü için GIT kullanıyorsanız. Bu sorular tamamlandıktan sonra, Fractal gerekli tüm modülleri kurar ve belirtildiği gibi bir klasör yapısı kuracaktır.

Global yüklemeyi atlamak ve projeyi manuel olarak atlamak istiyorsanız, manuel kurulum talimatları bulunabilir. İşte .

Eğirme

Artık tamamen yüklü bir fraktal projeniz var, proje klasörüne adım atarak döndürün CD proje adı ve fraktal senkronizasyon komutunu çalıştırmak. Bu, yerel bir sunucuyu başlatır, değişiklikler için dosyaları izler ve otomatik olarak Broadersync'ü başlatır:

fractal start --sync

Ve tıpkı böyle, bir fraktalın çalışma örneğini aldın. Seçim tarayıcınızı açın ve gezin http: // localhost: 3000 Yeni fraktal projenizin başlangıcını görmek için. Herkesin küresel olarak fraktal kurmasını gerektirmekten kaçınmak için, içinde bir komut dosyası oluşturun. package.json Bu fraktal ikili çağırır.

 "Scripts": {
    "Fraktal": "./node_modules/.bin/fractal Start --Sync"
}

Şimdi kullanabilirsiniz npm fraktal çalıştırmak Global olarak bir şey yüklemek zorunda kalmadan.

Bir bileşen ekleme

Şimdi bir fraktal projeye başladınız, bazı bileşenler ekleme zamanı. Başlangıç dosyaları, 'örnek' olarak adlandırılan bir bileşenle gelir, ancak bundan kurtulacağız ve sıfırdan yeni bir tane yapacağız.

Fractal ile ilgili en iyi şeylerden biri, bileşenlerinizi örgütleyebilmenizdir, ancak bileşenler klasörünün içine hoşlanırsınız ve bu kuruluşu Desen Kütüphanesi navigasyonunda otomatik olarak taklit eder.

İlk bileşen için, içinde yeni bir birincil düğme oluşturacağız. düğme klasörü . Bunu yapmak için, bir şablon dosyasıyla oluşturun. Bileşenler / Düğmeler / Birincil düğme / primer-buton.hbs . Fraktal, Gidon Şablonlarını Kutunun dışında destekler, bu nedenle kullanın .hbs Dosya uzantısı:


    & lt; button class = "primer-buton" & gt; {{text}} & lt;

{{Metin}} Düğme etiketinin içindeki dize değişken bir yer tutucudur ve bu, şablonu yeniden kullanmanızı, farklı değerlerle geçmenize izin verir. Metin veri dosyasından.

Veri dosyasını oluşturmak için, aynı taban adını gidon dosyası olarak kullanın, ancak farklı yml uzantı. Şimdi primer-button.config.yml içinde oturmak Bileşenler / Düğmeler / Birincil Düğmeler Klasör şöyle görünmelidir:

 Başlık: Birincil düğme
Bağlam:
    Metin: Beni tıklayın

Bunların hepsi birlikte, ilk yeni bileşeninizi, birincil düğmesini, düğme kategorisinin bir üyesini oluşturur, metinle, 'Tıkla'.

Bileşen varyasyonları

Fraktal, aynı bileşenin varyasyonlarını destekler, aynı bileşeni çeşitli değiştirici sınıflar veya niteliklerle göstermemize izin verir. Öyleyse karanlık temalı bir düğme kullanma seçeneğine sahip olmak istediğimizi söyleyelim. Yeni bir şablon dosyası oluşturabiliriz. Birincil düğme - Dark.hbs Orijinal şablonumuzun yanında (çift çizgi bu bileşen varyasyonlarını belirtir). Bu şablonda, yeni stilleri takmak için bağlayabileceğimiz bir değiştirici uygulayacağız.

 & lt; düğme sınıfı = "birincil düğme" veri temalı = "koyu" ve gt; {{text}} & lt; / button & gt;

Şimdi CSS'lerimizi yazdığımızda, bu şablonu değiştirmek için aşağıdaki seçiciyi içerebiliriz.

 .Primary-button [Veri-tema = "Dark"] {}

Veri varyasyonları

Tıpkı birden fazla şablon dosyası oluşturarak varyasyonları tanımlayabileceğimiz gibi, verilerimiz dahilinde de varyasyonlar oluşturabiliriz. Bunu içinde yapabiliriz primer-button.config.yml Bir varyant dizisi ekleyerek dosya.

 Başlık: Birincil düğme
Bağlam:
    Metin: Beni tıklayın
varyantlar:
- İsim: İndir
    Bağlam:
Metin: Şimdi İndirin
- İsim: Yükleme
    Bağlam:
Metin: Şimdi yükleyin

Bu, 'İndir' ve 'Install' adlı yeni varyasyonlar oluşturacak, farklı metin düğmesine girdi. Daha pratik bir örnek, aynı kullanıyorsanız olabilir. primer buton.hbs fraktal ve üretimin yanı sıra şablon. Bu durumda, karanlık temanız için yepyeni bir şablon oluşturmak yerine, tema değerini bir değişken olarak geçirebilir ve tüm farklı düğme temalarını göstermek için veri varyasyonlarını kullanın.

 & lt; düğme sınıfı = "birincil düğme" veri temalı = "{{tema}}" & gt; {{Text}} & lt; / button & gt;

Başlık: Birincil düğme
Bağlam:
    Metin: Beni tıklayın
    Tema: Işık
varyantlar:
- İsim: Karanlık Tema
    Bağlam:
Metin: Beni tıklayın
Tema: karanlık

Diğer Varlıkları Kullanma

Fraktal ayrıca İşaretleme ve Veri dışındaki dosyaları da kullanır. Bileşen klasörüne eklediğiniz herhangi bir CSS, JavaScript, resim veya diğer varlıklar 'Varlıklar' sekmesinde görüntülenecektir. Belirtebilirsiniz Readme.md Bileşen için dosyayı, bileşenin nasıl kullanıldığı hakkında notlar yazabilir veya belgelerin diğer bölümlerine bağlayabilirsiniz.

Sonraki adımlar

Temel bileşenlerinizin tümü için önceki örneği tekrarlamak, sitenizin ana yapı taşlarının faydalı bir kataloğu oluşturur. Ancak bir desen kütüphanesinin gerçek gücü, bu parçaları bir araya getirme yeteneğinden gelir. Kontrol ettiğinizden emin olun. Fraktal dokümantasyon Daha büyük olanlar oluşturmak için daha küçük atom elemanlarını birleştirerek daha karmaşık bileşenler oluşturmaya nasıl başlayabileceğinizi öğrenmek için.

Dokümanlar klasörü, geleneksel stil rehber bilgilerini ve ek notları koymak için harika bir yerdir. Bu, onboarding belgeleri, markanızın ses ve tonu, renk ve değişken listeleri ve benzeri bir şeyleri kapsayabilir. Bileşenler yaptıkça aynı klasör tabanlı navigasyonu izler ve dosyalarınızı konu klasörlerinizde düzenlerseniz, gezinmeyi bulabilirsiniz. Fraktal dokümanlar bir esinti.

Fraktal ayrıca daha karmaşık veri kaynaklarını da destekler. Bir şablon için büyük bir veri seti oluşturmanız veya bazı üçüncü taraf API'sinden çekmek istiyorsanız, kullanabilirsiniz. bileşen-name.config.js YML dosyası verilerinin yerine bir JavaScript nesnesini döndürmek için.

Son olarak, fraktal bir dizi farklı şablonlama dilini kullanmanızı sağlar.Belgelerinde tam listeyi kontrol ettiğinizden emin olun.Ve hepsinden önemlisi, eğlenin!

Biletlerinizi ayırtın Üretmek bugün!İçinde New York Hillary Clinton'un başkanlık kampanyası için tasarım sistemini oluşturan Mina Markham'dan öğrenebilirsiniz ve San Francisco Stephanie Rewis, işletme ölçeğinde 'yaşayan bir tasarım sistemi' için modern bir CSS çerçevesi nasıl oluşturabileceğinizi ve geliştirebileceğinizi açıklayacaktır.

Bu makale başlangıçta Net Magazine Sayı 285'te yayınlandı, buradan satın al

Tasarım sistemlerinizi fraktal ile belgeleyin

Fraktal girin

Eğirme

Bir bileşen ekleme

Bileşen varyasyonları

Veri varyasyonları

Diğer Varlıkları Kullanma

Sonraki adımlar

Nasıl Yapılır - En Popüler Makaleler

8 Temel WordPress Güvenlik Sırları

Bir Chatbot Arayüzü Nasıl Yapılır

Web sitenize bir aksaklık efekti ekleyin

Vakfı ile kart tabanlı bir UI oluşturun

eskiz becerilerinizi geliştirin

Ressamın suluboya setlerini nasıl birleştireceğiniz

Geleneksel ve dijital becerileri komik bir kapak oluşturmak için birleştirin

How to make a flexible ribbon rig

Kategoriler