Şirket genelinde kullanılacak bir design system / component library nasıl kurarsınız?

Design system; design token'lar, erişilebilir temel bileşenler, dokümantasyon ve sürümleme sürecinden oluşan bir üründür. Amaç tutarlılık ve ekiplerin hızlanmasıdır.

Katmanlar

1. Design tokens: Renk, boşluk, tipografi, radius, gölge. Tek kaynaktan (ör. JSON, Style Dictionary) CSS custom property'lerine dönüştürülür; tema (dark mode, marka) değişkenleri değiştirerek yapılır.
2. Primitives: Box, Stack, Text gibi layout yapı taşları.
3. Bileşenler: Button, Dialog, Combobox... Davranış ve erişilebilirlik için çoğu zaman headless kütüphaneler (Radix UI, React Aria) üzerine stil giydirilir.
4. Pattern'ler: Form layout, boş durum, tablo gibi kalıplar.

Bileşen API ilkeleri

• Native özellikleri geçir (...props, ref), className ile genişletmeye izin ver.
• variant, size gibi sınırlı seçenekler; serbest stil yerine tasarım kısıtları.
• Composition: <Dialog><Dialog.Title/><Dialog.Content/></Dialog>.

Altyapı

• Monorepo (pnpm workspaces, Turborepo), tree-shake edilebilir ESM çıktı, sideEffects: false.
• Storybook ile dokümantasyon, Chromatic/Playwright ile visual regression, axe ile otomatik a11y testi.
• Semver ve Changesets ile changelog; breaking change'ler için codemod ve deprecation süresi.

Benimsetme

Kütüphane yazmak işin yarısıdır: katkı rehberi, tasarım (Figma) ile kod arasında aynı isimlendirme ve kullanım metrikleri gerekir.