1.8-bob: Figma asoslari (dizayndan kodga)

1-QISM — HTML, CSS va zamonaviy stillar · 8-mavzu

1. Kirish va motivatsiya

Hozirgacha biz kodni o'z boshimizdan yozdik. Lekin real ishda jarayon boshqacha: avval dizayner ilova/saytni Figmada chizadi (rang, joylashuv, shrift, bo'shliq — hammasi aniq belgilangan), keyin siz — frontend dasturchi o'sha dizaynni piksel-aniq (pixel-perfect) kodga aylantirasiz.

Figma — bugungi eng mashhur veb-asosli dizayn vositasi (brauzerda ishlaydi, o'rnatish shart emas). Dasturchi Figma'da chizmaydi — u Figma'ni o'qiydi: o'lcham, rang, shrift, masofani olib, kodga ko'chiradi.

O'xshatish: Figma — bu binoning arxitektura chizmasi (blueprint). Dizayner — arxitektor (chizmani chizadi). Siz — quruvchi: chizmani o'qib, o'sha aniqlikda binoni (kodni) qurasiz. Chizmani o'qiy olmasangiz, devorni noto'g'ri joyga qurasiz.

Nega bu majburiy ko'nikma?

• Har bir frontend ishi Figma dizaynidan boshlanadi. "Dizayndan kodga" — kunlik vazifa.
• Pixel-perfect kod — professionallikning belgisi. Dizaynerga "taxminan shunday" yaramaydi.
• Aniq qiymatlar (rang #3b5bdb, masofa 24px, shrift 16px/600) — Figma'dan olinadi, taxmin qilinmaydi.
• Hamkorlik: dizayner, menejer, dasturchi — bir Figma faylda ishlaydi.

2. Nazariya — chuqur tushuntirish

2.1. Figma'ning asosiy tuzilmasi

Figma fayli ierarxiyasi (kichikdan kattaga):

  Layer (qatlam)    eng kichik: matn, to'rtburchak, rasm
       
  Frame (ramka)     "konteyner" (≈ HTML div/section); ekran yoki komponent
       
  Page (sahifa)     bir nechta frame
       
  File (fayl)       butun loyiha

• Layer (qatlam) — har bir element (matn, shakl, rasm) — alohida qatlam. (0.5: brauzer qatlami bilan o'xshash g'oya.)
• Frame (ramka) — elementlarni o'rab turadigan konteyner. Bu — eng muhim tushuncha: frame ≈ HTML konteyner (div, section). Ekran (telefon/desktop) ham frame.

2.2. Dizayner rejimi vs Dev Mode

Figma'da ikki rejim bor:

• Design (dizayn) rejimi — chizish, tahrirlash (dizayner ishlaydi).
• Dev Mode (dasturchi rejimi) — dasturchi uchun: element tanlab, uning aniq o'lcham, rang, shrift, masofa va hatto taxminiy CSS kodini ko'rasiz. Dasturchilar asosan shu rejimda ishlaydi.

Siz dizayn qilmaysiz — siz o'lchaysiz va olasiz. Dev Mode aynan shu uchun.

2.3. Qiymatlarni "o'qish" — eng muhim ko'nikma

Dasturchi Figma'dan quyidagilarni aniq oladi:

Masofani o'lchash: elementni tanlang, Alt (yoki Option) bilan boshqa elementga sichqonchani olib boring — orasidagi piksel ko'rinadi. Bu — gap/margin aniqlash uchun asosiy usul.

2.4. Auto Layout — Flexbox'ning Figma ko'rinishi

Auto Layout — Figma'da elementlarni avtomatik joylashtirish (aslida Flexboxning o'zi — 1.3!). Dizayner Auto Layout ishlatsa, siz darrov bilasiz bu Flexbox bo'ladi:

Demak Figma dizaynini "o'qish" — aslida uni Flexbox/Gridga tarjima qilish.

2.5. Constraints — responsive xulq

Constraints (cheklovlar) — element frame o'zgarganda qanday harakat qilishi (chapga bog'langanmi, cho'ziladimi). Bu — responsive 1.5-bob xulqni bildiradi: dizayner "bu element ekran kengaysa cho'zilsin" desa, siz width: 100% yoki flex: 1 ishlatasiz.

2.6. Components va styles — qayta ishlatish

• Component (komponent) — Figma'da qayta ishlatiladigan element (tugma, karta). Bittasini o'zgartirsangiz, hammasi o'zgaradi. Bu — to'g'ridan-to'g'ri React komponentiga (11) mos keladi.
• Variants (variantlar) — bitta komponentning turli holatlari/ko'rinishlari (masalan tugmaning primary/secondary ko'rinishi, yoki default/hover/disabled holati) bir komponent ostida guruhlangan. Dasturchi uchun bu — to'g'ridan-to'g'ri React propsga (<Tugma variant="primary" /> — 11) yoki CSS modifikator klasiga (.tugma--primary; BEM — 1.9) tarjima qilinadi. Demak dizaynerning "varianti" — sizning propingiz yoki modifikatoringiz.
• Styles / Variables — ranglar, shriftlar, masofalar to'plami (≈ CSS o'zgaruvchilar — 1.2, yoki Sass o'zgaruvchilar — 1.6, yoki Tailwind theme — 1.7). Dizayn tizimining (design system) asosi.

