Jamoaviy ishlash va Dev Mode

Ulashish va ruxsatlar, sharhlar, versiya tarixi, Dev Mode, handoff ro'yxati

9-sinfUX/UI dizayn va Advanced Front-end6-hafta · 18-dars

Bugun nimalarni o'rganamiz?

Ulashish va ruxsatlar

Kim nimani qila oladi

Sharhlar va versiyalar

Fikr va tarix

Dev Mode

Dizayndan kodga

Takrorlash

Main component o'zgarsa, instance lar bilan nima bo'ladi?

Instance lar bog'liq.

Ulashish va ruxsatlar

Kim nimani qila oladi

Ulashish tartibi

Ruxsat tanlash qoidasi


Mentor, dasturchi, mijoz : Can view
Jamoadosh dizayner       : Can edit
Ommaviy havola           : faqat kerak bo'lsa, Can view
Ish tugagach             : keraksiz ruxsatni olib tashlash

Havolasi bor har kim tahrirlay oladigan (Can edit) ommaviy havola — xavfli: dizayn tasodifan buzilishi yoki o'chirilishi mumkin.

Mini-test

Dasturchiga dizaynni ko'rsatish uchun odatda qaysi ruxsat yetarli?

Eng kam ruxsat: faqat ko'rish.

Sharhlar va versiyalar

Fikr va tarix

Sharh aylanishi

Yaxshi sharh namunasi


Yomon  : "Yoqmadi"
Yaxshi : "Header: qidiruv tugmasi matni
         ko'rinmayapti. Fonni to'qroq qilsak-chi?"
Kimga  : @dasturchi (agar kod uchun)
Holat  : hal bo'lsa Resolve

Muhim bosqichdan oldin versiyani nom bilan saqlang: «Komponentlar tayyor», «Handoff v1». Keyin qaytish oson.

Mini-test

Sharh qoldirish tugmasi?

C — Comment.

Dev Mode

Dizayndan kodga

Handoff

Dev Mode qiymatlari → loyiha CSS


/* Figma Dev Mode bergan (taxminan) */
.karta { width: 280px; padding: 16px; border-radius: 12px; }

/* Loyihamizga moslangan */
.karta { max-width: 17.5rem; padding: 1rem; border-radius: 0.75rem; }

Qotirilgan width: 280px ni to'g'ridan-to'g'ri ko'chirmang: responsiv maket uchun max-width va rem ishlating (8-sinf, 15–16-darslar).

Mini-test

Dev Mode da olingan CSS ga nisbatan to'g'ri yondashuv?

Figma kodi — boshlang'ich nuqta.

Can view va Can edit

Can view

Faqat ko'radi va sharh qoldiradi; dizaynni buza olmaydi

Can edit

Tahrirlaydi; faqat jamoadoshlarga beriladi

Eng kam ruxsat qoidasi.

Atamalar. Bosing

bosing

Faylni ulashish tugmasi

Resolve

bosing

Hal bo'lgan sharhni yopish

Version history

bosing

Fayl o'zgarishlari tarixi

Dev Mode

bosing

Dasturchi uchun qiymat va kod ko'rinishi

Handoff

1. Ulashish

Can view bering.

2. Sharh

Fikr va Resolve.

3. Dev Mode

Qiymat va eksport.

Handoff ro'yxati

Tekshiruv	Nima uchun	Qachon
Qatlam nomlari ma'noli	Dasturchi tez topadi	Topshirishdan oldin
Komponentlar ishlatilgan	Izchillik va oson yangilash	Topshirishdan oldin
Rang va shriftlar bir tizimda	Kodda o'zgaruvchilarga aylanadi	Topshirishdan oldin
Assets eksport qilingan	SVG, PNG, JPEG tayyor	Topshirishdan oldin
Barcha holatlar chizilgan	Hover, disabled, xato	Topshirishdan oldin

Pastga bosing: handoff ro'yxati

Dizaynni topshirish

Faylni sinfdoshingizga Can view ruxsati bilan ulashing va havolani tekshiring.
Sinfdoshingiz dizaynida kamida 2 ta sharh qoldiring (1 ta taklif bilan).
Kitob kartasidagi o'lcham, masofa va ranglarni Dev Mode yoki Design paneldan olib, CSS yozing.

Sharh yozish


Yoqmadi

Sharh yozish


Header: tugma matni ko'rinmayapti. Fonni to'qroq qilsak-chi?

Hamkorlik raqamlarda

ruxsat darajasi: view va edit

sharh qoidasi: aniq, muloyim, taklif bilan

asosiy qiymat: o'lcham, masofa, rang, shrift

Yaxshi handoff — kam savol va kam xato.

Amaliy topshiriq 20 daqiqa

OsonRuxsat tanlash: Mentor va jamoadosh uchun qaysi ruxsatlarni berasiz?

OsonSharh yozish: «Yoqmadi» sharhini aniq va muloyim qilib qayta yozing.

O'rtaVersiya saqlash: Muhim bosqichda versiyani qanday saqlaysiz? Nom taklif qiling.

O'rtaCSS ga o'tkazish: Dev Mode: width 280, padding 16, radius 12. Loyihaga moslab CSS yozing.

QiyinHandoff ro'yxati: Dasturchiga topshirishdan oldin 5 ta tekshiruvni yozing.

BonusOmmaviy havola xavfi: Can edit ommaviy havolaning 2 ta xavfini yozing.

Dars xulosasi

Ulashish

View va Edit; eng kam ruxsat.

Sharh va versiya

Comment, Resolve, nomli versiya.

Dev Mode

Qiymat, CSS, eksport.

Uyga vazifa: Handoff: ulashish, sharh va CSS qiymatlari.

Keyingi dars: Figma'da prototip

Interaktiv prototip yaratish

7-hafta · 19-dars

Jamoaviy ishlash va Dev Mode

Bugun nimalarni o'rganamiz?

Ulashish va ruxsatlar

Sharhlar va versiyalar

Dev Mode

Takrorlash

Ulashish va ruxsatlar

Ulashish tartibi

Ruxsat tanlash qoidasi

Mini-test

Sharhlar va versiyalar

Sharh aylanishi

Yaxshi sharh namunasi

Mini-test

Dev Mode

Handoff

Dev Mode qiymatlari → loyiha CSS

Mini-test

Can view va Can edit

Can view

Can edit

Atamalar. Bosing

Share

Resolve

Version history

Dev Mode

Handoff

1. Ulashish

2. Sharh

3. Dev Mode

Handoff ro'yxati

Dizaynni topshirish

Sharh yozish

Sharh yozish

Hamkorlik raqamlarda

Amaliy topshiriq 20 daqiqa

Dars xulosasi

Ulashish

Sharh va versiya

Dev Mode

Keyingi dars: Figma'da prototip