Figma dasturchi uchun 1: interfeys, Dev Mode va inspect

Qisqacha: Dasturchi Figma'da chizmaydi — maketni o'qiydi. Fayl sahifalardan, sahifa frame'lardan, frame qatlamlardan iborat; frame — HTML'dagi konteynerga o'xshaydi. Elementni tanlasangiz, o'ng panelda uning o'lchami, rangi (Fill), chegarasi (Stroke), burchagi, soyasi va shrifti chiqadi; ikki element orasidagi masofani Alt (Mac'da Option) bosib turib o'lchaysiz. Dev Mode (Shift + D) — dasturchi rejimi, faqat pullik tariflarda. Qiymatni ko'chirishda piksel emas, qaror olinadi: 16px → 1rem → --masofa-m. Figma bergan CSS parchasi — ma'lumotnoma, tayyor kod emas.

Bu darsda

• Figma faylining tuzilishini (fayl, sahifa, frame, qatlam) HTML bilan solishtirib tushuntirasiz.
• Design rejimi, Dev Mode va "faqat ko'rish" huquqi farqini, bepul tarif chegaralarini bilasiz.
• Maketdan rang, chegara, burchak, soya, shrift va masofani o'qib, CSS xususiyatiga o'girasiz.
• Piksel qiymatlarni rem va «Bahor» tokenlariga aylantirasiz, tokenga tushmagan qiymatni aniqlaysiz.
• Figma'ning CSS parchasini nega ko'r-ko'rona ko'chirmaslik kerakligini asoslaysiz.

Oldin bilishingiz kerak: Vizual ierarxiya, Dizayn tokenlari, Spacing tizimi, Tipografik shkala, CSS'da accessibility.

1. Nega bu kerak?

Dizayn tokenlari darsining boshida Jasur akaning jiyani «Bahor» uchun Figma'da maket chizgan edi. Siz o'shanda tokenlarni yasadingiz, lekin maketning o'zini ochmadingiz. Endi ochamiz.

Real ishda frontend vazifa ko'pincha shunday keladi: "Mana Figma havolasi, menyu sahifasini shunga o'xshatib qil". Havolani ochasiz — ekranda o'nlab ramkalar, yuzlab qatlamlar, chap va o'ngda panellar. Qayerdan boshlash kerak? Qaysi raqam muhim, qaysi biri dizaynerning tasodifiy harakati?

O'xshatish: dizayner — arxitektor, maket — uyning chizmasi, siz — usta. Usta chizmaga chizg'ich bilan chiziq qo'shmaydi. U chizmani o'qiydi: devor qalinligi, eshik eni, deraza balandligi. Keyin ularni o'z materialiga — g'isht va sementga — o'giradi. Sizning g'isht va sementingiz — HTML, flex, grid va tokenlar.

Bu dars — o'qish ko'nikmasi. Keyingi darsda (Figma dasturchi uchun 2) maketning "aqlli" qismlariga o'tamiz: Auto Layout, komponentlar va o'zgaruvchilar.

2. Figma nima va qanday kiriladi

2.1 Brauzerda ishlaydigan dizayn vositasi

Figma — interfeys maketlarini chizish va birga ishlash uchun vosita. U brauzerda ochiladi (figma.com), kompyuterga ilova sifatida ham o'rnatiladi. Fayl bulutda turadi: dizayner o'zgartirsa, siz havolani yangilaysiz va yangi holatni ko'rasiz. Faylni yuklab olish, "oxirgi versiya qaysi?" deb so'rash yo'q.

Figma'da bir necha mahsulot bor: Figma Design (maketlar), FigJam (doska), Figma Slides (taqdimot) va boshqalar. Frontend dasturchiga asosan Figma Design kerak. Bu darsda "Figma" deganda shuni nazarda tutamiz.

2.2 Tariflar: nima bepul

Tarif — hisob turi. Figma yordam markazidagi "Starter plan overview" sahifasiga ko'ra (2026-yil sentabr), bepul Starter tarifida:

