Tasarımcılar için

Bu sistem ne sağlar

BigBang, üye işyeri internet şubelerinin ekranlarını tek bir görsel dil ve tek bir davranış kümesiyle kurar. Renk, tipografi, boşluk, köşe ve hareket kararları token’larda tanımlanır; bileşenler bu token’ları kullanır, ekranlar da bileşenlerden oluşur. Bir müşteri markası yalnızca kendi token dosyasını getirir, bileşenlerin yapısı ve davranışı değişmez.

Okuma sırası

1. Temeller: renk rolleri, tipografi ölçeği, boşluk ızgarası, köşe, yükselti ve hareket. Her temel sayfası token’ların açık ve koyu moddaki değerlerini gösterir.
2. Token’lar: token katmanlarını (ham değer, anlam, bileşen) ve marka değiştirmenin nasıl çalıştığını anlatır.
3. Bileşenler: genel bakış tablosu her bileşenin kategorisini, durumunu ve sürümünü gösterir; ada ya da kategoriye göre arayın, ardından tek tek bileşen sayfalarına geçin.
4. Kalıplar: form doğrulama, süzme, boş durum, yükleniyor, onay gibi birden çok bileşeni bir iş akışında birleştiren çözümler.
5. Şablonlar: uygulama kabuğu, giriş ekranı, yazdırma düzeni ve hazır ekran blokları; yeni bir ekrana buradan başlayın.

Bileşen sayfasını okuma

Her bileşen sayfasında aynı altı sekme vardır:

Sekme	İçerik
Örnekler	Canlı Storybook örneği ve sunucuda çizilen varyant örnekleri
Kullanım	Ne zaman kullanılır ve kullanılmaz, anatomi, davranış, yapılır ve yapılmaz örnekleri, metin kuralları
Teknik özellikler	Durumlar, ölçüler, kullanılan token’lar, hareket tablosu
Erişilebilirlik	Rol, klavye, odak, ekran okuyucu çıktısı, kontrast ve WCAG 2.2 eşlemesi
Kod	Kurulum ve özellik (prop) tablosu
Değişiklikler	Sürüm notları

Marka ve mod

Sağ üstteki Görünüm menüsünden markayı ve açık ya da koyu modu değiştirin. Sitedeki tüm örnekler gerçek bileşenlerdir ve seçiminize hemen uyar; bir tasarımın iki modda ve deneme markasında (Fixture) nasıl görüneceğini buradan kontrol edebilirsiniz.

Yeni bir müşteri markası için Tema üreticisi marka renklerinden aday bir marka dosyası üretir, kontrastı denetler ve sonucu gerçek bileşenler üzerinde gösterir.

Figma değişkenleri

Ölçü ve renk için bu sitedeki Teknik özellikler sekmeleri tek doğru kaynaktır.

Token değerlerini bir Figma dosyasına almak için İndirmeler sayfasındaki marka başına Figma değişkenleri dosyasını kullanın: renk rampaları, açık ve koyu moddaki anlam renkleri ile boşluk, köşe, kenarlık ve ikon ölçüleri. İkonlar İkon galerisinde ada ve anahtar kelimeye göre aranır.

Yeni bir ihtiyaç

Mevcut bileşenlerle karşılanamayan bir ihtiyaç için Katkı sayfasındaki karar akışını izleyin. Önce var olan bir bileşenin varyantı olup olamayacağı değerlendirilir; yeni bileşen ancak bundan sonra öneri süreciyle önerilir.