Design Systems va ularning hujjatlari

1) Dizayn-tizim nima va nima uchun zarur

Dizayn tizimi - bu interfeys uchun yagona haqiqat manbai: UX ning oldindan aytib bo’ladigan, ishlab chiqish tezligi va ko’paytirishni ta’minlaydigan tokenlar, komponentlar, amaliyotlar va hujjatlar to’plami.

• Barcha mahsulotlarda vizual va xulq-atvor qatlamining muvofiqligi.
• Tezlik: tarkibiy qismlardan qayta foydalanish, qisqichbaqaning xarajatlari kamroq.
• Sifati: umumiy A11y namunalari, mahalliylashtirish, testlar, kontent standartlari.
• Boshqaruvchanlik: aniq javobgarlik, relizlar, yo’l xaritasi.

2) Dizayn-tizim arxitekturasi (qatlamlar)

1. Dizayn-tokenlar (foundation): ranglar, bosmaxona, o’lchamlar, radiuslar, soyalar, chekinishlar, holatlar, shuningdek semantik tokenlar (’color. surface. warning`, `space. xs`).
2. UI komponentlari: tugmalar, kirish maydonlari, modal derazalar, dropdaunlar, jadvallar, tostlar, bannerlar, alertlar, bo’sh holatlar, skeletonlar.
3. Pattern va kompozitsiyalar: KYC shakllari, to’lov flolari, nol natijalar, qadam ustalar, kontent kartochkalari.
4. Kontent-xid (microcopy): ton, atamalar lugʻati, xato/muvaffaqiyat shablonlari, push/bannerlar.
5. Infratuzilma: A11y, test, mahalliylashtirish, versiyalar, omonatchilar bo’yicha qo’llanma (contributing).

3) Dizayn-tokenlar: tamoyillar

Semantika> «xom» uslub. ’color’ dan foydalaning. text. ’#6B7280’ oʻrniga muted’.
Temizlash va platformalar. Tokenlar manbai → platforma mappinglari (Web, iOS, Android, email).
Yorqin/qorong’u mavzu va tokenlar darajasidagi WCAG kontrast.
Global va kontekstlar:’space. 2`, `radius. md`, `elevation. 1`, `opacity. disabled`.
Tokenlarni versiyalash: o’zgarishlar - deprecation policy va migratsiya eslatmalari orqali.

4) Komponentlar: hujjatlardagi talablar va sahifa tarkibi

• Tavsifi va vazifasi. Qachon ishlatish/ishlatmaslik.
• Variantlar/holatlar. Oʻlchamlari, turlari (primary/secondary/ghost), disabled, loading, destructive.
• Foydalanish imkoniyati. Rol, klaviatura navigatsiyasi,’aria-’, kontrast, fokus halqa.
• Microcopy matni va misollari. Valid yorliqlar/pleysholderlar, xatolar, yordam.
• Kod namunalari. Minimal API, controlled/uncontrolled.
• Shakllar va i18n bilan integratsiya. Uzun satrlar, raqamlar/valyutalar/sanalar keyslari.
• Anti-misollar. Xato foydalanish namunalari.
• Test matritsasi. Vizual snapshotlar, unit/interaction, skrinriderlar.

5) Kompozitsiya patternlari (Recipes)

Ro’yxatdan o’tish shakllari: bosqichma-bosqich master, progress, validatsiya inline + summary, xato namunalari.
To’lov floalari: usulni tanlash, komissiyalar, muddatlar, same-method qoidasi, tasdiqlash va maqom.
Boʻsh holatlar: kontekst + qiymat + CTA, nol qidirish natijalari.
Muvaffaqiyatlar/xatolar: status ierarxiyasi, vizual tokenlar, tostlar/bannerlar/modallar.
Navigatsiya va filtrlar: global qidiruv, tezkor presetlar, teglar.
Pattern sahifalari microcopy va A11y izohlari bilan nusxa olish uchun tayyor tarkibni koʻrsatishi kerak.

6) Kontent-gidlar (voice & tone, microcopy)

Ovoz: professional, aniq; ton kontekstga bog’liq (onbording, to’lov, xavfsizlik).
Yagona atamalar lug’ati: to’lovlar, bonuslar, limitlar, KYC - mahsulot bo’yicha bitta qiymat.
Namunalar: CTA, xatolar, ogohlantirishlar, muvaffaqiyatlar, boʻsh holatlar, xabarnomalar.
Lokalizatsiya-first: mintaqa bo’yicha satrlar uzunligi, raqamlar/valyutalar/sanalar zaxirasi.
A11y-leksika: aniq yorliqlar, aria-tavsiflar, noaniqliklarsiz.