Dev Mode haqida yordam markazi aniq yozadi: u "barcha pullik tariflarda" va Full yoki Dev o'rindig'i bilan ishlaydi. O'rindiq (seat) — jamoadagi bitta odamning huquqi, kinoteatrdagi chiptali joy kabi: qaysi o'rindiqni olsangiz, shu imkoniyatlar ochiladi. Full — hamma narsa, Dev — dasturchi rejimi, View — faqat ko'rish. Starter'da Dev Mode'ni ochish uchun faylni pullik jamoaga ko'chirish kerak.

Xavotir olmang: Dev Mode'siz ham maketni to'liq o'qish mumkin. Yordam markazining o'zi shunday deydi: Dev Mode'i yo'q dasturchi bepul "View" o'rindig'i bilan xususiyatlarni ko'radi, masofani o'lchaydi, kodni nusxalaydi va rasmlarni eksport qiladi. Bu darsdagi hamma narsa shu huquq bilan ishlaydi. Dev Mode faqat qulaylik qo'shadi.

Talabalar uchun yana bir yo'l bor — Figma for Education. Yordam markaziga ko'ra, oliy ta'lim va bootcamp talabalariga ta'lim maqomi tasdiqlangach Professional tarif beriladi. Talaba uchun muddat bir yil, keyin qayta ariza. Narxlar va shartlar tez-tez o'zgaradi — pullik tarif kerak bo'lsa, figma.com/pricing sahifasini o'sha kuni tekshiring.

Maslahat: Ishda Figma havolasini sizga jamoa beradi va o'rindiqni kompaniya to'laydi. O'rganish uchun bepul Starter yetarli.

3. Fayl tuzilishi

3.1 To'rt daraja

flowchart TD
  F["Fayl: «Bahor» sayti"] --> P1["Sahifa: Maketlar"]
  F --> P2["Sahifa: Komponentlar"]
  P1 --> S["Section: Menyu sahifasi"]
  S --> FR1["Frame: Telefon 360"]
  S --> FR2["Frame: Kompyuter 1280"]
  FR1 --> L1["Qatlam: sarlavha"]
  FR1 --> L2["Frame: taom kartasi"]
  L2 --> L3["Qatlam: narx"]

Nimaga qarang: tuzilma daraxt — xuddi HTML kabi. Fayl ichida sahifalar, sahifada ramkalar, ramka ichida yana ramkalar va qatlamlar.

• Fayl (file) — butun loyiha, bitta havola.
• Sahifa (page) — fayl ichidagi alohida varaq. Ko'p jamoalar sahifalarni vazifa bo'yicha ajratadi: maketlar, komponentlar, eskizlar.
• Frame — boshqa qatlamlarni ichiga oladigan konteyner. Yordam markazi ta'rifi bilan: shakl, rasm va matnni bir butun dizaynga yig'adigan qatlam. Telefon ekrani ham frame, taom kartasi ham frame. Frame tanlash asbobi — F yoki A tugmasi.
• Qatlam (layer) — har bir element: matn, to'rtburchak, rasm, vektor.

Frame va HTML'dagi div/article o'xshash: ichma-ich joylashadi va ichidagini tartiblaydi. Farqi — frame semantikani bilmaydi. U nav mi, article mi — buni siz hal qilasiz (article, section yoki div).

Section — sahifadagi frame'larni guruhlaydigan katta hudud. Dizayner tayyor qismni section ichiga qo'yib, uni Ready for dev ("ishlab chiqishga tayyor") deb belgilashi mumkin. Section'da shu belgi bo'lsa — bu maket yakunlangan, kodga o'tkazsa bo'ladi.

Frame yaratishda Figma tayyor o'lchamlarni taklif qiladi: Phone, Tablet, Desktop va boshqalar. Maketdagi telefon frame'i eni sizga breakpoint haqida ishora beradi, lekin breakpoint'ning o'zi emas. «Bahor» breakpointlari o'zgarmaydi — 40rem va 64rem (Media queries).

