Tasarım Sistemini Kullanma
Kitaplığı bir ana uygulamaya kurmayı, tema sağlayıcısını uygulamayı, kullanılmayan bileşenleri ağaç sallamayla ayıklamayı ve sürüm yükseltmeleriyle güncel kalmayı öğrenin.
Tasarım Sistemini Kullanma, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Kurulum ve Yapılandırma
Tasarım sistemini bağımlılık olarak ekleyin. Bazı kütüphaneler ek kurulum gerektirir: sağlayıcı, CSS içe aktarma, yazı tipi yükleme.
npm install @yourorg/design-system
// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';
<DesignSystemProvider theme="light">
<App />
</DesignSystemProvider>Tema Sağlayıcısı
Çoğu tasarım sistemi tema (açık/koyu), yerel ayar ve paylaşılan bağlam için üst düzey bir sağlayıcı sunar. Uygulamanızı bununla bir kez sarın.
<DesignSystemProvider
theme={isDarkMode ? darkTheme : lightTheme}
locale="en"
>
<App />
</DesignSystemProvider>Bileşenleri İçe Aktarma
Yalnızca ihtiyacınız olanları içe aktarın — ağaçtan ayıklamayla birlikte yalnızca kullanılan bileşenler yayınlanır.
import { Button, Card, TextField } from '@yourorg/design-system';
function LoginForm() {
return (
<Card>
<TextField label="Email" type="email" />
<TextField label="Password" type="password" />
<Button variant="primary">Sign In</Button>
</Card>
);
}Alt Yol İçe Aktarımları
Bazı kütüphaneler, açıklık ve paket boyutundan tasarruf için alt yol içe aktarımlarını destekler.
// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card from '@yourorg/design-system/Card';
// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';Ağaçtan Ayıklama İpuçları
Ağaçtan ayıklama, paketleme sırasında kullanılmayan dışa aktarımları kaldırır. Gerekenler: ESM derlemesi, kütüphanenin package.json dosyasında sideEffects: false ve kodunuzda adlandırılmış içe aktarımlar. Bir paket analiz aracıyla doğrulayın.
Temayla Özelleştirme
Kütüphaneyi çatallamadan, tema belirteçlerini markanıza uyacak şekilde geçersiz kılın.
import { defaultTheme } from '@yourorg/design-system';
const customTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: '#ff5733'
}
};
<DesignSystemProvider theme={customTheme}>
<App />
</DesignSystemProvider>Bileşenleri Genişletme
Biraz farklı bir düğmeye mi ihtiyacınız var? Çatallamak yerine birleştirin.
import { Button as DSButton } from '@yourorg/design-system';
function IconButton({ icon, ...props }) {
return (
<DSButton {...props}>
<Icon name={icon} />
{props.children}
</DSButton>
);
}Yükseltmeden Önce CHANGELOG'u Okuma
MAJOR sürümlerine yükseltmeden önce her zaman CHANGELOG dosyasını okuyun. Uyumluluğu bozan değişiklikleri, geçiş kod dönüşüm araçlarını ve önerilen yeni API'leri arayın.
Büyük Yükseltmeler için Kod Dönüşüm Araçları
İyi kütüphaneler, uyumluluğu bozan değişikliklere yönelik geçişleri otomatikleştiren kod dönüşüm araçları (jscodeshift betikleri) sunar.
npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIsSürümü Sabitleme ve Caret Kullanımı
"^1.4.2", 1.x.y yükseltmelerine izin verir — kütüphane SemVer kurallarını bozuyorsa risklidir. "1.4.2", sürümü tam olarak sabitler — en güvenli seçenektir, ancak güncellemeyi elle yapmanız gerekir. Renovate ve Dependabot, haftalık güncellemelerin otomatikleştirilmesine yardımcı olur.
Sorunları Üst Projeye Bildirme
Bir hata mı buldunuz? En küçük yeniden üretim örneğiyle bir sorun bildirin. Bir özelliğe mi ihtiyacınız var? Önce bir tartışma başlatın. Düzeltmeleri üst projeye katkı olarak göndermek, tasarım sistemini herkes için iyileştirir.
Stil Geçersiz Kılmalarından Kaçınma
!important veya alt öğe seçicileriyle tasarım sisteminin iç işleyişine müdahale etmeyin. Genel tema API'sini kullanın. Geçici geçersiz kılmalar bir sonraki yükseltmede bozulur.
Hızlı Kontrol
Bir tasarım sistemi ESM ve adlandırılmış dışa aktarımlar kullanıyorsa yalnızca ihtiyacınız olan bileşenleri tüketmenin en temiz yolu nedir?
Özet: Tasarım Sistemi Tüketme
Yükleyin ve temayla birlikte DesignSystemProvider ile sarın. Ağaç budama için adlandırılmış ESM içe aktarımlarını kullanın. Markanız için tema belirteçlerini geçersiz kılın. Çatallamak yerine birleştirin. MAJOR yükseltmelerinden önce CHANGELOG dosyasını okuyun; sağlanmışsa kod dönüşüm araçlarını çalıştırın. Sürümü sabitlerken veya caret kullanırken dikkatli olun. Hataları ve PR'leri üst projeye bildirin. Genel API'yi !important kullanarak aşmaya çalışmayın.
Sıkça Sorulan Sorular
“Tasarım Sistemini Kullanma” dersi ücretsiz mi?
Evet — “Tasarım Sistemini Kullanma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Tasarım Sistemini Kullanma” dersinde ne öğreneceğim?
Kitaplığı bir ana uygulamaya kurmayı, tema sağlayıcısını uygulamayı, kullanılmayan bileşenleri ağaç sallamayla ayıklamayı ve sürüm yükseltmeleriyle güncel kalmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Tasarım Sistemini Kullanma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Storybook: Hikâyeler, Denetimler ve Belgeler
- Style Dictionary ile Tasarım Belirteçleri
- npm'ye Sürümleme ve Yayınlama
- Tasarım Sistemini Kullanma