AXV

Figma platformasi va ish muhiti

Bulut, kross-platforma, fayl tuzilmasi, qurilmada ko'rish, vektor va SVG

9-sinfUX/UI dizayn va Advanced Front-end6-hafta · 16-dars

Bugun nimalarni o'rganamiz?

Figma nima?

Bulutdagi dizayn

Fayl tuzilmasi

Tartib — yarim ish

Vektor grafika

Ikonka chizamiz

Takrorlash

UI kit nima?

UI kit — tayyor komponentlar to'plami.
01

Figma nima?

Bulutdagi dizayn

Figma afzalliklari

Bulutdasaqlanadi Real vaqtdahamkorlik Har qandayqurilmada Versiya tarixi Bir fayl — butun jamoa uchun

Figma bilan nima yaratiladi


Interfeys elementlari : tugma, menyu, forma, karta
Interaktiv prototip   : ekranlar orasida bosish yo'llari
Vektor grafika        : ikonka, illyustratsiya (SVG)
Hamkorlik             : sharh, real vaqt, versiya tarixi
Figma'ning bepul tarifi o'quv loyihalar uchun yetarli. Akkaunt ochishda yosh va maktab qoidalariga rioya qiling, mentor yordam beradi.

Mini-test

Figma'ning boshqa dasturlardan asosiy farqi nima?

Bulut va real vaqt hamkorlik — asosiy ustunlik.
02

Fayl tuzilmasi

Tartib — yarim ish

Fayl ierarxiyasi

Project File Page Frame Har darajada tartibli nom

«E-kutubxona» fayl tuzilmasi


E-kutubxona (File)
  Cover
  Ikonkalar
  Komponentlar
  Desktop  -> Frame "Bosh sahifa" 1440 x 1024
  Mobil    -> Frame "Bosh sahifa" 390 x 844
Tezkor tugmalar: F — Frame, R — to'rtburchak, T — matn, V — Move, H — Hand, C — izoh. Tugmalarni o'rganish ishni 2 barobar tezlashtiradi.

Mini-test

Figma'da dizayn «ekrani» nima deb ataladi?

Frame — ekran maketi.
03

Vektor grafika

Ikonka chizamiz

Ikonkadan faylgacha

Shakllar(R, O, L) Boolean amal Nom berish Export: SVG Ikonka — SVG

Ikonka qoidalari


O'lcham   : 24 x 24 (Frame)
Chiziq    : 2 px, bir xil qalinlik
Nom       : ikonka/kitob
Format    : SVG (vektor)
Rang      : keyin CSS da o'zgartiriladi
Ikonka uchun SVG, foto uchun JPEG, shaffof rasm uchun PNG tanlang. Ikonkani eksportdan oldin Frame ichida o'lchamini tekshiring.

Mini-test

Ikonka va logotip uchun qaysi format qulay?

SVG — vektor, sifat yo'qolmaydi.

Vektor va rastr

Vektor (SVG)

Formulalar: har qanday kattalikda aniq; ikonka va logotip uchun
VS

Rastr (PNG, JPEG)

Piksellar: kattalashganda xiralashadi; foto uchun

Ikonka — SVG, foto — JPEG.

Atamalar. Bosing

Frame

bosing

Dizayn ekrani

Layer

bosing

Frame ichidagi element

Pen

bosing

Vektor nuqtalar bilan chizish asbobi

Boolean

bosing

Shakllarni birlashtirish yoki ayirish

Fayl tayyorlash

1. Fayl

Sahifalar yarating.

2. Frame

Desktop va Mobil.

3. Ikonka

Chizing va SVG qiling.

Figma tezkor tugmalari

TugmaVazifaMisol
FFrame1440 × 1024
R / O / LTo'rtburchak / ellips / chiziqIkonka shakli
TMatnSarlavha
PPen (vektor)Egri chiziq
CIzohSharh qoldirish

Pastga bosing: tezkor tugmalar

E-kutubxona fayli

  1. 5 ta sahifa yarating: Cover, Ikonkalar, Komponentlar, Desktop, Mobil.
  2. Desktop (1440 × 1024) va Mobil (390 × 844) frame yarating va nom bering.
  3. ikonka/kitob ni 24 × 24 frame ichida chizib, SVG ga eksport qiling.

Qatlam nomlari


Rectangle 47
Frame 12
Group 3

Qatlam nomlari


Header
Bosh sahifa
Qidiruv

Figma raqamlarda

0
asosiy afzallik: bulut, real vaqt, kross-platforma
0
daraja: Project, File, Page, Frame, Layer
0
— ikonka frame'ining odatiy o'lchami

Tartibli fayl — jamoa ishining asosi.

Amaliy topshiriq 20 daqiqa

OsonAfzalliklarni sanang: Figma'ning 3 afzalligini va har biriga misol yozing.
OsonQatlam nomlari: Rectangle 47 va Frame 12 o'rniga ma'noli nomlar bering.
O'rtaFayl tuzilmasi: E-kutubxona uchun sahifalar ro'yxatini tuzing.
O'rtaFrame o'lchamlari: Desktop va Phone frame uchun o'lchamlarni yozing.
QiyinKitob ikonkasi: 24 × 24 «kitob» ikonkasini 2 shakl va 1 chiziqdan chizish ketma-ketligini yozing.
BonusFormat tanlash: Logotip, foto va shaffof banner uchun formatlarni tanlang.

Dars xulosasi

Platforma

Bulut, real vaqt, kross-platforma.

Tuzilma

File → Page → Frame → Layer.

Vektor

Pen, Boolean, SVG eksport.

Uyga vazifa: E-kutubxona fayl tuzilmasi va SVG ikonka.

Keyingi dars: UI komponentlar

Tugma, maydon, karta, variantlar

6-hafta · 17-dars