3.2 Panellar

Figma oynasi uch qismdan iborat:

• Chapda — qatlamlar ro'yxati (Layers) va sahifalar. Bu — DevTools'dagi Elements panelining o'xshashi.
• O'rtada — kanvas (canvas): maketning o'zi. Uni surish va kattalashtirish mumkin.
• O'ngda — tanlangan elementning xususiyatlari. DevTools'dagi Styles/Computed paneliga o'xshaydi.

Faylni faqat ko'rish huquqi bilan ochsangiz, o'ng panelda ikki tab bo'ladi: Comment (izohlar) va Properties (xususiyatlar). Siz hech narsani o'zgartira olmaysiz — bu yaxshi: maketni tasodifan buzib qo'ymaysiz.

Tekshirib ko'ring: Maketda "Taom kartasi" nomli frame ichida to'rtta qatlam bor: rasm, sarlavha, tavsif, narx. HTML'da uni qanday yozasiz?

4. Ikki rejim: Design va Dev Mode

Figma Design'da ikki ish rejimi bor:

• Design — chizish va tahrirlash. Dizayner shu yerda ishlaydi.
• Dev Mode — dasturchi rejimi. Asboblar panelidagi Dev Mode tugmasi yoki Shift + D bilan yoqiladi va o'chadi.

Dev Mode'da o'ng panel Inspect (inglizcha "ko'zdan kechirish") paneliga aylanadi. Yordam markazi unda nimalar borligini sanaydi: qatlam nomi va turi, komponent haqida ma'lumot, xususiyatlar kod yoki ro'yxat ko'rinishida, qo'llangan stillar va o'zgaruvchilar, yuklab olinadigan rasmlar va eksport sozlamalari. Yana ikki foydali imkoniyat:

• Compare changes — dizayner oxirgi marta nimani o'zgartirganini ko'rsatadi. "Kecha nima o'zgardi?" degan savolga javob.
• Annotations (Shift + T) va Measure (Shift + M) — dizayner maketga izoh va o'lchov chiziqlarini qoldiradi: "bu masofa ekranga qarab o'sadi", "hover'da soya kuchayadi".

Dev Mode yo'q bo'lsa — Design rejimidagi Properties tab'i. Unda xuddi shu qiymatlar ro'yxat bo'lib turadi.

Tekshirib ko'ring: Sizda bepul Starter hisobi va "faqat ko'rish" huquqi bor. Dizayner so'radi: "Kecha kartada nima o'zgarganini ko'rdingizmi?". Qaysi imkoniyat bunga eng qulay va u sizda bormi?

5. Qiymatlarni o'qish

5.1 Nima qayerda

Elementni kanvasda bosing. O'ng panel uni tasvirlaydi. Figma nomlari va CSS xususiyatlari:

Uch nozik joy:

• Stroke joylashuvi. Figma chegarani ichkariga (Inside), o'rtaga (Center) yoki tashqariga (Outside) chiza oladi. CSS'da border elementning o'z qutisiga kiradi: box-sizing: border-box bilan u berilgan en ichida chiziladi (box-sizing) — bu Inside'ga mos. Outside chegara kerak bo'lsa — outline yoki soya.
• Line height. Figma'da uch xil: Auto (shriftning o'z qator balandligi), piksel yoki foiz. Foiz — shrift o'lchamiga nisbatan, CSS'da birliksiz songa o'giriladi: 150% → 1.5 (Qator balandligi). Auto ko'rsangiz — «Bahor» tokenini oling: --qator-matn yoki --qator-sarlavha.
• Letter spacing. Foizda bo'lsa, em ga o'giriladi: -1% → -0.01em. Piksel bilan yozmang — shrift o'lchami o'zgarganda nisbat buziladi.

Tekshirib ko'ring: Maketda Line height 140%. CSS'da: line-height: [:1.4]. Letter spacing 3% bo'lsa: letter-spacing: [:0.03em]

