UI kit va dizayn tizimi

Tayyor bo'laklar, yagona uslub va jamoaviy qoidalar

9-sinfUX/UI dizayn5-hafta · 13-dars

Takrorlash

60-30-10 qoidasida 10% qaysi elementga beriladi?

10% — urg'u: asosiy harakat tugmasi. Bugun shu ranglarni «qoida»ga aylantiramiz.

UI Kit

Dizayner uchun vizual «konstruktor»

Muammo: 4 xil ko'k

royalblue

dodgerblue

steelblue

navy

5 dizayner — 5 xil tugma. Foydalanuvchi «tartibsizlik»ni sezadi, dasturchi har birini alohida kodlaydi.

UI Kit nima?

UI Kit — dizaynerlar va dasturchilar uchun tayyor va qayta ishlatiladigan interfeys komponentlari to'plami.

tugmalar ikonalar formalar navigatsiya panellari modal oynalar

4 afzallik

Vaqtni tejash

Elementni noldan yaratish shart emas.

Vizual uyg'unlik

Barcha komponentlar bir-biriga mos.

Moslashuvchanlik

Kitni o'z brendingizga moslaysiz.

Jamoaviy ishlash

Dizayner va dasturchi uchun yagona vizual til.

Mini-test

UI Kit'ning asosiy maqsadi nima?

Shu bilan birga brendning vizual tilini saqlaydi.

Dizayn tizimi

Komponentlar + qoidalar + hujjatlar

Dizayn tizimining 5 qismi

UI Kit va dizayn tizimi

UI Kit

LEGO bo'laklari qutisi: «Nima bor?»

⊂

Dizayn tizimi

Quti + yo'riqnoma + qoidalar: «Nima bor, qachon va nega?»

UI Kit — dizayn tizimining bir qismi.

Dizayn tokenlari

Token	Qiymat
`color-primary`	ko'k (HEX 2563EB)
`font-heading`	Poppins 24 / SemiBold
`font-body`	Inter 16 / Regular
`space-s · m · l`	8 · 16 · 24 px
`radius-m`	8 px

Pastga bosing: nega nom kerak?

Nega nom kerak?

Token o'zgarsa — u ishlatilgan barcha joy avtomatik yangilanadi. Figma'da: Styles va Variables.

Kichikdan kattaga

Atom — rang, shrift, ikonka, tugma
Molekula — qidiruv maydoni: input + tugma + lupa
Organizm — header: logotip + qidiruv + profil + savat
Sahifa — header + banner + kartalar + menyu

Mini-test

Qidiruv maydoni (input + tugma + ikonka) qaysi daraja?

Bir nechta atomdan iborat kichik guruh — molekula.

Figma amaliyoti

«E-kutubxona» uchun mini UI kit

UI kit sahifasi

1. Sahifa

Pages → + → nom: UI Kit.

2. Colors

5 ta 80 × 80 kvadrat → Fill → Style → + → Primary/500.

3. Typography

H1, H2, Body, Caption → Text style.

4. Buttons

Primary, Secondary, Disabled: 160 × 48, radius 8 — faqat stillardan.

Token sinovi

Primary tugma: Primary/500 = ko'k

Token sinovi

Stilni binafsha ga o'zgartiring → barcha Primary elementlar avtomatik yangilanadi.

HEX qiymatni qo'lda yozgan joylar yangilanmaydi — shuning uchun faqat stillardan foydalaning.

Amaliy topshiriqlar 30 daqiqa

OsonUI Kit yoki dizayn tizimi? 3 ta misolni ajrating.

O'rtaE-kutubxona token jadvali: 5 rang, 3 matn uslubi, 4 bo'shliq.

QiyinFigma'da UI Kit sahifasi: Colors, Typography, Buttons.

Dars xulosasi

UI Kit

Tayyor komponentlar; 4 afzallik.

Dizayn tizimi

5 qism: komponent, token, shablon, qoida, hujjat.

Figma

Color va Text styles — tokenlar.

Keyingi dars: Mashhur UI kitlar

Apple HIG, Ant Design, Bootstrap, Figma UI Kit, Material UI

5-hafta · 14-dars