7) Accessibility (A11y) tizim standarti sifatida

Asosiy mezonlar: WCAG 2. 1 AA kontrast uchun, diqqat har doim ko’rinadi, klaviatura navigatsiyasi.
Rollar va atributlar: komponentlar’role’,’aria-label’,’aria-describedby’, tostlar/alertlar uchun hayot mintaqalarini tasvirlaydi.
Ekran riderlari: iboralar namunalari, oʻqish tartibi, toʻgʻri maqomi (’assertive/polite’).
Test-tartib-taomillar: avtomatik tekshiruvlar + qo’l stsenariylari.

8) Mahalliylashtirish va baynalmilallashtirish

komponent kodi yonidagi i18n-kalitlar + kontekst tavsifi.
Formatlash utilitlari orqali raqamlar/valyutalar/sanalar; matn shablonlarda hardcoding qilinmaydi.
Uzunlik testlari: «uzun nemis», «tor mobil», RTL variantlari.
Tovush: tanqidiy qadamlar uchun tone-map (to’lovlar/xavfsizlik).

9) Hujjatlar: tuzilma va navigatsiya

1. Kirish: vazifa, tamoyillar, javobgarlik zonalari.

2. Tokenlar: ranglar, bosmaxona, to’r, o’lchamlar, soyalar, holatlar, mavzular.

3. Komponentlar: filtrli katalog (roli boʻyicha, platformasi boʻyicha, A11y boʻyicha).

4. Patternlar: ssenariylar (shakllar, to’lovlar, bo’sh holatlar, muvaffaqiyat/xatolar).

5. Kontent: ovoz va ohang, lugʻat, microcopy shablonlari.

6. Accessibility: standartlar, chek-varaqlar, test-keyslar.

7. Mahalliylashtirish: bozorlar bo’yicha tamoyillar, misollar, so’zlar.

8. Integratsiya va kod: oʻrnatish, versiyalar, misollar, «how-to migrate».

9. Contributing: omonat jarayonlari, dizayn-revyu, kod-revyu, definition of done.

10. Changelog va Roadmap: relizlar, deprecations, rivojlanish rejasi, known issues.

10) Boshqaruv va jarayonlar (governance)

Rollar: tizim egasi (DesignOps/UX Platform), meynteynerlar (dizayn/FE), maslahatchilar (BE, A11y, lokalizatsiya).
O’zgartirishlar qo’mitasi: so’rovlarni baholash, prioritetlashtirish, API/tokenlarni kelishish.
Jarayonlar: yangi komponentlar uchun RFC, ichki issue shakllari, baglar bo’yicha SLA.
Definition of Done: dizayn (Figma) kod (UI-paket) doka (misol + gaid), testlar.

11) Contributing: qanday qo’shish/o’zgartirish kerak

RFC namunasi: muammo → variantlar → tanlangan yechim → A11y → i18n → migratsiya → xavflar.
Flou PR: dizayn-revyu → kod-revyu → UX-kopirayter → A11y-chek → reliz-notalar.
Qaytish mosligi qoidalari: buzilmaydiganlar uchun minor/patch, major - mumkin bo’lgan joyda deprecation va avtomatik migratsiya bilan.

12) Versiyalash, relizlar, migratsiya

Paketlar uchun SemVer (’@company/ds-core’,’@company/ds-forms’,’@company/ds-charts’).
Release notes: tokenlar, komponentlarning API oʻzgarishi, andoza xatti-harakatlar, breaking changes, migratsiya gaydlari.
Deprecations: dokdagi belgilar, linter-qoidalar, ommaviy almashtirish uchun kod-modalar.
Design-tokens pipeline: yagona manba (JSON/YAML) → platforma bildlari (CSS vars, iOS, Android).

13) Sifatni sinovdan o’tkazish

Xulq-atvor va holatlarning birlik-testlari.
Vizual snapshotlar (mavzular/holatlar regressiyasi).
A11y-testlar: avtomatik + qo’lda skrining ssenariylari.
Kritik floular uchun E2E-keyslar (ro’yxatdan o’tish, to’lovlar, KYC).
Perf-budjetlar: bandl/renderga limitlar va og’ir qaramlikka taqiqlar.

14) Dizayn-tizimning yetuklik metrikasi

Adoption:% DS foydalanuvchi ekranlar/repozitoriyalar.
Velocity: modeldan yetkazib berishgacha boʻlgan vaqt.
Quality: nuqsonlar 1 relizda UI/A11y.
Consistency: DS’dan tashqari «bir martalik» komponentlar/uslublar soni.
Docs: dock komponentlarini qoplash, ichki auditoriyaning NPS (dizaynerlar/ishlab chiquvchilar/tahlilchilar).

