Figma va front-endga tayyorlash

Frame, komponent va variantlar, rang/shrift/layout grid, eksport, CSS qiymatlari

8-sinfWeb Full-stack6-hafta · 17-dars

Bugun nimalarni o'rganamiz?

Interfeys va frame

Dizayn maydoni

Rang, shrift va masofa

Dizayn tizimi asoslari

Komponent va eksport

Dizayndan kodga

Takrorlash

Telefon uchun CSS yozilgach, kengroq ekran uchun nima ishlatiladi?

Mobile-first: min-width qoidalari qo'shiladi.

Interfeys va frame

Dizayn maydoni

Figma'da boshlash

Figma o'lchamlari va CSS


/* Figma: Frame "Phone" 390 x 844 */
body { max-width: 390px; }

/* Figma: Frame "Desktop" 1440 x 1024 */
@media (min-width: 1200px) {
  .konteyner { max-width: 1100px; }
}

Telefon frame ni birinchi chizing (mobile-first). Frame o'lchami — dizayn uchun asos, sayt esa har kenglikda ishlashi kerak.

Mini-test

Figma'da dizayn «ekrani» nima deyiladi?

Frame — dizayn maydoni.

Rang, shrift va masofa

Dizayn tizimi asoslari

Dizayn tizimi

Dizayn qiymatlari → CSS o'zgaruvchilar


:root {
  --asosiy: #17e;
  --matn: #222;
  --fon: #eee;
  --masofa: 8px;
}
body { color: var(--matn); background: var(--fon); }
.tugma { background: var(--asosiy); padding: calc(var(--masofa) * 2); }

Ranglar va masofalarni CSS o'zgaruvchilar (--nom) ga yig'ing: dizaynerdan yangi rang kelsa, bitta joyda o'zgartirasiz.

Mini-test

Auto layout CSS dagi qaysi texnologiyaga mos?

Gap va padding — Flexbox kabi.

Komponent va eksport

Dizayndan kodga

Tugma komponenti → CSS


.tugma {
  background: #17e;
  color: #fff;
  font: 700 1rem/1.25 Arial, sans-serif;
  padding: 12px 24px;
  border-radius: 8px;
}
.tugma:hover { background: #15b; }

Figma'dagi piksel qiymatini CSS ga o'tkazganda matn o'lchamini rem ga (px ÷ 16) aylantiring: 24px = 1.5rem. Rasmlarni eksportdan keyin hajmini kichraytiring.

Mini-test

Ikonka va logotip uchun qaysi eksport formati qulay?

SVG — vektor: sifat yo'qolmaydi.

SVG va PNG

SVG

Vektor: har qanday kattalikda aniq; ikonka va logotip uchun

PNG

Piksel rasm: shaffof fon; kattalashtirsa xiralashadi

Ikonka — SVG, foto — JPEG, shaffof rasm — PNG.

Atamalar. Bosing

Frame

bosing

Figma'dagi dizayn ekrani

Component

bosing

Qayta ishlatiladigan element

Variant

bosing

Komponentning boshqa holati

Auto layout

bosing

Elementlarni avtomatik tizish (Flexbox kabi)

Dizayn → Kod

1. Chizish

Frame va elementlar.

2. Komponent

Tugma, karta.

3. Kod

CSS qiymatlari.

Figma → CSS

Figma	CSS	Misol
Fill	`background` / `color`	`#17e`
Text	`font-size`, `font-weight`	`24px`, `700`
Auto layout gap	`gap`	`16px`
Padding	`padding`	`12px 24px`
Corner radius	`border-radius`	`8px`

Pastga bosing: moslik jadvali

Tugma va karta dizayni

Phone frame (390px) yarating va unga sarlavha, rasm o'rni va tugma chizing.
Tugmani komponentga aylantiring va ikki variant (oddiy, bosilgan) yarating.
Rang, shrift va padding qiymatlarini daftarga CSS ko'rinishida yozing.

Ranglar va masofalar


a { color: #17e; }
b { background: #18e; }
.x { padding: 13px; }

Ranglar va masofalar


a { color: var(--asosiy); }
b { background: var(--asosiy); }
.x { padding: 16px; }

Figma raqamlarda

— masofa uchun asos qadam

ustun — kompyuter layout gridi

eksport formati: SVG, PNG, JPEG

Izchil dizayn — kam kod va kam xato.

Amaliy topshiriq 20 daqiqa

OsonFrame yaratish: Telefon uchun Phone frame ni qanday yaratasiz? Qadamlarni yozing.

OsonQiymatlarni o'qish: Figma'da tugma: Fill #17E, radius 8, padding 12/24. CSS ni yozing.

O'rtapx → rem: 24px shrift o'lchamini rem ga o'tkazing.

O'rtaAuto layout: Auto layout: yo'nalish gorizontal, gap 16, padding 24. CSS ni yozing.

QiyinEksport formati: Logotip, foto va shaffof banner uchun qaysi formatlarni tanlaysiz?

BonusRanglar tizimi: Sayt uchun 4 ta rangni CSS o'zgaruvchilar bilan e'lon qiling.

Dars xulosasi

Interfeys

Frame, Layers, Design paneli.

Dizayn tizimi

Rang, shrift, 8px masofa, layout grid.

Kodga o'tkazish

Komponent, CSS qiymatlari, eksport.

Uyga vazifa: Figma'da tugma va karta, CSS qiymatlari.

Keyingi dars: Git va GitHub

Versiya nazorati, commit va push

6-hafta · 18-dars