Figma’dan Ölçeklenebilir Flutter Tasarım Sistemi Nasıl Oluşturulur

Birden fazla uygulamaya geçen takımlarda, tasarım tutarsızlıkları ortaya çıkar—burada padding değişiklikleri, orada renk değişimleri, ve birdenbire "Figma'dan üretime" süreci bir şakaya dönüşür. Xenotix Labs'ta, ticaret, spor ve eğitim teknolojisi alanlarında 30'dan fazla Flutter uygulaması teslim ettik ve tasarım bütünlüğünden ödün vermedik. Sırrı daha fazla dokümantasyonda ya da teslimat toplantılarında değil; Figma tasarım sistemi ve Flutter kod tabanını tek, senkronize bir yapıt olarak ele almaktır.

Bileşenlerden önce token'larla başlayın

Tasarım token'ları, sisteminizdeki en küçük yeniden kullanılabilir değerlerdir: renkler, boşluklar, tipografi, gölgeler ve hareket süreleri. Bu değerleri Figma dosyaları ya da Dart sabitleri arasında dağıtmak yerine, bir JSON dosyasında tek bir kez tanımlayın ve hem Figma kütüphanesini hem de Flutter temasını buradan oluşturun. Örneğin:

{
  "color": {
    "primary": { "value": "#3F51B5" },
    "surface": { "value": "#FFFFFF" }
  },
  "space": {
    "xs": { "value": 4 },
    "sm": { "value": 8 }
  },
  "radius": {
    "card": { "value": 12 }
  }
}

Bir build script'i bu JSON'u, tokens.dart adlı, güçlü şekilde tiplendirilmiş sabitler içeren bir Dart dosyasına dönüştürür. Tasarımcılar, Tokens Studio eklentisini kullanarak aynı JSON'u Figma'ya aktarır. Bir token değiştiğinde, hem Figma'da hem de uygulamada otomatik olarak güncellenir. Tasarım ve kod arasında anlaşmazlık olmaz—ikisi de aynı kaynağa sahiptir.

Tasarım token'larını yansıtan bileşenler oluşturun

Düğmeler, giriş alanları ve kartlar gibi bileşenler token'ların üzerine inşa edilir. Her bileşen iki yerde bulunur: Figma'da varyantları ve özellikleri olan bir bileşen olarak ve bu özellikleri karşılayan adlandırılmış parametreleri olan bir Flutter widget'ı olarak. Önemli olan, her Flutter widget'ı token'ları referans alır, sabit değerleri değil:

XButton(
  label: 'Gönder',
  variant: ButtonVariant.primary,
  onPressed: () => print('Basıldı'),
)

Bu sayede, bir tasarımcı ana renk token'ını ayarladığında, variant: ButtonVariant.primary olan her XButton anında güncellenir. Manuel ayarlamalara gerek yok. Uyumsuzluk olmaz.

Widget karmaşasını azaltmak için önceden oluşturulmuş düzenleri kullanın

Birçok takım, aynı düzenleri baştan inşa etmekle vakit kaybeder: uygulama çubuklu ekranlar, başlık ve eylem düğmeli modallar, arama ve sayfalama özellikli listeler. Her proje için bunları sıfırdan yeniden inşa etmek yerine, içsel paketimizde yeniden kullanılabilir düzen ilkel bileşenleri oluşturduk:

• XScaffold(title, body, primaryAction) — üst uygulama çubuğu, ana içerik ve birincil eylem düğmesi olan standart bir ekran.
• XBottomSheet(title, body, dismissAction, confirmAction) — bir başlık, içerik ve iki düğmesi olan modal bir sayfa.
• XListPage(searchBar, items, onLoadMore, emptyState) — arama ve boş durum işleme özellikli sayfalanan bir liste.

Yeni projeler, widget düzeyinden değil, düzen düzeyinden başlar. Bir giriş ekranı sadece iki widget kullanabilir: bir XScaffold ve bir XInput — yirmi özel bileşen değil.

Her şeyi tek bir pakette birleştirin

Token'ları, bileşenleri ve düzenleri erken aşamada ayrı paketlere bölmekten kaçının. Erken ayrılma, bağımlılık sorunları yaratır ve mühendislerin birden fazla ithalatı yönetmesini zorunlu kılar. Bunun yerine, xenotix_design adlı tek bir paylaşılan paket kullanın, yapısı şu şekilde olsun:

• tokens/ — JSON'dan oluşturulur, hem Figma'ya hem Flutter'a aktarılır.
• components/ — XButton, XCard ve XInput gibi yeniden kullanılabilir widget'lar.
• layouts/ — XScaffold, XListPage ve diğer düzen ilkel bileşenleri.
• icons/ — özel ikonlar artı Lucide ikonları.
• test/ — görsel regresyon testleri.

Uygulamalar bu paketi Git ya da yol bağımlılığı olarak alır. Paketler pubspec.yaml dosyasını güncellediğinde, güncellemeler otomatik olarak yayılır. Sürümler semantik kuralları takip eder: kırıcı değişiklikler için ana sürümler, yeni bileşenler ya da düzeltmeler için küçük sürümler. Uygulamalar ana bir sürüme sabitlenir ve küçük sürümleri bağımsız olarak günceller.

Paylaşılan bir iş akışıyla teslimat sürtünmesini ortadan kaldırın

Figma'dan Flutter'a teslimat süreci genellikle en büyük hayal kırıklığı kaynağıdır. İş akışımız bunu tamamen ortadan kaldırır:

1. Tasarımcılar, token'lara bağlı paylaşılan tasarım sistemini kullanarak Figma'da çalışır.
2. Figma çerçevesini yayınlar ve