Muhim bog'lanish: Figma'dagi Component React Component (11); Figma Styles/Variables CSS o'zgaruvchilar 1.2-bob / Tailwind theme 1.7-bob. Dizayn tizimi va kod tizimi bir-biriga moslashadi.

Prototyping (interaktiv bog'lanish). Figma faqat statik rasm emas: dizayner Prototype rejimida elementlarni bir-biriga bog'lab, interaktiv xulqni ko'rsatadi — tugma bosilganda qaysi ekran ochilishi, hoverda rangning o'zgarishi, modal oyna chiqishi. Dasturchi uchun bu — muhim ma'lumot, chunki u sahifaning xulqini (behavior) belgilaydi: prototipdagi har bir o'tish/animatsiya keyin sizning kodingizda :hover/:focus (CSS — 1.2), transition, yoki JavaScript hodisasiga (event) aylanadi. Demak prototipni ko'rib chiqing — u dizaynning "qanday ko'rinishi"ni emas, "qanday ishlashi"ni aytadi.

2.7. Assetlarni eksport qilish

Rasmlar, ikonkalar, logolarni Figma'dan eksport qilasiz:

• SVG — ikonka, logo (vektor — istalgan o'lchamda aniq; 0.1: vektorda piksel emas, matematik shakl).
• PNG — shaffof fonli rasm.
• JPG — fotosurat (siqilgan — 0.1).
• 2x/3x — yuqori zichlikli (retina) ekranlar uchun 1.5-bob.

2.8. Dizayndan kodga — to'g'ri jarayon

Professional dasturchi Figma'dan kodga quyidagi tartibda o'tadi (0.6: muammoga yondashuv bilan o'xshash):

  1. KUZAT     Butun dizaynni ko'r; takrorlanuvchi qismlarni (komponent) aniqla.
       
  2. TUZILMA   HTML skeletni rejalashtir (1.1: semantik) — frame'lar  teglar.
       
  3. LAYOUT    Auto Layout'larni Flexbox/Grid'ga tarjima qil (1.3, 1.4).
       
  4. O'LCHA    Rang, shrift, masofani Dev Mode'dan ol 2.3-bob; o'zgaruvchiga sol.
       
  5. KOD       Mobile-first yoz 1.5-bob; komponentlarni qayta ishlat.
       
  6. SOLISHTIR Brauzerni Figma yoniga qo'y; piksel-aniq tekshir.

3. Asosiy tushunchalar va yorliqlar

  Frame          ≈ HTML konteyner (div/section)   — 1.1
  Auto Layout    ≈ Flexbox (gap/padding/align)    — 1.3
  Constraints    ≈ responsive xulq                — 1.5
  Component      ≈ React komponent                — 11
  Styles/Vars    ≈ CSS o'zgaruvchi / Tailwind theme — 1.2, 1.7
  Fill           = background / color
  Stroke         = border
  Corner radius  = border-radius
  Effects        = box-shadow / blur

Foydali yorliqlar (Dev Mode'da):

• Element tanlang o'ng panelda barcha qiymatlar (o'lcham, rang, shrift).
• Alt + sichqoncha masofani o'lchash 2.3-bob.
• Rang ustiga bosing hex/rgba nusxalash.
• Eksport o'ng panel pastida (format + masshtab).

4. Batafsil amaliy namunalar (Figma kod)

Bu bobda "kod namunasi" — dizaynni kodga tarjima qilish misollari.

Misol 1 — Figma karta HTML/CSS

  FIGMA'DA KO'RGANING (Dev Mode):
  Frame "Karta": width 320, padding 24, corner radius 12,
                 fill #FFFFFF, shadow (0 4 12 rgba(0,0,0,0.08))
  Text "Sarlavha": font Inter, 20px, weight 700, color #1A1A1A
  Text "Tavsif": Inter, 14px, weight 400, color #6B7280, line-height 1.6
  Gap (sarlavhatavsif): 8px

/* TARJIMA QILINGAN KOD (2.3, 2.4) */
.karta {
  width: 320px;
  padding: 24px;                              /* Figma padding */
  border-radius: 12px;                        /* corner radius */
  background: #ffffff;                         /* fill */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* effect */
  display: flex; flex-direction: column; gap: 8px; /* Auto Layout  flex 2.4-bob */
}
.karta__sarlavha { font: 700 20px/1.2 Inter, sans-serif; color: #1a1a1a; }
.karta__tavsif   { font: 400 14px/1.6 Inter, sans-serif; color: #6b7280; }

Misol 2 — Auto Layout Flexbox tarjimasi

  FIGMA Auto Layout "Navbar":
  Direction: Horizontal | Space between | Align center | Padding 16 32 | Gap 24

/* TARJIMA (2.4 jadvalga qarab) */
.navbar {
  display: flex;                  /* Auto Layout */
  flex-direction: row;            /* Horizontal */
  justify-content: space-between; /* Space between */
  align-items: center;            /* Align center */
  padding: 16px 32px;             /* Padding (yuqori/past, chap/o'ng) */
  gap: 24px;                      /* Gap */
}

Misol 3 — Figma Variables CSS o'zgaruvchilar (1.2/1.6/1.7)

  FIGMA Variables (Styles):
  color/primary = #3B5BDB | color/text = #1A1A1A | spacing/md = 16px | radius/lg = 12px

/* TARJIMA — dizayn tizimini kodga 2.6-bob */
:root {
  --color-primary: #3b5bdb;
  --color-text: #1a1a1a;
  --spacing-md: 16px;
  --radius-lg: 12px;
}
.tugma {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
}

Misol 4 — Constraints responsive (1.5)

  FIGMA Constraints:
  Sidebar: Left + Top (qotgan kenglik 250px)
  Main: Left+Right (cho'ziladi)

/* TARJIMA 2.5-bob — Grid bilan 1.4-bob */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;  /* sidebar qotgan, main cho'ziladi */
}

5. To'g'ri va noto'g'ri holatlar

1) Qiymatlarni "ko'z bilan" taxmin qilish

 "Bu masofa taxminan 20px shekilli" deb yozish
 Dev Mode'da Alt bilan aniq o'lchab olish 2.3-bob — 24px bo'lsa 24px

2) Hex rangni qo'lda terish

 Rangni ko'rib, "ko'k shekilli, #0000FF yozaman"
 Figma'da Fill ustiga bosib, aniq hex (#3B5BDB) nusxalash

3) Auto Layout'ni e'tiborsiz qoldirish

 Auto Layout'ni absolute position bilan qaytadan yasashga urinish
 Auto Layout = Flexbox 2.4-bob — to'g'ridan-to'g'ri tarjima qil

4) Komponentlarni takrorlash

 Figma'da bir xil karta 6 marta — kodda ham 6 marta nusxalash
 Component'ni bir marta yoz, qayta ishlat (React — 11; yoki CSS class)

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Kod Figma'ga o'xshamaydi (taxminiy)

Sababi: qiymatlar ko'z bilan olingan. Yechimi: Dev Mode'dan aniq qiymatlarni oling 2.3-bob; brauzerni Figma yoniga qo'yib solishtiring (2.8: 6-qadam).

Xato 2 — Figma'ning "CSS"i to'g'ridan-to'g'ri ishlamaydi

Sababi: Figma generatsiya qilgan CSS — taxminiy (ko'pincha position: absolute, aniq piksel). U boshlang'ich ma'lumot, tayyor kod emas. Yechimi: qiymatlarni oling, lekin layout'ni o'zingiz semantik + Flexbox/Grid bilan yozing (1.1, 1.3, 1.4).

Xato 3 — Shrift brauzerda boshqacha

Sababi: Figma'dagi shrift (masalan Inter) saytga ulanmagan. Yechimi: shriftni ulang (Google Fonts yoki @font-face); fallback bering (font-family: Inter, sans-serif).

Xato 4 — Rasm sifati past / katta

Sababi: noto'g'ri format/masshtab eksport. Yechimi: ikonka/logo SVG; fotosurat JPG (siqilgan); retina uchun 2x 2.7-bob.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• HTML 1.1-bob: Figma frame semantik HTML skelet.
• CSS 1.2-bob: rang, shrift, o'lcham, box model — Figma qiymatlari.
• Flexbox/Grid (1.3, 1.4): Auto Layout Flexbox; Constraints/columns Grid.
• Responsive 1.5-bob: Constraints + turli frame (mobil/desktop) media queries.
• CSS o'zgaruvchi/Sass/Tailwind (1.2, 1.6, 1.7): Figma Variables dizayn tokenlari.
• React (11): Figma Component React komponent — bir xil tafakkur.
• Dizayn tizimi (15): Figma styles + kod tizimi birga.

8. Eng yaxshi amaliyotlar (best practices)

• Dev Mode'da ishlang — taxmin qilmang, o'lchang (2.2, 2.3).
• Qiymatlarni nusxalang (hex, px) — qo'lda termang.
• Auto Layout'ni Flexbox deb o'qing 2.4-bob — eng tez tarjima.
• Komponent va Variables'ni kod tizimiga bog'lang 2.6-bob — bir xil tuzilma.
• Mobile-first yozing 1.5-bob, Figma'da mobil frame bo'lsa undan boshlang.
• Brauzerni Figma yoniga qo'yib solishtiring — pixel-perfect 2.8-bob.
• Figma generatsiya qilgan CSS — boshlang'ich, to'g'ridan-to'g'ri ko'chirmang (6-bo'lim).
• Shrift va assetlarni to'g'ri ulang/eksport qiling 2.7-bob.

9. Amaliy loyiha: "Figma Dizaynidan Pixel-Perfect Sahifa"

Endi haqiqiy dizaynerdek ishlaysiz — tayyor Figma dizaynini aniq kodga aylantirasiz.

Maqsad

Dev Mode'dan qiymatlarni o'qib, Auto Layout'ni Flexbox/Grid'ga tarjima qilib, dizaynga piksel-aniq mos sahifani qurish.

Talablar (requirements)

1. Dizayn top: Figma Community'dan (community.figma.com) bepul "landing page" yoki "card UI" dizaynini nusxalang (yoki o'zingiz oddiy dizayn chizing). Dev Mode'ni yoqing.
2. Tuzilma: dizaynni kuzating, takrorlanuvchi qismlarni (komponent) aniqlang; semantik HTML skelet yozing 1.1-bob (2.8: 1–2 qadam).
3. Dizayn tokenlari: Dev Mode'dan ranglar, shriftlar, masofalarni oling; CSS o'zgaruvchi/Sass/Tailwind theme'da markazlashtiring (2.6, Misol 3).
4. Layout: Auto Layout'larni Flexbox'ga, ustun tuzilmalarni Grid'ga tarjima qiling (Misol 1, 2).
5. Aniqlik: kamida 3 element uchun o'lcham/rang/shriftni aynan Figma'dagidek qiling 2.3-bob.
6. Responsive: Constraints'ga qarab mobile-first moslashtiring (1.5, Misol 4).
7. Solishtirish: brauzerni Figma yoniga qo'yib, farqlarni toping va tuzating 2.8-bob.
8. (Bonus) Bitta ikonka/logoni SVG sifatida eksport qilib ishlating 2.7-bob.

Maslahatlar (hint)

• Alt + sichqoncha — masofani o'lchash (gap/margin uchun) 2.3-bob.
• Figma'ning "Inspect"/Dev Mode panelidan rang va shriftni to'g'ridan-to'g'ri nusxalang.
• Auto Layout ko'rsangiz — bu Flexbox (2.4 jadvalini ishlating).
• Shriftni Google Fonts'dan ulang; fallback qo'ying.
• Figma bergan CSS'ni o'qing, lekin layout'ni o'zingiz semantik + Flex/Grid bilan yozing (6-bo'lim).

"Tayyor" mezonlari (acceptance criteria)

• Dizayn semantik HTML bilan qurilgan 1.1-bob.
• Ranglar/shriftlar/masofalar o'zgaruvchida markazlashgan (Figma qiymatlari).
• Auto Layout'lar Flexbox/Grid'ga to'g'ri tarjima qilingan.
• Kamida 3 element Figma'ga aynan mos (rang/o'lcham/shrift).
• Sahifa responsive (mobil/desktop).
• Brauzer va Figma yonma-yon solishtirilgan, farqlar tuzatilgan.
• (Bonus) SVG ikonka ishlatilgan.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda real ish jarayonining muhim qismini — dizayndan kodga o'tishni o'rgandik:

• Figma — veb-asosli dizayn vositasi; dasturchi unda chizmaydi, balki o'qiydi va kodga tarjima qiladi.
• Tuzilma: Layer Frame Page File. Dev Mode — dasturchi uchun (o'lcham/rang/shrift/masofa).
• Auto Layout = Flexbox 1.3-bob; Constraints = responsive 1.5-bob; Component = React komponent (11); Variables = CSS/Tailwind tokenlar (1.2, 1.7).
• Qiymatlarni o'lchang va nusxalang (taxmin qilmang); Alt bilan masofa.
• Jarayon: kuzat tuzilma layout o'lcha kod (mobile-first) solishtir (pixel-perfect).

Keyingi bob — 1.9-bob: CSS arxitekturasi (BEM) va accessibility (a11y) asoslari. 1-QISMning yakunlovchi bobi. Endi katta loyihada CSS'ni tartibli (BEM nomlash) va saytni hammaga ochiq (accessibility — nogironlar uchun ham) qilishni o'rganamiz. Shundan so'ng — 1-QISM tugaydi!

Eslatma va manbalar

• Figma rasmiy hujjatlari (help.figma.com) — Dev Mode, Auto Layout, Components, Variables, eksport
• Bu bob asosan Figma'ning amaliy ish jarayoniga va uni CSS/HTML ga tarjimaga bag'ishlangan