Figma dasturchi uchun 2: Auto Layout, komponentlar va Variables

Qisqacha: Figma'ning uch "aqlli" qismi CSS'dagi tanish narsalarga to'g'ridan-to'g'ri o'giriladi. Auto Layout — flexbox: yo'nalish, gap, padding, tekislash; Hug contents — kontent o'lchami, Fill container — flex: 1, Fixed — aniq o'lcham. Constraints — Auto Layout'siz frame'dagi joylashuv qoidasi, CSS'da inset va foizlar. Komponent — qayta ishlatiladigan blok, uning variantlari — modifikator class'lar (.taom-karta.tugadi). Variables — dizayn tokenlari: kolleksiya, rejim (Yorug'/Qorong'i), taxallus; ular --rang-asosiy kabi CSS o'zgaruvchilariga aylanadi, rejimlar esa light-dark() ga. Figma o'zgaruvchilarni DTCG JSON'ga eksport qiladi — Dizayn tokenlari darsidagi quvur shu yerdan boshlanadi.

Bu darsda

• Auto Layout sozlamalarini (yo'nalish, gap, padding, Hug/Fill/Fixed, Wrap) flex CSS'ga o'girasiz.
• Constraints va Auto Layout farqini tushuntirib, ularni responsive CSS'ga aylantirasiz.
• Komponent, nusxa va variantlarni class va atributlarga moslaysiz.
• Figma Variables'ni «Bahor» tokenlari bilan bog'laysiz: kolleksiya, rejim, taxallus, Code syntax.
• Dizayndan kodga ish jarayonini, maket bilan solishtirishni va MCP orqali AI ishini baholaysiz.

Oldin bilishingiz kerak: Figma dasturchi uchun 1, Flex naqshlari, Dizayn tokenlari, Qorong'i rejim.

1. Nega bu kerak?

O'tgan darsda maketni piksel-piksel o'qidik: padding 16, gap 8, burchak 8. Lekin bir narsani ko'rmadik — dizaynerning niyatini. Karta matn uzaysa o'sadimi? Telefonda tugma butun enni egallaydimi? Narx rangi qorong'i rejimda qanday?

Yaxshi maketda bu javoblar raqamlarda emas, sozlamalarda yozilgan. Dizayner "bu frame kontentiga qarab o'sadi" deb belgilaydi, "bu rang — o'zgaruvchi, qorong'ida boshqa qiymat" deb belgilaydi. Siz shu sozlamalarni o'qisangiz, CSS'ni taxminsiz yozasiz.

O'xshatish: retseptda "200 gramm guruch" yozilgan — bu raqam. "Guruch ustidan ikki barmoq suv" — bu qoida. Qoida qozon kattalashsa ham ishlaydi. Auto Layout va Variables — maketdagi qoidalar.

2. Auto Layout = flexbox

2.1 Asosiy sozlamalar

Auto Layout — frame ichidagi qatlamlarni avtomatik terish qoidasi. Frame tanlangan holda Shift + A bilan qo'shiladi. Flexbox'ga kirish darsida va'da qilgan edik: Auto Layout — aslida flexbox. Mana to'liq lug'at (Figma yordam markazidagi nomlar bilan):

Yordam markazi Auto Layout'ning yana bir oqimini ham sanaydi — Grid. U CSS'dagi display: grid ga yaqin (Grid'ga kirish).

Ignore auto layout (ilgari "absolute position" deb atalgan) — qatlam oqimdan chiqadi. Kartaning burchagidagi "Yangi" belgisi odatda shunday chiziladi. CSS'da — ota-elementga position: relative, belgiga position: absolute (position).

2.2 Hug, Fill, Fixed

Har qatlamning eni va balandligi uch xil bo'ladi. Bu jadval — Auto Layout'ning eng muhim qismi:

Fill container ko'ndalang o'qda ham bo'ladi: vertikal Auto Layout'dagi qatlam enini to'ldirsa — bu align-self: stretch (flex'ning standart xulqi). Yordam markazi Minimum va Maximum width/height sozlamalarini ham sanaydi — ular min-width va max-width ning o'zi.

«Bahor» menyu satri: nom chapda, narx o'ngda, orasi nuqtalar bilan to'lgan. Maketda bu gorizontal Auto Layout: nom — Hug, nuqtalar — Fill, narx — Hug.

<style>
  body {
    padding: 1rem;
    background: #fffaf0;
    color: #1f2a24;
    font-family: system-ui, sans-serif;
  }
  ul {
    display: grid;
    gap: 0.5rem;
    max-width: 22rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: flex; /* Horizontal */
    align-items: baseline; /* Alignment: pastki chiziq */
    gap: 0.5rem; /* Gap 8 */
  }
  .nuqtalar {
    flex: 1; /* Fill container */
    border-block-end: 2px dotted #5b6660;
  }
  .narx {
    color: #b4461a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
</style>
<ul role="list">
  <li><span>Osh</span><span class="nuqtalar"></span>
    <span class="narx">35 000 so'm</span></li>
  <li><span>Lag'mon</span><span class="nuqtalar"></span>
    <span class="narx">28 000 so'm</span></li>
  <li><span>Ko'k choy</span><span class="nuqtalar"></span>
    <span class="narx">5 000 so'm</span></li>
</ul>

Nimaga qarang: nomlar va narxlar faqat o'z matni eniga ega (Hug), nuqtali chiziq esa qolgan hamma joyni egallaydi (Fill). Taom nomi qanchalik qisqa yoki uzun bo'lmasin, narxlar o'ng chetda bir chiziqda turadi. "Tahrirlab ko'rish" bilan "Osh" ni "To'y oshi, katta porsiya" qiling — chiziq qisqaradi, narx joyida qoladi. .nuqtalar — namoyish class'i.

2.3 Tuzoq: Fixed hamma joyda

Tajribasiz dizayner hamma qatlamni Fixed qoldiradi: karta 320, tugma 280, matn bloki 288. Maket bitta ekranda chiroyli, lekin hech narsa "oqmaydi". Belgi: Auto Layout'li frame'ning bolalari Fixed bo'lsa, dizaynerdan so'rang — "matn uzaysa nima bo'ladi?". Kodda esa baribir intrinsic yo'lni tanlang (Intrinsic layout): max-width, flex: 1, minmax().

Tekshirib ko'ring: Vertikal Auto Layout'li karta: padding 16, gap 8. Ichida sarlavha (Fill container eni), tavsif (Fill container eni) va tugma (Hug contents). CSS'ni yozing.

.taom-karta {
  display: flex;
  flex-direction: column;
  gap: var(--masofa-xs);
  padding: var(--masofa-m);
}

.taom-karta .bron-havola {
  align-self: start; /* Hug: tugma kontent enida */
}

3. Constraints — Auto Layout'siz frame

Auto Layout'siz frame'da qatlamlar erkin turadi. Frame o'lchami o'zgarganda ular qayerga ketishini constraints (cheklovlar) belgilaydi. Yordam markazidagi variantlar:

Muhim cheklov: yordam markaziga ko'ra, constraints Auto Layout frame ichidagi qatlamlarga qo'llanmaydi. Demak maketda ikki dunyo bor: Auto Layout (flex/grid) va erkin joylashuv (constraints, ya'ni position). Hozirgi maketlarning ko'pi Auto Layout bilan chiziladi; constraints ko'pincha ustma-ust qatlamlarda uchraydi — masalan, rasm ustidagi "Yangi" belgisi yoki pastki o'ng burchakdagi tugma.

Bitta frame — bitta ekran eni. Dizayner odatda ikki-uch frame chizadi: telefon, planshet, kompyuter. Ular orasidagi o'zgarishni siz CSS'da qurasiz: media query (Media queries) yoki container query (Container queries). Maket "qaysi enda qanday" desa, siz "qaysi oraliqda qanday" deb javob berasiz.

Tekshirib ko'ring: Taom rasmi ustidagi "Yangi" belgisi Auto Layout'siz frame'da turibdi, constraints: Right va Top. CSS'da qanday yozasiz?

4. Komponentlar va variantlar

4.1 Asosiy komponent va nusxa

Komponent (component) — Figma'da qayta ishlatiladigan element. Yordam markazi ikki tushunchani ajratadi:

• Asosiy komponent (main component) — xususiyatlarni belgilaydi. Qatlamlar panelida binafsha belgili.
• Nusxa (instance) — maketdagi har bir ishlatilishi. U asosiy komponentga bog'langan: asosiysi o'zgarsa, hamma nusxa o'zgaradi.

Komponent Ctrl + Alt + K (Mac'da Option + Command + K) bilan yaratiladi. CSS'da bu tanish g'oya: asosiy komponent — class qoidasi (.taom-karta { ... }), nusxa — shu class berilgan har bir HTML element. Qoidani o'zgartirsangiz, hamma karta o'zgaradi.

Dev Mode'da nusxani tanlasangiz, Inspect paneli qaysi komponentdan kelganini va qaysi variant ekanini ko'rsatadi. Bu ma'lumot sizga "bu yangi narsa emas, bor komponent" deydi — yangi CSS yozmaysiz.

4.2 Komponent xususiyatlari

Yordam markazi komponent xususiyatlarining (component properties) besh turini sanaydi. Ularning kodga o'girilishi:

Variant — eng muhimi. «Bahor» taom kartasining maketdagi varianti "Holat" xususiyatiga ega bo'lsin: Oddiy, Yangi, Achchiq, Tugadi. Bu 04-qismdan beri «Bahor»da bor modifikatorlarning o'zi: yangi, mashhur, achchiq, tugadi.

<style>
  body {
    padding: 1rem;
    background: #fffaf0;
    color: #1f2a24;
    font-family: system-ui, sans-serif;
  }
  .qator { display: flex; flex-wrap: wrap; gap: 1rem; }
  .taom-karta {
    position: relative;
    display: grid;
    gap: 0.25rem;
    width: 8rem;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background: #ffffff;
  }
  .taom-karta > * { margin: 0; }
  .narx { color: #b4461a; font-weight: 700; }
  .taom-karta.yangi::before {
    content: "Yangi";
    position: absolute; /* Ignore auto layout */
    inset-block-start: -0.6rem;
    inset-inline-end: 0.5rem;
    padding-inline: 0.4rem;
    border-radius: 0.25rem;
    background: #2f6b3a;
    color: #fffaf0;
    font-size: 0.8rem;
  }
  .taom-karta.achchiq { border-color: #b4461a; }
  .taom-karta.tugadi { background: #eceeed; }
  .taom-karta.tugadi .narx { color: #5b6660; }
</style>
<div class="qator">
  <article class="taom-karta"><h3>Osh</h3>
    <p class="narx">35 000 so'm</p></article>
  <article class="taom-karta yangi"><h3>Manti</h3>
    <p class="narx">30 000 so'm</p></article>
  <article class="taom-karta achchiq"><h3>Lag'mon</h3>
    <p class="narx">28 000 so'm</p></article>
  <article class="taom-karta tugadi"><h3>Ko'k choy</h3>
    <p class="narx"><s>5 000 so'm</s> tugadi</p></article>
</div>

Nimaga qarang: to'rt karta bitta asosiy qoidadan, har biri bitta modifikator bilan farq qiladi. "Yangi" belgisi kartaning yuqori chetiga chiqib turibdi — u oqimdan tashqarida, Figma'dagi Ignore auto layout kabi. Achchiq karta g'isht rangli ramkada, tugagan karta kulrang fonda, narxi chizib tashlangan va yonida "tugadi" so'zi bor. Holat faqat rangda emas, so'zda ham (CSS'da accessibility). Karta width: 8rem — namoyishda to'rttasi yonma-yon tursin deb; «Bahor»da eni grid ustunidan keladi.

Figma'da variantlar bir nechta xususiyatga ega bo'lishi mumkin: "Holat" va "O'lcham" (kichik/katta). Kodda ular mustaqil modifikatorlar bo'ladi — ikkitasi birga ham qo'llanadi. Hover, fokus, nofaol kabi interaktiv holatlar ham ko'pincha variant sifatida chiziladi — lekin kodda ular class emas, :hover, :focus-visible, :disabled (UI/UX asoslari). Buni farqlang.

Maslahat: React kabi freymvorklarda variant — komponentning props'i bo'ladi: <TaomKarta holat="tugadi">. Buni kursda keyinroq o'rganamiz, hozir bilish shart emas. Hozircha: Figma'dagi har variant xususiyati — bitta class guruhi.

Tekshirib ko'ring: Taom kartasi komponentida ikki variant bor: "Holat: Tugadi" va "Holat: Hover". Kodda qaysi biri class bo'ladi, qaysi biri pseudo-klass?

4.3 Prototip: variantlar orasidagi harakat

Prototip — maketning bosiladigan, jonli nusxasi: dizayner "bu tugma bosilsa, u ko'rinishga o'tsin" deb bog'laydi. Masalan, "Oddiy" → "Hover" variantlarini bog'lab, o'tishga davomiylik va easing beradi. Transition darsida aytganimizdek, maketda "Ease Out, 200ms" yoki "Spring" degan yozuvni ko'rasiz. Figma yordam markazidagi easing nomlari: Linear, Ease In, Ease Out, Ease In And Out, uchta "Back" varianti (ortga qaytib o'tadigan) va Custom bezier. Prujina (spring) tayyorlari: Gentle, Quick, Bouncy, Slow va Custom.

Kodga o'girish:

• Davomiylik — transition-duration: 200ms → 0.2s.
• Linear — linear.
• Custom bezier — dizayner bergan to'rt son cubic-bezier() ga aynan ko'chadi.
• Ease In/Out kabi tayyor nomlar — CSS'da ham ease-in, ease-out bor, lekin ularning egri chizig'i Figma'dagi bilan bir xil ekaniga ishonmang. Aniq moslik kerak bo'lsa, dizayndan cubic-bezier qiymatini so'rang.
• Spring — CSS'da prujina linear() bilan chiziladi (Transition darsidagi linear() bo'limi). Harakat prefers-reduced-motion ni hurmat qilsin — prototipda bu sozlama yo'q, uni siz qo'shasiz.

5. Variables — Figma'dagi tokenlar

5.1 Tushunchalar

Variables (o'zgaruvchilar) — Figma'ning token tizimi. Yordam markaziga ko'ra, o'zgaruvchi bitta xom qiymat saqlaydi: rang (#FFFFFF), son (16), satr yoki mantiqiy qiymat (true/false). Tushunchalar Dizayn tokenlari darsidagiga mos keladi:

O'zgaruvchilar paneli chapdagi navigatsiyadan Variables bilan ochiladi. Kolleksiya — panelning yon qismidagi More options → Create collection. Taxallus — qiymatni o'ng tugma bilan bosib, Create alias: qiymat raqam emas, boshqa o'zgaruvchiga ishora bo'ladi.

Uslublar (styles) bilan farqi: uslub bir nechta qiymatni birga saqlaydi — gradient yoki matn uslubi (oila, o'lcham, qalinlik birga). O'zgaruvchi — bitta qiymat, lekin rejimlari bor. Maketda ikkalasi ham uchraydi: rang va masofa — o'zgaruvchi, matn uslubi — style. Kodda matn uslubi bir nechta tokenni birlashtiradi: font-family: var(--shrift-sarlavha); font-size: var(--step-1);.

5.2 «Bahor» tokenlari Figma'da

Dizayn tokenlari darsidagi tokenlar ikki kolleksiyaga tushadi. Figma'da nom qismlari / bilan guruhlanadi (yashil/600):

"→" — taxallus. Semantik kolleksiyada ikki ustun — ikki rejim. Rejim frame'ga qo'llanadi: frame tanlanadi, o'ng paneldagi Appearance bo'limida Apply variable mode. Shunda bitta maketning yorug' va qorong'i nusxalari yonma-yon turadi — dizayner har rangni ikki marta chizmaydi.

CSS'da xuddi shu tuzilma:

<style>
  :root {
    --yashil-600: #2f6b3a;
    --yashil-300: #8fd19e;
    --yashil-900: #16301b;
    --qaymoq-50: #fffaf0;
    --kul-900: #1f2a24;
    --rang-fon: light-dark(var(--qaymoq-50), var(--yashil-900));
    --rang-matn: light-dark(var(--kul-900), var(--qaymoq-50));
    --rang-asosiy: light-dark(var(--yashil-600), var(--yashil-300));
  }
  body { margin: 0; font-family: system-ui, sans-serif; }
  .qator { display: flex; flex-wrap: wrap; }
  section {
    flex: 1 1 12rem;
    padding: 1rem;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  h3 { margin: 0 0 0.25rem; color: var(--rang-asosiy); }
  p { margin: 0; }
  .yorug { color-scheme: light; }
  .qorongi { color-scheme: dark; }
</style>
<div class="qator">
  <section class="yorug"><h3>Rejim: Yorug'</h3>
    <p>Osh — 35 000 so'm</p></section>
  <section class="qorongi"><h3>Rejim: Qorong'i</h3>
    <p>Osh — 35 000 so'm</p></section>
</div>

Nimaga qarang: ikkala blokda CSS bir xil — var(--rang-asosiy). Chapda sarlavha to'q yashil, qaymoq fonda. O'ngda och yashil, to'q yashil fonda. Farqni faqat color-scheme berdi — xuddi Figma'da frame'ga rejim qo'llanganidek. light-dark() — Qorong'i rejim darsidan; .yorug va .qorongi — namoyish class'lari («Bahor»da bu data-tema atributi).

Yordam markaziga ko'ra, rejimlarni Education, Professional, Organization va Enterprise tariflarida yaratish mumkin. Bepul Starter'da rejim qo'shilmaydi — portfolio qadamida buni hisobga olamiz.

5.3 Son o'zgaruvchilari va fluid qiymatlar

Masofa ham o'zgaruvchi bo'ladi: masofa/m = 16. Lekin «Bahor»da --masofa-m — clamp(1rem, …, 1.125rem): 360 pikselda 16, 1280 pikselda 18. Figma o'zgaruvchisi clamp() ni bilmaydi — unda bitta son. Ikki yo'l:

• Figma'da telefon qiymati (16) turadi, kodda formula — ikkalasi bir nom bilan. Eng keng tarqalgan yo'l.
• Rejimlardan foydalanish: "Telefon" rejimida 16, "Kompyuter" rejimida 18. Keyin dasturchi ikki chekkadan clamp() ni o'zi hisoblaydi (Fluid tipografiya).

Qaysi biri bo'lsa ham, nom bir xil bo'lishi asosiy. "Figma'da spacing/md, CSS'da --masofa-m" — bu tarjima jadvali talab qiladi va vaqt o'tib buziladi.

5.4 Code syntax va Dev Mode

Dev Mode o'zgaruvchi ishlatilgan qiymatni kod parchasida var() bilan ko'rsatadi — nom va zaxira qiymat bilan. Yordam markazidagi misol: font-weight: var(--Thin-100, 100);. Figma nomni CSS uchun "tozalaydi": bo'sh joy va belgilar o'rniga chiziqcha.

Buni to'liq boshqarish uchun dizayner har o'zgaruvchiga Code syntax yozadi: o'zgaruvchini tahrirlash oynasida Web, Android va iOS uchun alohida nom. Web uchun — var(--rang-asosiy). Shunda Dev Mode'da maketdagi nom emas, sizning kodingizdagi nom chiqadi. Bu — dizayner va dasturchi bir tilda gaplashishining eng aniq yo'li.

Dev Mode'da o'zgaruvchi nomini bossangiz, Variable details oynasi ochiladi: kolleksiya, joriy rejim, taxalluslar zanjiri (rang/asosiy → yashil/600 → #2F6B3A) va boshqa rejimlardagi qiymatlar.

5.5 Figma'dan kodga: eksport

Dizayn tokenlari darsidagi sxemani eslang: Figma Variables → DTCG JSON → Style Dictionary → CSS. Endi birinchi o'qning aniq yo'li:

• O'rnatilgan eksport. Yordam markaziga ko'ra, Variables oynasida kolleksiyani o'ng tugma bilan bosib Export modes (yoki bitta rejim uchun Export mode) — JSON fayl, DTCG formatida. Teskarisi — Import mode.
• Tokens Studio — Figma uchun mashhur plagin (uchinchi tomon). Tokenlarni o'z formatida saqlaydi va GitHub bilan sinxronlaydi. O'rnatilgan eksport paydo bo'lgunga qadar ko'p jamoalar shunga tayangan; eski loyihalarda uchratasiz.
• REST API — Figma'ning dasturiy interfeysi orqali o'zgaruvchilarni o'qish. Figma dasturchilar hujjatiga ko'ra, Variables API faqat Enterprise tarifida.

flowchart LR
  A["Figma Variables"] -->|"Export modes"| B["tokens.json (DTCG)"]
  B --> C["Style Dictionary"]
  C --> D["tokenlar.css"]
  D --> E["«Bahor» sahifalari"]

Nimaga qarang: qo'l bilan ko'chirish yo'q. Dizayner rangni o'zgartirsa — yangi JSON, yangi tokenlar.css. Style Dictionary va npm buyrug'i — Dizayn tokenlari darsida ko'rsatilgan; to'liq avtomatlashtirish (har o'zgarishda o'zi ishlaydi) — 07-qismdagi GitHub Actions bilan.

Tekshirib ko'ring: Dizayner Figma'da rang/asosiy qiymatini yashil/600 dan yashil/700 ga almashtirdi. CSS'da nechta qator o'zgaradi — tokenlar tizimi to'g'ri qurilgan bo'lsa?

6. Dizayndan kodga: ish jarayoni

6.1 Tartib

Maketni olgach, kod yozishdan oldin:

1. Ko'zdan kechirish. Hamma sahifa va ekran enini ko'ring. Takrorlanadigan bloklarni (komponentlarni) sanang.
2. Tokenlar. Variables bormi? Bo'lmasa — ranglar va masofalarni jadvalga yig'ing (Figma dasturchi uchun 1).
3. Tuzilma. Frame'larni semantik teglarga o'giring: header, main, article.
4. Layout. Auto Layout → flex/grid, constraints → position.
5. Komponentlar. Variantlarni class'larga, interaktiv holatlarni pseudo-klasslarga.
6. Savollar. Hammasini bitta ro'yxatda, maket ustidagi izoh sifatida.
7. Solishtirish. Brauzer va maketni yonma-yon.

6.2 Maket bilan solishtirish

"Pixel-perfect" — maket va sahifa pikselma-piksel bir xil bo'lishi. Oddiy usul: frame'ni PNG qilib eksport qiling (1x), sahifa ustiga yarim shaffof qo'yib ko'ring. Buning uchun kengaytma shart emas — vaqtincha CSS yetadi:

/* Vaqtinchalik: maketni sahifa ustiga qo'yish (keyin o'chiring) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("maket-360.png") no-repeat top center;
  opacity: 0.5;
  pointer-events: none;
}

pointer-events: none — rasm sichqonchani "tutib qolmaydi", sahifa bosiladi. DevTools'da ekran enini maketdagi frame eni bilan bir xil qiling (masalan, 360).

Lekin 100% moslik — maqsad emas. Brauzer shriftni Figma'dan boshqacha chizadi, satr uzilishlari farq qiladi. Kursdagi maqsad — token moslik: har masofa, rang va o'lcham maketdagi token bilan bir xil. 1–2 piksellik farq shrift chizilishidan bo'lsa — normal.

6.3 MCP va AI

Endi AI yordamchilar maketni to'g'ridan-to'g'ri o'qiy oladi. MCP (Model Context Protocol) — AI agent va dastur o'rtasidagi standart "ulagich". Figma yordam markaziga ko'ra, Figma MCP server AI agentlariga tanlangan frame'dan kod yaratish va dizayn kontekstini (o'zgaruvchilar, komponentlar, layout) olish imkonini beradi. Masofaviy (remote) server hamma tarif va o'rindiqlarda bor. Kompyuterdagi (desktop) server esa pullik tarifda, Dev yoki Full o'rindig'i bilan. Mijozlar orasida VS Code, Cursor va Claude Code bor.

AI bilan kod yozishni kursda alohida o'rganamiz — hozir bilish shart emas. Bitta qoida hozirdan: AI chiqargan kod ham Figma parchasi kabi tekshiriladi. Tokenlar ishlatilganmi, semantik teglar to'g'rimi, fokus va kontrast joyidami (CSS'da accessibility). Code syntax to'g'ri yozilgan maketdan AI ham to'g'ri token nomlarini oladi — tartibli maket hamma uchun foydali.

7. Ko'p uchraydigan xatolar

7.1 Auto Layout'ni position bilan qayta yasash

Har qatlamga koordinata. Tuzatish: Auto Layout ko'rsangiz — flex yoki grid.

7.2 Fill container → width: 100%

Flex qatorda width: 100% qo'shnilarni siqib chiqaradi. Tuzatish: asosiy o'qda flex: 1.

7.3 Hover varianti → .hover class

Tuzatish: interaktiv holat — :hover, :focus-visible; class faqat ma'no variantlari uchun.

7.4 Nomlar ikki tilda

Figma'da color/primary, CSS'da --rang-asosiy. Tuzatish: bir nom; Code syntax bilan bog'lang.

7.5 Figma o'zgaruvchisidan 16px ni qotirib yozish

Fluid token yo'qoladi. Tuzatish: tokenni var() bilan; formula tokenlar.css da.

7.6 Pixel-perfect uchun margin-top: -1px

Tuzatish: shrift chizilishidagi farqni "tuzatmang" — tokenlar mos bo'lsa, ish tayyor.

8. Mashqlar

1-mashq (oson): Auto Layout'ni o'qing

Maketdagi "Aloqa" satri: gorizontal Auto Layout, Gap 12, Alignment — vertikal markaz; ichida ikonka (Fixed 24×24) va matn (Hug). Butun satr — Hug. CSS yozing.

Ishora: "Asosiy sozlamalar" va "Hug, Fill, Fixed" jadvallari; --masofa-s = 12.

.aloqa-satri {
  display: inline-flex; /* butun satr Hug: o'z kontenti eni */
  align-items: center;
  gap: var(--masofa-s);
}

.aloqa-satri svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none; /* Fixed: siqilmaydi */
}

2-mashq (o'rta): variantlardan class'larga

Maketdagi "Tugma" komponenti ikki variant xususiyatiga ega: Tur (Asosiy, Ikkinchi) va Holat (Oddiy, Hover, Fokus, Nofaol). Kodda nechta class kerak va qaysi holatlar class bo'lmaydi? Sxema yozing.

Ishora: "Komponent xususiyatlari" bo'limi — interaktiv holatlar va ma'no variantlari farqi.

button { ... }            /* Tur: Asosiy, Holat: Oddiy */
button.ikkinchi { ... }   /* Tur: Ikkinchi */
button:hover { ... }      /* Holat: Hover */
button:focus-visible { ... }
button:disabled { ... }

3-mashq (qiyin): Variables jadvali

Dizayner «Bahor» uchun Figma'da uchta kolleksiya yaratmoqchi va sizdan jadval so'radi: "Primitivlar", "Semantik ranglar" (rejimlar: Yorug', Qorong'i), "Masofa". Har kolleksiyaga «Bahor» tokenlaridan 3 tadan o'zgaruvchi yozing: Figma nomi, qiymat yoki taxallus, Web code syntax.

Ishora: "«Bahor» tokenlari Figma'da" jadvali; qorong'i qiymatlar — Qorong'i rejim (fon yashil/900, matn qaymoq/50); masofa — telefondagi qiymat.

4-mashq: Portfolio qadami — portfolio kartasi Auto Layout va Variables bilan

O'tgan darsda Figma draft'ida portfolio loyiha kartasini chizgan edingiz. Endi uni "aqlli" qiling:

1. Kartaga Auto Layout qo'shing (Shift + A): Vertical, padding va gap — portfolio tokenlaridan.
2. Kartadan komponent yarating (Ctrl + Alt + K) va 2 ta nusxa qo'ying. Asosiy komponentda padding'ni o'zgartiring — nusxalar ham o'zgardimi?
3. Variables oching va portfolio tokenlaridan 5 ta o'zgaruvchi yarating: rang/asosiy, rang/matn, rang/fon, masofa/m, burchak/m. Har biriga Web code syntax yozing. Kartaning Fill, Stroke, padding va burchagini ularga bog'lang.
4. Starter'da rejim qo'shib bo'lmaydi. Qorong'i rejim qiymatlarini qayerda saqlaysiz?

Ishora: Figma nomlari portfolio'ning tokenlar.css idagi nomlar bilan bir xil bo'lsin — / bilan; Code syntax — var(--...). O'zgaruvchini xususiyatga bog'lash — qiymat maydonidagi o'zgaruvchi belgisi orqali.

9. Real ishda

• Dizayn tizimi jamoalari Figma kutubxonasi va kod kutubxonasini birga yuritadi: har komponent ikkala joyda bir nomda, variantlari bir xil. Code Connect (Figma dasturchi uchun 1) ularni Dev Mode'da bog'laydi.
• Handoff uchrashuvi (handoff — dizaynni kodga "topshirish"). Katta vazifadan oldin dizayner va dasturchi maketni birga ko'rib chiqadi: Auto Layout qayerda, qaysi holatlar chizilmagan, qaysi qiymat tokenga tushmagan.
• Token quvuri: Figma Variables → JSON → Style Dictionary → CSS/iOS/Android — dizayn o'zgarishi kodga qo'lsiz yetadi.
• Intervyuda so'raladi: "Auto Layout'ni CSS'ga qanday o'girasiz?", "Hug va Fill farqi?", "Figma variantlari kodda nima bo'ladi?", "Dizayn tokenlarini Figma'dan kodga qanday o'tkazasiz?".

Xulosa

• Auto Layout = flex: yo'nalish, gap, padding, tekislash; Hug — kontent o'lchami, Fill — flex: 1, Fixed — ehtiyotkorlik bilan max-width.
• Constraints — Auto Layout'siz frame'lar uchun, CSS'da position va inset; responsive qoidalarni siz yozasiz.
• Komponent — class qoidasi, nusxa — element; variant — modifikator, interaktiv holat esa pseudo-klass.
• Variables — tokenlar: kolleksiya, taxallus, rejim (light-dark()); Code syntax bilan nom bir xil bo'ladi.
• Eksport: Export modes → DTCG JSON → Style Dictionary; AI va MCP chiqargan kod ham tekshiriladi.

Keyingi dars: SVG'ni CSS bilan stillash — Figma'dan eksport qilingan ikonkalarni to'g'ri ulaymiz, rangini currentColor bilan boshqaramiz va chizilish animatsiyasini yasaymiz.

Manbalar

• Figma Learn (help.figma.com): "Guide to auto layout", "Apply constraints to define how layers resize", "Guide to components in Figma"
• Figma Learn: "Explore component properties", "Create components to reuse in designs", "Prototype easing and spring animations"
• Figma Learn: "Create and manage variables and collections", "Modes for variables", "Variables in Dev Mode", "The difference between variables and styles"
• Figma Learn: "Guide to the Figma MCP server"; Figma Developers: "Variables" REST API — developers.figma.com
• W3C Design Tokens Community Group: "Design Tokens Format Module" — designtokens.org