5.2 Masofani o'lchash

Maketdagi eng muhim raqamlar — elementlar orasidagi masofalar. Ular o'ng panelda yo'q: panel faqat tanlangan elementni tasvirlaydi. O'lchash usuli (yordam markazidan):

1. Birinchi elementni tanlang.
2. Alt (Mac'da Option) tugmasini bosib turing.
3. Sichqonchani ikkinchi element ustiga olib boring.

Kanvasda o'lchov chiziqlari va raqamlar paydo bo'ladi: ikki element orasidagi piksellar. Ichma-ich frame'lar ichida ham ishlaydi — sarlavha va karta cheti orasidagi masofa bu padding, ikki karta orasidagisi esa gap.

Diqqat: Kanvasni kattalashtirgan holda o'lchang. Uzoqdan qaraganda 15 va 16 piksel bir xil ko'rinadi, Alt bilan esa aniq son chiqadi.

5.3 Rang va shrift

Rangni o'ng paneldagi Fill bo'limidan olasiz. U hex bilan (#2F6B3A) yoki o'zgaruvchi nomi bilan ko'rinishi mumkin. O'zgaruvchi nomi bo'lsa — omadingiz keldi: dizayner token tizimini ishlatgan (Figma dasturchi uchun 2 darsida). Hex bo'lsa, uni palitradagi tokenga moslang. Figma hex'ni ko'pincha katta harflar bilan ko'rsatadi — CSS uchun farqi yo'q (#2F6B3A = #2f6b3a, Ranglar 1).

Shrift bo'limida: oila (Lora), o'lcham, qalinlik (Bold = 700), qator balandligi, harf oralig'i. Eslang, Tipografik shkala darsidagi qoida: maketdagi o'lchamlar shkala qadamlariga tushishi kerak. Masalan, 20 piksellik sarlavha «Bahor» shkalasida --step-1 ga eng yaqin (360 pikselda 19.2).

6. Pikseldan tokenga

6.1 Uch qadam

Maket piksel bilan chiziladi. Siz esa rem va tokenlar bilan yozasiz. Har qiymat uch qadamdan o'tadi:

1. Piksel — maketdagi son: 16.
2. rem — 16 ÷ 16 = 1rem (brauzerning standart shrift o'lchamiga nisbatan, O'lcham birliklari).
3. Token — shu qiymatga mos qaror: --masofa-m.

Dev Mode buning ikkinchi qadamini o'zi qiladi. Code bo'limining yuqori o'ng burchagida til (CSS) tanlanadi, Inspect settings orqali birlik: px yoki rem. rem uchun ildiz shrift o'lchami ham sozlanadi (standart 1rem = 16px).

6.2 «Bahor» taom kartasi

Maketdagi karta frame'ini o'qidik — mana qiymatlar va ularning taqdiri:

Ikki qiymat tokenga aniq tushmadi. Sarlavha 20 piksel, --step-1 esa 19.2 dan 22.5 gacha suzadi. Soya ham --soya-2 dan bir qatlami bilan farq qiladi. Bunday joyda o'zingiz qaror qilmaysiz — dizaynerga yozasiz: "Sarlavha --step-1 bo'lsinmi, soya --soya-2 mi?". Odatda javob "ha" bo'ladi: dizayner qo'lda yaqin son yozgan.

Tokenlar bilan yozilgan karta:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:wght@700">
<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
    --rang-yuza: #ffffff;
    --masofa-xs: 0.5rem;
    --masofa-m: 1rem;
    --burchak-m: 0.5rem;
    --soya-2: 0 1px 2px oklch(0% 0 0 / 12%),
      0 4px 12px oklch(0% 0 0 / 12%);
    --shrift-sarlavha: "Lora", serif;
  }
  body {
    padding: 1.5rem;
    background: #fffaf0;
    color: var(--rang-matn);
    font-family: system-ui, sans-serif;
  }
  .taom-karta {
    display: grid;
    gap: var(--masofa-xs);
    box-sizing: border-box; /* «Bahor» reset'ida bor */
    max-width: 20rem;
    padding: var(--masofa-m);
    border-radius: var(--burchak-m);
    background: var(--rang-yuza);
    box-shadow: var(--soya-2);
  }
  .taom-karta > * { margin: 0; }
  .taom-nomi {
    font-family: var(--shrift-sarlavha);
    font-size: 1.25rem;
    line-height: 1.2;
  }
  .taom-karta p { color: var(--rang-ikkinchi); }
  .narx { color: var(--rang-urgu); font-weight: 700; }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p>Toshkentcha, bedana tuxumi bilan</p>
  <p><span class="narx">35 000 so'm</span></p>
</article>

Nimaga qarang: karta oq, qaymoq fon ustida yengil soya bilan ajraladi. Sarlavha Lora shriftida (serifli, qalin), narx g'isht rangida. Kartaning eni maketdagidek 320 piksel, lekin width emas, max-width: 20rem — tor ekranda karta qisqaradi. Maket bitta holatni chizadi; siz hamma ekranni o'ylaysiz. :root dagi tokenlar faqat namoyish uchun shu yerda; «Bahor»da ular tokenlar.css da turadi (Dizayn tokenlari).

Tekshirib ko'ring: Maketda ikki karta orasi 17 piksel, boshqa hamma joyda 16. Nima qilasiz?

7. CSS parchasini nega ko'chirmaslik kerak

Dev Mode'da har element uchun tayyor CSS parcha bor. "Faqat ko'rish" huquqi bilan ham uni olish mumkin: elementni o'ng tugma bilan bosib, Copy/Paste as → Copy as code. Vasvasa katta: nusxalash, joylash, tayyor. Lekin parcha tavsif, kod emas. Sabablar:

• Qat'iy o'lchamlar. Parcha ko'pincha width va height ni piksel bilan beradi. Brauzerda matn kattalashsa yoki ekran torroq bo'lsa, karta buziladi (CSS'da accessibility — matn oralig'i sinovi).
• Kontekst yo'q. Har qatlam alohida tasvirlanadi. Qaysi qiymat ota-elementdan meros keladi, qaysi biri takrorlanadi — parcha bilmaydi. Natijada har p ga font-family yoziladi.
• Semantika yo'q. Parcha teg tanlamaydi. Qatlam nomi "Frame 27" bo'lsa, class nomi ham shunga o'xshash chiqadi.
• Holatlar yo'q. Hover, fokus, nofaol holat maketda boshqa variantda chizilgan — parchada ular yo'q (UI/UX asoslari).
• Responsive yo'q. Bitta frame — bitta ekran eni.

Parchadan nima olinadi? Aniq raqamlar va o'zgaruvchi nomlari. Ayniqsa soya, gradient va murakkab burchak radiuslarini qo'lda terishdan ko'ra ko'chirib, keyin tokenga almashtirish qulay.

Katta jamoalarda bu muammoni Code Connect hal qiladi: yordam markaziga ko'ra, u Dev Mode'ga jamoaning haqiqiy komponent kodini olib kiradi. Shunda avtomatik parcha o'rniga, masalan, tayyor <Tugma variant="asosiy"> chiqadi. Komponent va props nimaligini React qismida o'rganasiz — hozir bilish shart emas.

Tekshirib ko'ring: Figma parchasida height: 148px bor. Nega uni ko'chirmaysiz?

8. Izohlar, versiyalar va jamoa ishi

• Izoh (Comment). Maketning aniq nuqtasiga savol qoldirasiz: "Bu tugma nofaol holatda qanday ko'rinadi?". Dizayner o'sha joyda javob beradi. Savolni chatga emas, maketga yozish yaxshi — kontekst saqlanadi.
• Versiya tarixi. Kanvasning bo'sh joyini bosib (hech narsa tanlanmagan holda), fayl nomi yonidagi menyudan Show Version History. Faylning oldingi holatlarini ko'rasiz. "Faqat ko'rish" huquqi bilan ham tarixni ko'rish mumkin, lekin tiklab bo'lmaydi. Starter'da — oxirgi 30 kun.
• Ready for dev. Tayyor qismlarni dizayner shunday belgilaydi. Belgisiz maketni kodlashdan oldin so'rang — u hali o'zgarishi mumkin.

sequenceDiagram
  participant D as Dizayner
  participant F as Figma
  participant S as Siz
  D->>F: Maket, "Ready for dev"
  S->>F: O'qish, o'lchash
  S->>F: Izoh: "17 ataylabmi?"
  D->>F: Javob: "16 bo'lsin"
  S->>S: Tokenlar bilan kod

Nimaga qarang: dasturchi va dizayner bir-biriga to'g'ridan-to'g'ri xat yozmaydi — hamma savol-javob maket ustida qoladi. Uch oydan keyin yangi dasturchi kelsa ham, "nega 16?" degan javob o'sha joyda turadi.

9. Ko'p uchraydigan xatolar

9.1 Ko'z bilan o'lchash

"Taxminan 20 piksel shekilli". Tuzatish: Alt bilan aniq o'lchang.

9.2 width: 320px ni ko'chirish

Karta telefonda ekrandan chiqadi. Tuzatish: max-width yoki grid ustuni; eni konteynerdan keladi.

9.3 Qatlam nomini class qilish

.frame-27, .rectangle-12. Tuzatish: nomni vazifaga qarab: .taom-karta, .narx.

9.4 Tasodifiy sonni "sadoqat bilan" takrorlash

17, 13, 23 piksel — hammasi kodga tushdi. Tuzatish: shkalaga moslang, farq kattaroq bo'lsa — so'rang.

9.5 Line height'ni piksel bilan

line-height: 24px — shrift kattalashsa, qatorlar ustma-ust tushadi. Tuzatish: foizni birliksiz songa: 150% → 1.5.

9.6 Dev Mode yo'q — "maketni o'qib bo'lmaydi"

Tuzatish: Properties tab'i va Alt bilan o'lchash bepul huquqda ham bor.

10. Mashqlar

1-mashq (oson): Figma'dan CSS'ga

Maketdagi tugma qiymatlari: Fill #2F6B3A, matn #FFFAF0, Corner radius 8, Padding 12 va 24, matn 16 Bold, Line height 150%. CSS qoidasini yozing — tokenlar bilan.

Ishora: "Nima qayerda" jadvali; masofa tokenlari: --masofa-s (12), --masofa-l (24).

.bron-havola {
  padding: var(--masofa-s) var(--masofa-l);
  border-radius: var(--burchak-m);
  background: var(--rang-asosiy);
  color: var(--rang-fon);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.5;
}

2-mashq (o'rta): tokenga tushmaganlar

Maket o'lchovlari: kartalar orasi 24, karta ichidagi padding 20, sarlavha va tavsif orasi 8, burchak 6. «Bahor» tokenlariga moslang. Qaysi biri tokenga tushmaydi va dizaynerga qanday savol berasiz?

Ishora: --masofa-* (4, 8, 12, 16, 24, 32, 48 — 360 pikseldagi qiymatlar) va --burchak-s (4), --burchak-m (8).

3-mashq (qiyin): parchani tozalash

Hamkasbingiz Figma'dan quyidagi qoidani nusxalab qo'ydi. Undagi muammolarni toping va qayta yozing:

.frame-27 {
  width: 320px;
  height: 148px;
  padding: 16px;
  border-radius: 8px;
  background: #FFF;
  font-family: Lora;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
}

Ishora: "CSS parchasini nega ko'chirmaslik kerak" bo'limi va "Nima qayerda" jadvalidagi diqqat ustuni. -0.2px — 20 piksellik shriftda -1%.

.taom-karta {
  max-width: 20rem;
  padding: var(--masofa-m);
  border-radius: var(--burchak-m);
  background: var(--rang-yuza);
}

.taom-nomi {
  font-family: var(--shrift-sarlavha);
  font-size: var(--step-1);
  line-height: var(--qator-sarlavha);
  letter-spacing: -0.01em;
}

4-mashq: Portfolio qadami — portfolio kartasini Figma'da o'qish

Portfolio'ingiz uchun maket yo'q — uni o'zingiz yasaysiz va o'qiysiz. Bu keyingi darsdagi Auto Layout va Variables uchun tayyorgarlik.

1. figma.com'da bepul Starter hisobi oching (yoki mavjudini ishlating) va yangi draft yarating — qoralamalar cheklanmagan.
2. Frame asbobi (F) bilan Phone o'lchamidagi frame chizing. Ichiga bitta loyiha kartasini portfolio'dagi qiymatlar bilan chizing: tokenlar.css dagi --masofa-m padding, --burchak-m burchak, --rang-chegara chegara, sarlavha — Rubik (portfolio'ning sarlavha shrifti).
3. Kartadagi sarlavha va tavsif orasini Alt bilan o'lchang. Keyin xuddi shu masofani brauzerda DevTools → Computed bilan o'lchang. Mos keldimi?
4. Qatlamlarga ma'noli nom bering: loyiha-karta, sarlavha, tavsif.

Ishora: Figma'da rang maydoniga hex yoziladi — --rang-chegara color-mix() bilan hisoblanadi, uning hex qiymatini DevTools'da hisoblangan (computed) border-color dan oling (DevTools'da CSS).

11. Real ishda

• Frontend vazifalari Figma havolasi bilan keladi. Jira yoki Linear kartasida "Figma: …" degan qator — odatiy holat. Dev Mode'da tashqi resurslar (GitHub, Jira, Storybook) havolalari ham ko'rinadi.
• Kod ko'rigi. Reviewer maketni ochib, siz yozgan raqamlarni solishtiradi: "Maketda bu --masofa-l, sizda 20px".
• Kichik jamoa va freelance. Dizayner ko'pincha bitta: u Starter yoki Professional'da ishlaydi, sizni "can view" bilan taklif qiladi. Bu darsdagi ko'nikmalar aynan shu holat uchun.
• Intervyuda so'raladi: "Figma maketidan qanday kod yozasiz?", "Dizayn tokeni va Figma o'zgaruvchisi qanday bog'lanadi?", "Maketdagi qiymat shkalaga tushmasa nima qilasiz?".

Xulosa

• Figma fayli: fayl → sahifa → section/frame → qatlam; frame — konteyner, lekin semantikani siz tanlaysiz.
• Ko'rish huquqi bilan Properties tab'i va Alt/Option bilan o'lchash bepul; Dev Mode — pullik tariflarda, Full yoki Dev o'rindig'i bilan.
• Fill → rang, Stroke → border, Drop shadow → box-shadow; line height % → birliksiz, letter spacing % → em.
• Har qiymat: piksel → rem → token; tokenga tushmasa — dizaynerdan so'raladi.
• CSS parcha — ma'lumotnoma: qat'iy o'lcham, semantika, holat va responsive'ni siz qo'shasiz.

Keyingi dars: Figma dasturchi uchun 2 — Auto Layout'ni flexbox'ga, komponent variantlarini class'larga va Figma Variables'ni «Bahor» tokenlariga o'giramiz.

Manbalar

• Figma Learn (help.figma.com): "Guide to Dev Mode", "Guide to inspecting", "Use code snippets in Dev Mode"
• Figma Learn: "Starter plan overview", "Figma for Education", "View a file's version history"
• Figma Learn: "Frames in Figma Design", "Explore text properties"
• Figma: "Pricing" — figma.com/pricing (narxlar o'zgaradi, o'sha kuni tekshiring)