Uyga vazifa
Har bir vazifa 20–40 daqiqa. Barcha ishlarni bitta «E-kutubxona» Figma faylida (alohida sahifalarda) saqlang. Topshirish: keyingi dars boshida mentorga Figma havolasini (view huquqi bilan) ko'rsating.
13-dars uchun (UI kit va dizayn tizimi tushunchasi)
1-topshiriq: «E-kutubxona UI kit sahifasi»
- 13-darsda boshlangan
UI Kit sahifasini oching (Colors, Typography, Buttons). - Inputs bo'limini qo'shing: oddiy (default), fokus (focus) va xato (error) holatidagi 3 ta matn maydoni (320 × 48, radius 8).
- Barcha elementlarda faqat Color styles va Text styles'dan foydalaning — HEX qiymatni qo'lda yozmang.
- Sahifa yon tomoniga token jadvalini matn sifatida yozing: 5 rang, 3 matn uslubi, 4 bo'shliq (8, 16, 24, 32).
Kutiladigan natija: 4 bo'limli (Colors, Typography, Buttons, Inputs) UI kit sahifasi va token jadvali; Primary rang o'zgartirilganda tugma ham yangilanadi.
14-dars uchun (Mashhur UI kitlar)
2-topshiriq: «Tayyor kitdan o'rganamiz»
- Figma Community'dan bitta UI kitni oching (Material 3 Design Kit, iOS UI Kit, Ant Design yoki Bootstrap).
- Undan 5 ta komponentni nusxalang: button, input, checkbox, card, navbar (yoki tabs).
- Ularni «E-kutubxona» stillari (13-dars) bilan qayta bo'yang.
- 3–4 jumlali izoh yozing: kit nimasi bilan yoqdi / yoqmadi, «E-kutubxona» uchun mosmi va nega.
Kutiladigan natija: Kit tahlili frame'ida 5 ta qayta bo'yalgan komponent va asoslangan izoh.
3-topshiriq: «E-kutubxona sahifasini to'ldirish»
- Darsda yaratilgan header va kategoriya paneliga asosiy menyu qo'shing: «Bosh sahifa», «Yangi kitoblar», «Mualliflar», «Aloqa».
- «Barcha kitoblar» tugmasini va kontent qismida banner joyini (Rectangle) qo'shing.
- Yagona uslub: bir xil ranglar (stillar), Inter shrifti, bir xil radius, 8-point grid oraliqlari; red guides bilan masofalarni tekshiring.
- Qidiruv blokini (
Search/Default) va tugmani komponentga aylantiring.
Kutiladigan natija: header, menyu, kategoriya paneli, tugma va banner joyidan iborat, yagona uslubdagi sahifa qismi; Assets'da kamida 2 ta komponent.