Dars xulosasi

• Figma — brauzerdagi dizayn vositasi; ish maydoni — frame.
• Telefon va kompyuter uchun alohida frame yaratiladi.
• Rang, shrift va 8px masofalar bir tizimda tanlanadi.
• Auto layout — Flexbox ga mos.
• Komponent va variantlar — qayta ishlatiladigan elementlar.
• Eksport: SVG (ikonka), JPEG (foto), PNG (shaffof).

Qo'shimcha ma'lumot

Prototype

Ekranlar orasida bosish yo'llarini ulash.

Plugin

Figma'ga qo'shimcha imkoniyat.

Wireframe

Soddalashtirilgan sxema.

Design system

Rang, shrift va komponentlar to'plami.

Atamalar lug'ati

Atama	Ma'nosi
Figma	Brauzerdagi dizayn vositasi
Frame	Dizayn ekrani
Layer	Qatlam
Component	Qayta ishlatiladigan element
Variant	Komponent holati
Auto layout	Avtomatik tizish
Layout grid	Ustunli to'r
Export	Fayl qilib saqlash

Bilasizmi?

• Figma'da Ctrl+D — nusxa, Ctrl+G — guruhlash, Shift+A — auto layout.
• Figma'ning Inspect/Dev Mode paneli dizayn qiymatlarini CSS ko'rinishida ko'rsatishi mumkin: ko'rinishi tarifga bog'liq.
• Dizayn tizimi (design system) katta kompaniyalarda yuzlab komponentdan iborat bo'ladi.

Topshiriqlar

1. Figma nima? oson

Figma nima uchun ishlatilishini yozing.

Kutiladigan natija: Dizayn va maket chizish.

2. Frame oson

Frame nima? Qaysi tugma bilan yaratiladi?

Kutiladigan natija: Dizayn ekrani, F.

3. Eksport formatlari oson

3 ta eksport formatini sanang.

Kutiladigan natija: SVG, PNG, JPEG.

4. Layers oson

Layers paneli nima uchun kerak?

Kutiladigan natija: Qatlamlarni boshqarish.

5. px → rem o'rta

32px ni rem ga o'tkazing.

Kutiladigan natija: 2rem.

6. Auto layout o'rta

Auto layout qaysi CSS xossalariga mos?

Kutiladigan natija: flex, gap, padding.

7. Layout grid o'rta

Kompyuter va telefon uchun ustunlar soni?

Kutiladigan natija: 12 va 4.

8. Komponent o'rta

Komponent va variant farqini yozing.

Kutiladigan natija: Komponent — element, variant — holat.

9. Tugma CSS qiyin

Dizayn qiymatlaridan tugma CSS ni yozing.

Kutiladigan natija: Fon, padding, radius bilan CSS.

10. Format tanlash qiyin

Logotip uchun nega SVG tanlanadi?

Kutiladigan natija: Vektor, sifat yo'qolmaydi.

11. Ranglar qiyin

Rang palitrasini CSS o'zgaruvchilarga o'tkazing.

Kutiladigan natija: :root bilan 4 rang.

12. Mini maket bonus

Figma'da bitta ekran maketi chizing.

Kutiladigan natija: Frame, matn, tugma, rasm.

O'zingizni tekshiring

1. Frame nima?
2. Layers va Design paneli?
3. Auto layout nima?
4. Komponent va variant?
5. Qaysi formatda eksport qilinadi?
6. Qiymatlar CSS ga qanday o'tadi?

Uyga vazifa

Figma'da tugma va karta dizayni, CSS qiymatlari (25–30 daqiqa). To'liq shart: uyga-vazifa.md.