15) Anti-patternlar

Tokenlar semantikasiz palitra sifatida («oddiy rang»).
Hujjatsiz va ekstremal holatlarsiz komponentlar.
A11y eʼtiborsiz qoldirish (fokus, past kontrast, hech qanday’aria’).
Deprecation va migratsiya gidisiz buzuvchi versiyalash.
Komponentlardagi yashirin mantiq (UI xulq-atvor o’rniga biznes qoidalari).
API kengaytirish oʻrniga komponentlarni tor keys sifatida takrorlash.

16) Chek varaqlari

• Semantik nomlar va vazifalar.
• Ikkala mavzuda ham AA kontrastlari.
• Skeyllar va foydalanish prinsiplari hujjatlashtirilgan.

• Variantlar/holatlar qoplangan.
• A11y-tavsif,’aria-’, fokus.
• Microcopy misollari (yorliqlar, xatolar, maslahatlar).
• Kod va edge-keys namunalari (uzun satrlar, yuklash, boʻsh).
• Unit/visual/A11y-testlar yashil.

• Release notes oldin/keyin misollar bilan.
• Migration guide и deprecations.
• Yangilangan hikoya/demo, dokdagi havolalar.

17) «oldin/keyin» misollari

• Turli birlamchi tugmalar: ranglar/radiuslar/chekinishlar mos kelmaydi; turli CTA matnlari.

• Yagona’Button’tokenlari:’size = md’,’variant = primary’,’radius = lg’,’spacing = md’, «harakat + obyekt» uslubidagi matn.

• Texnik xabarlar, hech qanday maslahatlarsiz.

• ’ Xato sana formati. DDdan foydalaning. MM. GGGG ’+ avto-fokus.

18) Komponent sahifasi namunasi (skelet)

Nomi: Button

Tavsifi: harakatni boshlaydi; Ekranga 1 asosiy.
Variantlar: primary, secondary, ghost, destructive; oʻlchamlari sm/md/lg.
Holatlar: hover, focus, active, loading, disabled.
A11y: tugmachadan foydalanish mumkin;’aria-pressed’almashtiriladigan.
Microcopy: «Oʻzgarishlarni saqlash», «Tekshirishni davom ettirish». «OK» dan qochish.
Kod (masalan, API):’Button {variant, size, icon, loading}’.
Anti-misollar: bir xil ierarxiya darajasida ikki marta primary.
Testlar: vizual snapshotlar, kontrast, focus-ring.

19) Dizayn-tizimni joriy etish pleybuki (rollout)

1. Interfeys auditi: ranglar/bosmaxona/komponentlar/patternlarni inventarizatsiya qilish.
2. Button, Input, Select, Modal, Alert, EmptyState, Toast.
3. Hujjatlar va storibuk: tirik misollar, kod-snippetlar, gaydlar.
4. Pilot mahsulot: vidjetlarni almashtirish, qayta aloqa yig’ish.
5. Gid migratsiyasi: kod-modalar, deprecation qoidalari.
6. Jadvallar, paginatsiya, shakl forumlari, usta qadamlari toʻplamini kengaytirish.

7. Ko’paytirish: mahsulot patternlari (to’lovlar, KYC), analitika va A/B bilan integratsiya

8. Qo’llab-quvvatlash: savollar kanali, SLA, ichki mashg’ulotlar.

20) Hujjatlarning tezkor shablonlari

• Nomi:’color. border. warning`
• Vazifasi: Notice/Warning ogohlantirishlar va bannerlar doirasi
• Kontrast: AA’color fonida. surface. default`
• Kichik kegl matni uchun foydalanish mumkin emas
• Bogʻlangan:’color. surface. warning`, `icon. warning`

Namunaning namunasi: Boʻsh holat (noResults)

Maqsad: «xato» tuyg’usisiz so’rovni tuzatish

Tarkibi: sarlavha (ops.) , matn (1-2 jumla), CTA, ikkilamchi CTA, ikonka/rasm

Microcopy: «{query}» uchun hech narsa topilmadi. Filtrlarni olib tashlang yoki soʻrovni aniqlashtiring"

A11y: `role="status"`, `aria-live="polite"`

Yakuniy shpargalka

Semantik tokenlar + intizom A11y = baza.
Komponent sahifalari toʻliq: maqsad, variant, A11y, microcopy, kod, testlar.
Patternlar = tayyor matnlar va qoidalar bilan kompozitsiyalardan iborat kompozitsiyalar.
Docs - mahsulot: versiya, relizlar, migratsiya, hissa qo’shish jarayoni.
Etuklikni oʻlchang: adoption, tezlik, nuqsonlar, konsistentlik, ichki buyruqlarning NPS.