Figma dasturida oddiy dizayn yaratish (krasovka, nike) - Informatika va AT - Kurs ishlari

Dokument ma'lumotlari

Narxi	15000UZS
Hajmi	343.7KB
Xaridlar	0
Yuklab olingan sana	18 Iyun 2024
Kengaytma	docx
Bo'lim	Kurs ishlari
Fan	Informatika va AT

Sotuvchi

Diyorbek

Ro'yxatga olish sanasi 29 Fevral 2024

98 Sotish

Figma dasturida oddiy dizayn yaratish (krasovka, nike)

Sotib olish

“KOMYUTER GRAFIKASI VA WEB-DIZAYN” FANIDAN
KURS ISHI
Mavzu: Figma dasturida oddiy dizayn yaratish
(krasovka, nike)

Mundarija
Kirish…………………………………………………………………...…… 3
I BOB: Figma dasturi bilan tanishish…………………………………...….
6
1.1 Figma dasturini o’rnatish va ro’yxatdan o’tish………..…………………
10
1.2 Figma Dasturida UI/UX Dizaynning O'rganish………..………………..
11
1.3 Asosiy interfeyslarini tushunish va o’rganish…………..……………… 14
1.4 Komponentlar va stilga asoslangan komponentlar haqida tushuncha….. 15
II BOB: Figma dasturida dizayn jarayonlari………………….…………
18
2.1 Figma dasturidagi
metodologiyasi……………………………………….20
2.2 Dizayn jarayonining umumiy
tushunchasi……………………………….22
2.3 Krasovka yoki Nike kabi oddiy dizaynning
konseptsiyasi……………….24
III BOB: Figmada oddiy dizayn yaratish………………………………... 26
3.1 Asosiy slaydlar va ma’lumotlar
joylashish……………………………….30
3.2 Elementlar, ranglar va shriftlar bilan
ishlash……………………………..31
3.3 Responsive dizayn prinsiplari va qo’llanilishi……………………………
32
Xulosa…………………………………………………………………...…..
34
Foydalanilgan adabiyotlar…………………………………………….….. 35
2

Kirish
So'nggi yillarda Figma etakchi bulutga asoslangan dizayn dasturi sifatida
paydo bo'lib, dizaynerlar va dizayn guruhlarini hamkorlikdagi, samarali va
foydalanuvchilarga qulay platforma bilan ta'minlaydi. Bir qator kuchli xususiyatlar
va imtiyozlar bilan Figma tezda butun dunyo bo'ylab dizaynerlar uchun asosiy
vositaga aylandi. Ushbu maqolada biz Figmaning asosiy xususiyatlari va
afzalliklarini va ular dizaynerlarga ish jarayonini soddalashtirish va yuqori sifatli
dizaynlarni yaratishda qanday yordam berishini o'rganamiz.
Figma - bu onlayn platformada ishlaydigan dastur, dizayn va prototiplash
jarayonlarini osonlashtirish uchun mo'ljallangan. Bu dasturga brauzer orqali kirish
mumkin va uni Windows, macOS, yoki Linux operatsion tizimlari bilan ishga
tushirish mumkin.
Figma quyidagi imkoniyatlarni taqdim etadi:
Dizayn ishlari uchun qulay interfeys: Figma yorqin va intuitiv interfeys bilan
ta'minlangan, shuningdek obyektlarni tuzish, tahrirlash va ulashuvni osonlashtiradi.
Jamoa ishlari uchun ideal: Bir nechta foydalanuvchilar bir qatorda bir
vaqtning o'zida bir-biriga uzluksiz ravishda ishlashlari mumkin.
Onlayn va yopiq hamkorlik: Figma jamoasi birgalikda onlayn fayllarni
o'zgartirishi, ulashish va izlash imkoniyatlariga ega. Shuningdek, jamoa a'zolari
ishlarini yopiq rejimda ham amalga oshirishlari mumkin.
Prototiplash: Figma prototiplash funktsiyalari orqali interaktiv prototiplar
yaratish va ulardan foydalanish imkoniyatini beradi.
Komponentlar va stilar: Figma komponentlar va stilarni o'zlashtirish va ularni
qayta ishlatishning oson usullarini taqdim etadi, shuningdek komponentlar
kataloglaridan foydalanish imkoniyatini beradi.
Tarkibiy integratsiya: Figma boshqa dizayn dasturlari va platformalar bilan
integratsiya qilish imkoniyatini taqdim etadi, shuningdek Slack, Jira, Zeplin, va
boshqalarga.
3

Figma dasturi foydalanuvchilarga oddiy va qulay interfeys orqali dizayn va
prototiplash vazifalarini bajarish imkoniyatini beradi, shuningdek jamoa ishlari va
onlayn hamkorlikda ishlash imkoniyatlarini taqdim etadi.
Figma dasturida oddiy dizayn yaratish kursining maqsadlari va o'qitish
metodlarini quyidagicha ifodalash mumkin:
Maqsadlar: Figma platformasida ishlashni o'rganish: Kursning birinchi
maqsadi Figma dasturining funksiyalarini va interfeysini tushunish, ishlash
prinsiplarini o'rganish va dasturni foydalanib dizayn va prototiplashni
osonlashtirish.
Oddiy dizayn tajribasini oshirish: Kurs o'quvchilarga oddiy dizaynning
konseptsiyasini va amaliyotni o'rganish, ranglar, shriftlar va boshqa dizayn
elementlarini tanishib chiqish, shuningdek dizayn prinsiplarini va qo'llanishi
o'rganish.
Kursni bitirgan keyin o'quvchilar Figma dasturida o'zlariga mos dizayn
ishlarini osonlashtirishlari: Kurs yakunlandiktan so'ng o'quvchilar o'zlariga mos
dizayn ishlarini osonlashtirishlari, prototiplar yaratishlari va jamoa ishlari uchun
Figma dasturidan samarali foydalanishlari mumkin bo'ladi.
O'qitish metodlari:
Amaliyot: Amaliyot asosiy o'qitish metodlaridan biridir, shuningdek Figma
kursi ham o'quvchilarga amaliyot yondashuvlar orqali dastur bilan ishlash va
dizayn qilishni o'rgatadi. Misollar, mashqlar va dasturlar orqali o'quvchilar
amaliyotni oshirib borishlari kutiladi.
Kooperativ ta'lim: Figma dasturida oddiy dizayn yaratish kursida jamoa
ishlari va kooperativ ta'limning o'rniga o'quvchilar bir-birlari bilan aloqada bo'lib,
birgalikda yaratish va yondashuvlar orqali bilishlarini oshirish uchun imkoniyat
yaratish kutiladi.
Ko'rsatmalarni dastlabki darsda qo'llab-quvvatlash: Kurs boshlanishida
o'quvchilarga Figma platformasi haqida umumiy tushuncha berish, kerakli
4

qo'llanma va manbalar to'plamini ko'rsatish, shuningdek asosiy funksiyalarni
dastlabki darsda tushuntirish kutiladi.
Mashq tajribasi: O'quvchilar uchun mashq tajribasi ham muhimdir. Dasturni
o'rganish paytida, o'quvchilar o'zlariga berilgan vazifalarni bajarish va dizayn
yaratish orqali o'zlarini rivojlantirishlari kutiladi.
Bu metodlar kurs ishidagi o'quvchilar uchun maqsadlarni yetkazish va Figma
dasturini o'rganishda yordam berish uchun eng samarali va foydali bo'ladi.
5

I-BOB: Figma dasturi bilan tanishish
Figma — bu veb-saytlar, ilovalar va boshqa dizayn mahsulotlarini online
rejimda tayyorlash uchun ixtisoslashgan grafik muharrir. U 2016 yilda Sketch va
Adobe XD’ning analogi sifatida ishga tushirilgan hamda tez fursat ichida grafik
dizaynerlar o’rtasida eng mashhur vositalardan biriga aylandi.
Bu postda Figma’ning qanday xususiyatlarga egaligi va nima uchun uni
hoziroq o’rganishni boshlashingiz kerakligi haqida aytib o’taman.
B ulutli fayllarni saqlash. Barcha Figma fayllari kompyuteringizda emas,
balki cloud-bulutda saqlanadi. Shuning uchun, siz ularning xavfsizligi haqida
qayg’urmasangiz ham bo’ladi. Menga eng yoqadigan qismi: Figma’dagi barcha
o’zgarishlar avtomatik ravishda saqlanadi (auto saving).
Lekin esdan chiqarmaslik lozim: fayldagi tasvirlar qancha ko’p bo’lsa,
ularning oxirgi ko’rinishini yuklab olinishini kutishingiz kerak bo’ladi.
R amkalar. Photoshop’dagiga o’xshash Figma ichidagi qulay vosita. Uning
ichida dizaynerlar dastur ekranlarini loyihalashtira oladi.
Har safar ramkalarning balandligi va kengligini moslashtirmaslik uchun ishlab
chiquvchilar turli xil qurilmalar uchun bir nechta standart o’lchamlarni taqdim
etdilar: masalan, barcha turdagi iPhone va eng mashhur Android smartfonlari
uchun.
Figma dasturi bir qancha oddiy bilan birgalikda quyidagi bosqichlarni o'tkazadi:
6

1-rasm. Figma dasturini o’rnatish
Dasturni o'rnatish: Figma dasturini o'rnatish uchun, birinchi navbatda
brauzeringizda figma.com saytiga kirishingiz kerak. Keyin, saytga kirganingizda
ro'yxatdan o'tishingiz yoki foydalanuvchi nomi va parolingiz bilan kirishingiz talab
etiladi.
2-rasm. Figma dasturining interfeysi
Asosiy interfeys: Figma dasturiga kirgandan so'ng, asosiy interfeysni
o'rganishingiz lozim. Bu interfeysda sahna, slaydlar, alatlar paneli, obyektlar paneli
va boshqa funksiyalar mavjud.
Elementlarni yaratish va tahrirlash: Figma dasturida obyektlarni yaratish va
tahrirlash juda oson. Misol uchun, chizish vositasidan istalgan shakl yaratishingiz,
rangini o'zgartirishingiz va unda matn yozishingiz mumkin.
7

3-rasm. Figma dasturida prototiplash
Prototiplash: Figma dasturi interaktiv prototiplar yaratishga imkoniyat beradi.
Siz obyektlarni interaktiv qilish, bog'lash va prototipni sinash imkoniyatlaridan
foydalanishingiz mumkin.
Komponentlar va stil: Figma dasturida komponentlar va stilni boshqarish juda
oson. Siz komponentlar yaratishingiz va ularni qayta ishlatishingiz mumkin,
shuningdek stil bilan bog'langan komponentlar orqali dizayningizni samarali
boshqarishingiz mumkin.
Jamoa ishlari: Figma dasturi jamoa ishlari uchun qulay imkoniyatlar taqdim
etadi. Siz boshqa foydalanuvchilar bilan birgalikda ishlashingiz, fayllarni
o'zgartirishingiz va fikrlar almashingiz mumkin.
Figma dasturiga tanishish oson va tezda o'z dizaynlarini yaratish va
prototiplashga boshlash uchun juda samarali bo'ladi. Agar sizning savollaringiz
yoki qo'rqinishingiz bo'lsa, menga so'rang, men sizga yordam bera olishim
mumkin.
Figma xususiyatlari:
Haqiqiy vaqtda hamkorlik: Figmaning real vaqtda hamkorlik qilish xususiyati
uning eng kuchli tomonlaridan biri bo'lib, bir vaqtning o'zida bir nechta
dizaynerlarga bir xil loyihada ishlash imkonini beradi.
Bu xususiyat jamoalarga dizaynlar ustida hamkorlik qilish, fikr almashish va
tez takrorlashni osonlashtiradi.
Vektor tarmoqlari: Figmaning vektor tarmog'i xususiyati murakkab shakllar
va dizaynlarni yaratish uchun kuchli vositadir. Uning intuitiv interfeysi vektor
grafikalarini yaratish va tahrirlash jarayonini soddalashtiradi, bu esa
piktogrammalar, logotiplar va boshqa vektorga asoslangan dizaynlarni yaratish
uchun ideal qiladi.
Prototiplash: Figma prototiplash xususiyati dizaynerlarga foydalanuvchining
dizayn bilan o'zaro ta'sirini taqlid qiluvchi interaktiv prototiplarni yaratishga imkon
beradi. Bu xususiyat, ayniqsa, dizaynlarni sinab ko'rish va ishlab chiqish
boshlanishidan oldin foydalanuvchi oqimlarini tekshirish uchun foydalidir.
8

Versiya tarixi: Figma versiya tarixi xususiyati dizaynerlarga vaqt o'tishi bilan
dizaynga kiritilgan o'zgarishlarni kuzatish imkonini beradi. Bu xususiyat
dizaynning oldingi versiyalariga qaytishni, turli dizayn takrorlashlari bilan tajriba
qilishni va samarali hamkorlik qilishni osonlashtiradi.
Dizayn tizimini boshqarish: Figmaning dizayn tizimini boshqarish xususiyati
dizaynerlarga barcha dizayn loyihalarida izchillikni ta'minlaydigan dizayn
tizimlarini yaratish va saqlash imkonini beradi. Dizayn tizimlari jamoalarga dizayn
jarayonini soddalashtirishga, hamkorlikni yaxshilashga va doimiy brend
identifikatorini saqlashga yordam beradi.
Figmaning afzalliklari:
Platformalararo muvofiqlik: Figma bulutga asoslangan vosita bo lib, ungaʻ
istalgan veb-brauzerdan kirish mumkin. U Mac va kompyuterda ishlaydi,
shuningdek, iOS va Android uchun mobil ilovalar ham mavjud. Ushbu
platformalararo muvofiqlik jamoalarga, ularning qurilmasi yoki operatsion
tizimidan qat'i nazar, dizaynlar ustida hamkorlik qilishni osonlashtiradi.
Masshtablilik: Figmaning bulutga asoslangan infratuzilmasi uni kerak
bo'lganda kattalashtirish yoki kamaytirishni osonlashtiradi. U yirik dizayn
loyihalarini osonlik bilan hal qila oladi va uning hamkorlik xususiyatlari
jamoalarga murakkab loyihalarda birgalikda ishlashni osonlashtiradi.
Tejamkorlik: Figma - bu dizayn guruhlari uchun tejamkor variant bo'lib, turli
ehtiyojlarga mos keladigan narx rejalari qatoriga ega. Bu qimmatbaho dizayn
dasturiy ta'minoti litsenziyalari va apparat ta'minotini yangilash zaruratini yo'q
qiladi, chunki hamma narsa bulutda joylashgan.
Hamjamiyatni qo'llab-quvvatlash: Figma resurslari, shablonlari va o'quv
qo'llanmalarini baham ko'radigan rivojlanayotgan dizaynerlar hamjamiyatiga ega.
Ushbu hamjamiyat yordami asbobga yangi bo'lgan yoki muayyan dizayn
muammosi bilan yordamga muhtoj bo'lgan dizaynerlar uchun juda foydali bo'lishi
mumkin. Figma hamkorlikda, bulutga asoslangan dizayn dasturini qidirayotgan
dizaynerlar va dizayn guruhlari uchun ajoyib vositadir. Uning noyob funktsiyalar
to'plami, jumladan, real vaqtda hamkorlik, vektor tarmoqlari, prototiplash,
9

versiyalar tarixi va dizayn tizimini boshqarish, uni dizaynerlar uchun kuchli
vositaga aylantiradi.
O'zining platformalararo muvofiqligi, kengaytirilishi, tejamkorligi va jamiyat
tomonidan qo'llabquvvatlanishi bilan Figma barcha o'lchamdagi va tajriba
darajasidagi dizayn guruhlari uchun ideal variantdir. Figmadan foydalanib,
dizaynerlar o'zlarining ish jarayonlarini soddalashtirishlari, yuqori sifatli
dizaynlarni yaratishlari va jamoa a'zolari bilan samarali hamkorlik qilishlari
mumkin
1.1 Figma dasturini o’rnatish va ro’yxatdan o’tish
Figma dasturini o'rnatish va ro'yxatdan o'tkazish uchun quyidagi qadam-
qadam yordam beraman:
4-rasm. Figma dasturiga kirish va ro’yxatdan o’tish.
Figma saytiga kirish: Brauzeringizni oching va figma.com saytiga kirib,
Figma dasturini o'rnatish va ro'yxatdan o'tkazish uchun "Sign Up" yoki "Get
Started" tugmasini bosing.
Ro'yxatdan o'tkazish: Ro'yxatdan o'tish uchun, shaxsiy ma'lumotlaringizni
kiritishingiz talab etiladi. Odatda, foydalanuvchi nomi, elektron pochta manzili va
yangi parol yaratish uchun so'raladi.
10

Tasdiqlash: Siz ro'yxatdan o'tkazgandan so'ng, Figma sizga ro'yxatga
olishingizni tasdiqlash uchun tasdiqlash havolasi yuboradi. Bu havolani eslab,
elektron pochta manzilingizga kirib, ro'yxatga olishni tasdiqlang.
Dasturni o'rnatish: Elektron pochta manzilingizni tasdiqlashdan so'ng, siz
Figma dasturini o'rnatish uchun tasdiqlash havolasiga qaytishingiz mumkin. Bu
havola yordamida siz Windows, macOS yoki Linux operatsion tizimiga mos
dasturni yuklab olishingiz mumkin.
Dasturni ishga tushirish: Dasturni yuklab olinganidan so'ng, uning o'rnatilishi
uchun odatiy jarayonlarni bajarib, dasturni oching va o'zi uchun kerakli ta'rifi
bajarishingiz mumkin.
Kirish: Dasturni o'rnatish va ro'yxatdan o'tkazish jarayonidan so'ng, siz Figma
dasturiga kirishingiz mumkin. Bu uchun foydalanuvchi nomi va parolingizni
kiriting va tizimga kirishingiz mumkin.
Umid qilamanki, ushbu qadam-qadamlar sizga Figma dasturini o'rnatish va
ro'yxatdan o'tkazishda yordam beradi. Agar qandaydir qo'rqinchlar yoki boshqa
savollar bo'lsa, menga murojaat qilishingiz mumkin.
1.2 Figma Dasturida UI/UX Dizaynning o'rganish
Figma, onlayn ma'lumotlarni amalga oshirish, jamoa ishtirokchilarining
hamkorligida interfeys va foydalanuvchi tajribasini yaratish va boshqarish uchun
keng qamrovli vosita sifatida mashhur. UI/UX dizaynning o'rganishda Figma
foydalanuvchilarga o'zingizning dizayn va prototip qilish ko'nikmalarini
rivojlantirish va ularga qo'llanish imkonini beradi. Ushbu platforma sizga
o'zingizning dizaynningizni yaratish va boshqa muhandislarning hamkorligida
ishlashga imkoniyat beradi.
UI/UX dizaynning o'rganish uchun quyidagi bosqichlarni o'tishni maslahat
beraman:
11

1. Figma bilan tanishish: Figma interfeysini va asosiy funksiyalarini
o'rganing. Prototiplarni yaratish, dizayn qilish, tahrirlash va boshqalar bilan
hamkorlik qilishning qanday o'rnini o'z ichiga olgan.
2. Video darsliklar va onlayn resurslar: YouTube, Udemy, va Skillshare kabi
onlayn ta'lim platformalarida Figma haqida darsliklar va kurslar mavjud. Bu
kurslardan foydalanib, Figma asoslarini va murakkab funksiyalarini o'rganishingiz
mumkin.
3. Figma jamoasi va jamlanishlar: Figma jamoasi, Telegram yoki Discord
kabi platformalarda mavjud. Bu jamoalarga qo'shilish va ularda savollaringizni
so'rang. Boshqa muhandislar bilan fikr almashingiz va ularning amaliy
tajribalaridan foydalanishingiz foydali bo'ladi.
4. Amaliy mashg'ulotlar va loyihalar: Figma-da amaliy mashg'ulotlar
o'rganing va prototiplarni yaratishda ishtirok eting. Boshlang'ich savollar orqali o'z
sayohatingizni boshlang' va natijalarni ko'rish uchun dasturda ustunliklarni
ko'rishga harakat qiling.
5. Boshqa dizayn dasturlariga o'rgangan bilimlaringizni o'rganing: Figma
UI/UX dizaynning asosiy qadamlarini o'rganish bilan birga, boshqa dasturlarni
ham o'rganing. Misol uchun, Adobe XD, Sketch, InVision, va Axure RP kabi
dasturlar.
6. Tajribalarni ulashing va mustaqil loyihalar yaratish: O'zingizning dizayn
loyihalaringizni boshlang'. Bu sizning tajribalaringizni jamlash uchun ahamiyatli
bo'ladi va sizga Figma-ni boshqa odamlarga o'rgatishga yordam beradi.
7. So'zlash va takliflar: Boshqa dizaynerlar bilan o'z tajribalaringizni,
qiyinchiliklaringizni va nashrlaringizni baham ko'ring. Ularning maslahatlarini va
takliflarini qabul qiling va o'zingizni rivojlantirish uchun ularni qabul qiling.
UI/UX dizaynni o'rganish bir payt talabchi va samarali jarayon bo'lib, davom
etish uchun sabr va mehnat talab qiladi. Figma bu yo'lning bir qadamida, lekin
amaliy amalga oshirish va boshqa muhandislar bilan ishlash jarayonida o'rganishni
oshirishni ta'minlash uchun qulay vosita sifatida xizmat qiladi.
12

UI (Foydalanuvchi Interfeysi) va UX (Foydalanuvchi Tajribasi)
konseptsiyalari.
UI (Foydalanuvchi Interfeysi) va UX (Foydalanuvchi Tajribasi) dizayni, IT
sohasida keng qamrovli bo'lgan iki mohiyatdir. Ularning har biri dastur yoki veb-
saytni foydalanuvchilar uchun eng yaxshi tajribani ta'minlash maqsadida
mo'ljallangan.
1. Foydalanuvchi Interfeysi (UI): Foydalanuvchi Interfeysi (UI), dastur yoki
veb-saytni ishlatish jarayonida foydalanuvchilarning interfeys orqali
muvaffaqiyatli ravishda amalga oshirishlarini ta'minlaydi. UI dizayni asosan
quyidagi elementlarni o'z ichiga oladi:
- Grafik dizayn: Ranglar, shriftlar, logotiplar, va boshqa vizual elementlar
orqali foydalanuvchiga yoqimli va qulay ko'rinish beradi.
- Tugmalar va oynalar: Foydalanuvchi interfeysi yordamida amalga
oshiriladigan har qanday harakatlar uchun tugmalar, oynalar va interfeys
elementlari kiritiladi.
- Navigatsiya: Saytni yoki dasturni istalgan qismiga o'z o'rnida boshqa
oynalarga o'tish imkonini ta'minlaydi.
- Yorliqlar va yorliqni yaxshilash: Foydalanuvchiga kerakli ma'lumotni
qidirish va aniqlash uchun yorliqlar va yorliqni yaxshilash tizimi ko'rsatiladi.
2. Foydalanuvchi Tajribasi (UX):
Foydalanuvchi Tajribasi (UX), foydalanuvchilarning dastur yoki veb-saytni
ishlatish jarayonida o'zgartirishsiz, aniq va qulay tajribani ta'minlash uchun tasaruf
etadi. UX dizayni quyidagi asosiy konseptlarga ega:
- Foydalanuvchi yo'qotishi analizi: Foydalanuvchilarning sayt yoki dastur
bilan ishlash jarayonida qayerda muammo tug'ilishi mumkinligini aniqlash va unga
rioya qilish.
- Navigatsiya tizimi: Saytni yoki dasturni istalgan qismiga oson o'tish va
kerakli ma'lumotlarga tezroq yetish imkonini ta'minlaydigan qulay navigatsiya
tizimi.
13

- Foydalanuvchi sinovlari: Foydalanuvchilar bilan sinovlar o'tkazib, ularning
saytni yoki dasturni qanday foydalanishlarini tushunish va yangilash uchun
tajribalarni to'g'ri ko'rish.
- Ma'lumotlar dizayni: Ma'lumotlarni to'g'ri joylashtirish va foydalanuvchiga
kerakli ma'lumotlarni aniq va sodda shaklda taqdim etish.
Barcha ulug'lashmoqda, UI va UX dizayni bir-birini qo'llab-quvvatlaydi. UI
dizayni foydalanuvchi interfeysini qulay va ko'proq ko'rinadigan qilish uchun
huquqiy elementlarni integratsiya qiladi, UX dizayni esa foydalanuvchilar uchun
qulay va oson tajribani ta'minlaydi. Yaxshi UI/UX dizayni, foydalanuvchilarning
dastur yoki veb-saytni iste'mol qilishda qoniqarli va sodda tajribani ta'minlashga
yordam beradi.
1.3 Asosiy interfeyslarini tushunish va o’rganish
Figma dasturining asosiy interfeyslarini tushunish va o'rganish quyidagi
qismlardan iborat:
1. Menyu paneli: Bu panel yuqoridagi ekranning chap tomonida joylashgan
bo'ladi va oddiy menyu elementlarini o'z ichiga oladi, masalan, "File", "Edit",
"View", "Insert", "Prototype", va "Help" kabi. Bu menyuda, yangi loyiha yaratish,
faylni yuklash, yoki sozlamalarni o'zgartirish kabi amallar uchun kerakli bo'lgan
funktsiyalar mavjud.
2. Obyektlar paneli: Bu panel o'rtada joylashgan va sizning loyihangizda
ishlatishingiz mumkin bo'lgan barcha obyektlarni, shakllarni, ranglarni, shriftlarni
va ikonlarni o'z ichiga oladi. Bu obyektlar paneli sizga loyiha jarayonida
o'zgarishlarni tezroq amalga oshirish imkonini beradi.
3. Alatlar paneli: Bu panel, sahna ustida joylashgan va sizning tanlangan
obyektga qarab o'zgartirishlarni amalga oshirish uchun mo'ljallangan. Bu panelda,
misol uchun, chizish vositalari, geometrik shakllar, tekst qo'llanmalar, ranglar, va
stil o'zgartirishlarini amalga oshirish uchun turli alatlar mavjud.
4. Sahna: Sahna, asosiy ish qilingan joydir va sizning dizayningizni ko'rsatadi.
Siz bu sahnada obyektlarni yaratish, ulashish, va tahrirlash imkoniyatiga ega
bo'lasiz.
14

5. Slaydlar paneli: Bu panel, sizning loyiha jarayoningizdagi har bir slaydning
ro'yxatini ko'rsatadi. Slaydlar o'zgarishlarni boshqarish uchun foydali bo'ladi va
prototiplash jarayonini osonlashtiradi.
6. Qo'llanma paneli: Bu panel Figma dasturida o'rganishni osonlashtirish
uchun qo'llanma va video yordamlarni taklif etadi. Bu yerda siz Figma dasturidagi
funktsiyalarni va uslublarni o'rganishingiz mumkin.
Asosiy interfeys elementlarini tushunish va ularni o'rganish, sizga Figma
dasturini o'rganishda yordam beradi. Bu qismlar bilan tanishish, dasturning qanday
ishlashini va qanday foydalanishini tushunishda sizga yordam bera oladi.
1.4 Komponentlar va stilga asoslangan komponentlar haqida tushuncha
Figma dasturining asosiy interfeysi va komponentlar bilan ishlash haqida
qisqa tushuncha quyidagicha:
Asosiy Interfeyslar:
1. Sahna: Sahna, dasturning asosiy ish joyi hisoblanadi. Bu joyda siz barcha
obyektlarni joylash va ularga tahrirlash imkoniyatiga ega bo'ladi.
2. Slaydlar: Slaydlar, dizayningizni organishda va o'rganishda qulaylik
qiladigan maydonlar hisoblanadi. Siz bir nechta slaydlarni yaratishingiz va ularga
o'zgarishlarni qo'llab-quvvatlashingiz mumkin.
3. Alatlar paneli: Alatlar paneli, qo'shimcha funksiyalar va vositalar bilan
to'la. Bu yerda qalinlik, ranglar, shakllar, tekst va boshqa dizayn asboblariga
kirishingiz mumkin.
4. Obyektlar paneli: Obyektlar panelida, yaratilgan obyektlar va komponentlar
ro'yxati joylashadi. Bu yerda siz yaratilgan elementlarni boshqarishingiz, ularga
o'zgarishlar kiritishingiz va ularni qayta ishlatishingiz mumkin.
5. Mijozlar paneli: Mijozlar panelida, jamoangiz a'zolari bilan o'zaro muloqot
qilishingiz, ishlar ustida birgalikda ishlash imkoniyatiga ega bo'ladi.
Komponentlar va Stilga Asoslangan Komponentlar:
1. Komponentlar: Komponentlar, dizayningizdagi qayta ishlatiladigan tarkibiy
elementlardir. Misol uchun, tugmalar, menu ikonlari, sahna yorlig'i va boshqalar.
Bu komponentlarni o'zgartirish, qo'shish va o'chirish qulay.
15

2. Stilga Asoslangan Komponentlar: Figma dasturida, siz komponentlarga stil
berishingiz mumkin. Bu, shu komponentlarning barcha o'lchamlarida qo'llanish
uchun qulay bo'ladi. Misol uchun, siz bir tugmani o'zgartirishda, barcha boshqa
tugmalar ham o'zgartiriladi.
Shu qadar, Figma dasturining asosiy interfeysi va komponentlar bilan ishlash
bo'yicha qisqa tushuncha. Ular sizga dizayn jarayonini osonlashtirish, qulaylik
qilish va ishni tezlashtirishga yordam beradi. Agar qo'rqinchlar yoki boshqa
savollar bo'lsa, menga murojaat qilishingizni so'rayman.
Figma, veb dizayn, UI/UX dizayn va prototiplash uchun keng tarqalgan
onlayn dastur. Bu platformada komponentlar va uslublarning o'rganilishi juda
muhimdir, chunki bu dizayn protsessining samaradorligini oshiradi va birinchi
tartibda kompaniyaning brendini yaxshi ko'rsatadi. Quyidagi bosqichlar sizga
Figma dasturida komponentlar va uslublarning qanday o'rganilishini ta'riflash
uchun yordam beradi:
 Komponentlar haqida tushuncha: Figma'da komponentlar, o'zgaruvchan
elementlar yaratishda yoki biror joyda ko'rsatilgan elementni doimiy saqlash uchun
ishlatiladi. Masalan, tugmalar, ikonalar, formalar, sarlavhalar kabi elementlar
komponentlar sifatida saqlanadi.
 Komponentlar yaratish: Yangi komponent yaratish uchun, kerakli
elementlarni tanlang va ularni tekshirib Figma panelining ustiga tarang. Elementni
tanlang va "Komponent qilish" (Convert to Component) tugmasini bosing. Bu,
komponentni yaratadi va uni uslubga o'zgartirishingizga imkon beradi.
 Komponentlar bilan ishlash: Komponentlar o'zgaruvchan va
takrorlanuvchi elementlar bo'lib, ularni bir necha joyda qo'llash imkoniyatini
beradi. Misol uchun, bir tugmani o'zgartirganingizda, barcha boshqa tugmalarning
ham avtomatik ravishda o'zgarishi mumkin.
 Uslublarni qo'llash: Uslublar, komponentlar va dizaynning boshqa
qismlariga qo'llash uchun ishlatiladi. Buning uchun, belgilangan elementni tanlang
va uni istalgan uslub bilan o'zgartirish uchun "Uslub"ni (Style) tanlang.
16

Figma dasturida komponentlar va uslublarni o'rganish, dizayn protsessini
samaraliroq qiladi va tuzatish vaqtni kamaytiradi. Bu qadamlarni amalga oshirish
orqali, dizayn yoki interfeysning yaxshi ko'rinishini olishga yordam beradigan
samarali va tartiblangan usulni rivojlantirasiz.
Stilga asoslangan komponentlar va ularni yaratish
Stilga asoslangan komponentlar Figma dasturida dizayn protsessini
samaraliroq qilish uchun muhim vosita. Bu komponentlar, global o'zgartirishlarni
amalga oshirish va dizaynning tutgan samarali ko'rinishini ta'minlashga yordam
beradi. Quyidagi bosqichlar stilga asoslangan komponentlarni Figma dasturida
qanday yaratishni ta'riflaydi:
1. Stilni belgilash: Avval, dizayningiz uchun kerakli uslublarni belgilang.
Uslublar panelida (Styles panel) yaratish uchun, panelning ustida joylashgan
qo'shish tugmasini bosing va kerakli uslublar (masalan, matn uslublari, ranglar,
qalinliklar va bordyurlar)ni tanlang va belgilang.
2. Komponent yaratish: Keyin, dizayningizda ishlatishni rejalashtirgan
komponentlarni yaratishni boshlang. Masalan, agar siz tugma komponentini
yaratmoqchi bo'lsangiz, tugma elementini tanlang va "Komponent qilish" (Convert
to Component) tugmasini bosing.
3. Komponentga uslub qo'shish: Komponentni yaratgandan so'ng, uni kerakli
uslublar bilan o'rnating. Komponentni tanlang va "Uslub" (Style) panelining ustida
joylashgan "Stilni qo'llash" (Apply Style) tugmasini bosing. Bu, komponentga
belgilangan uslubni qo'llaydi.
4. Komponentning yangi uslublarni qo'llash uchun o'zgartirishlarni amalga
oshirish: Agar siz bir komponentni o'zgartirganingizda, misol uchun, uning rangini
yoki matnini o'zgartirgan bo'lsangiz, komponentni o'zgartirish to'g'risida sizga
so'rov beriladi. Siz "Hammasini yangilash" (Update All) yoki "Faqat bu
o'zgarishni" (Only this change)ni tanlashingiz mumkin.
5. Komponentning qayta ishlatilishi: Komponentni o'zgartirgandan so'ng, siz
barcha joyda bu komponentni ishlatishingiz mumkin. Buning uchun, komponentni
17

sahifangizga olib, ushbu komponentlarni taqdim etgan joylarda kerakli joyda
qo'llang.
Bu jarayon Figma dasturida global o'zgartirishlarni amalga oshirish va
dizayning tutgan ko'rinishini ta'minlashda juda samarali bo'ladi. Uslublar va
komponentlar orqali, siz dizayningizni yanada tartiblangan va muvaffaqiyatli
qilishingiz mumkin.
18

II BOB. Figma dasturida dizayn jarayonlari
Figma — bu veb-saytlar, ilovalar va boshqa dizayn mahsulotlarini online
rejimda tayyorlash uchun ixtisoslashgan grafik muharrir. U 2016 yilda Sketch va
Adobe XD’ning analogi sifatida ishga tushirilgan hamda tez fursat ichida grafik
dizaynerlar o’rtasida eng mashhur vositalardan biriga aylandi.
Bulutli fayllarni saqlash. Barcha Figma fayllari kompyuteringizda emas, balki
cloud-bulutda saqlanadi. Shuning uchun, siz ularning xavfsizligi haqida
qayg’urmasangiz ham bo’ladi. Menga eng yoqadigan qismi: Figma’dagi barcha
o’zgarishlar avtomatik ravishda saqlanadi (auto saving).
Figma dasturida dizayn jarayonlari yaratish uchun quyidagi qadam-qadamlar
ishlatiladi:
1. Ma'lumotlar to'plami: Birinchi navbatda, siz dizayn qilish uchun kerakli
ma'lumotlarni to'plashingiz kerak bo'ladi. Bu ma'lumotlar tashkil etilgan tasvirlar,
tekstlar, matnlar, logotiplar, ranglar va boshqa dizayn elementlarini o'z ichiga
oladi.
2. Qurilish va konseptsiya: Ma'lumotlar to'plami olingandan so'ng, siz
dizaynning asosiy qurilish va konseptsiyasini yaratishga boshlashingiz kerak. Bu
jarayonda, siz foydalanuvchining tushunishini osonlashtirish uchun dizaynning
strukturasini va boshqa elementlarini aniqlayapsiz.
3. Mockup yoki wireframe yaratish: Keyingi qadam, siz asosiy dizaynning
mockupini yoki wireframe'ini yaratishni boshlaysiz. Bu sizga asosiy dizaynning
kontseptsiyasini ko'rib chiqishga yordam beradi va barcha kerakli elementlarni
joylashtirishga imkon beradi.
4. Obyektlarni joylashtirish va formatlash: Mockup yoki wireframe
yaratishdan so'ng, siz ma'lumotlarni joylashtirishingiz va obyektlarni kerakli shakl
va o'lchamlarga o'zgartirishingiz kerak bo'ladi. Bu jarayonda, siz elementlarni
joylashtirish, qo'shish, o'chirish va formatlash imkoniyatlariga ega bo'ladi.
5. Ranglarni va shriftlarni tanlash: Dizayn jarayoni davomida, siz kerakli
ranglar va shriftlar tanlashga kirishingiz mumkin. Bu sizning dizayningizga vizual
o'zgarishlar kiritishga imkon beradi va uning tushunilishini osonlashtiradi.
19

6. Taqdimot va natijalarni tekshirish: Dizayn jarayoni tugaganidan so'ng, siz
taqdimot yoki natijalarni yaratishga o'tasiz. Bu sizning dizayningizni boshqa
foydalanuvchilarga ko'rsatishga yoki natijalarni ko'rib chiqishga yordam beradi.
7. Tahrirlash va yangilash: Yuqoridagi bosqichlardan so'ng, siz dizayn
jarayonini tahrirlayapsiz va uni yangilashga davom etishingiz mumkin. Bu sizning
dizayningizni yaxshi ko'rinishga olib kelishga yordam beradi va uning
muvaffaqiyatini ta'minlashga yordam beradi.
Figma dasturida dizayn jarayonlarini o'tkazish oson va samarali bo'ladi.
Yuqorida keltirilgan qadam-qadamlar sizga dizayn qilish jarayonini
osonlashtirishga yordam beradi. Agar qo'rqinchlar yoki boshqa savollar bo'lsa,
menga murojaat qilishingiz mumkin.
2.1 Figma dasturidagi metodologiyasi
Figmaning xususiyatlari va afzalliklari haqida maqola yozish uchun tadqiqot
va tahlillarni o'tkazish uchun usullar va yondashuvlarning kombinatsiyasi
ishlatilgan. Bu usullarga quyidagilar kiradi:
Figma veb-saytini o'rganish: Figma va uning xususiyatlarini yaxshiroq
tushunish uchun rasmiy Figma veb-sayti o'rganildi. Veb-sayt asbobning turli xil
xususiyatlari va afzalliklari haqida batafsil ma'lumot berdi.
 Maqolalar va sharhlarni ko'rib chiqish: Figma veb-saytida mavjud bo'lgan
ma'lumotlarni to'ldirish uchun Figma haqidagi sharhlar va maqolalar o'rganildi.
Ushbu maqolalar Figmadan foydalangan dizaynerlarning tajribalari haqida
ma'lumot berdi va ushbu vosita haqida yanada kengroq nuqtai nazarni taqdim etdi.
 Foydalanuvchilarning fikr-mulohazalari bilan maslahatlashish: Figma
asbobni takomillashtirish bo'yicha fikr-mulohaza va takliflarni taqdim etadigan
katta foydalanuvchilar jamoasiga ega. Foydalanuvchi tajribasini yaxshiroq
tushunish va foydalanuvchilar tomonidan qadrlanadigan umumiy xususiyatlar va
imtiyozlarni aniqlash uchun foydalanuvchilarning fikr-mulohazalari bilan
maslahatlashildi.
 Keys tadqiqotlarini tahlil qilish: Case Studies Figmadan dizaynerlar va
dizayn guruhlari tomonidan qanday foydalanilganligining haqiqiy misollarini
20

taqdim etadi. Amaliy tadqiqotlarni tahlil qilish orqali Figma turli kontekstlarda
qanday ishlatilganligi haqida tushunchaga ega bo'lish va dizayn guruhlari uchun
foydali bo'lgan umumiy imtiyozlar va xususiyatlarni aniqlash mumkin edi.
Ushbu usullarning kombinatsiyasidan foydalangan holda, Figma xususiyatlari
va afzalliklari haqida keng qamrovli tushuncha ishlab chiqildi. Keyinchalik bu
ma'lumot Figma va uning imkoniyatlari haqida umumiy ma'lumot beruvchi
informatsion maqola yozish uchun sintez qilindi.
Natijalar:
Figma o'zining ilg'or xususiyatlari va hamkorlikdagi imkoniyatlari tufayli
dizaynerlar va dizayn guruhlari orasida mashhurlikka erishgan mashhur dizayn
vositasidir. Figmaning asosiy xususiyatlari va afzalliklaridan ba'zilari:
 Hamkorlikdagi dizayn: Figmaning eng muhim afzalliklaridan biri uning
birgalikdagi dizayn imkoniyatlaridir. Figma yordamida dizaynerlar real vaqt
rejimida birgalikda ishlashlari, dizaynlar ustida hamkorlik qilishlari va bir-birlariga
fikr va takliflar berishlari mumkin. Bu jamoalarga yanada samaraliroq va samarali
ishlash imkonini beradi, bu esa dizaynni tezroq takrorlash va dizayn natijalarini
yaxshilashga olib keladi.
 Veb-ga asoslangan dizayn: Figma veb-ga asoslangan dizayn vositasi
bo'lib, unga internetga ulangan istalgan joydan kirish mumkin. Bu dizaynerlarga
masofadan turib ishlashni yoki dunyoning turli burchaklarida joylashgan
hamkasblari bilan hamkorlik qilishni osonlashtiradi.
 Vektor tarmoqlari: Figma vektor tarmoqlari xususiyati dizaynerlarga tez
va oson murakkab vektor shakllari va rasmlarini yaratish imkonini beradi. Vektor
tarmoqlari xususiyati vektor shakllarini yaratishning yanada moslashuvchan va
intuitiv usulini taklif etadi, bu esa uni dizaynerlar orasida mashhur tanlovga
aylantiradi.
 Plaginlar va integratsiya: Figma boshqa dizayn vositalari va xizmatlari
bilan bir qator plaginlar va integratsiyalarni taklif qiladi. Ushbu integratsiyalar
dizaynerlarga dizayn ish oqimlarini soddalashtirish va aktivlarni turli xil vositalar
o'rtasida osongina o'tkazish imkonini beradi.
21

 Dizayn tizimlari: Figma dizayn tizimlari xususiyati dizaynerlarga dizayn
tizimlarini osongina yaratish va boshqarish imkonini beradi. Bu xususiyat barcha
dizayn elementlari bo'ylab izchillikni ta'minlaydi, yaxlit dizayn tajribasini
yaratishni osonlashtiradi.
 Avtomatik tartib: Figmaning avtomatik joylashtirish xususiyati
dizaynerlarga tez va oson javob beruvchi dizaynlarni yaratishga imkon beradi. Bu
xususiyat, ayniqsa, bir nechta qurilmalar yoki ekran o'lchamlari uchun dizayn
yaratishi kerak bo'lgan dizaynerlar uchun foydalidir.
Figma ilg'or xususiyatlar va hamkorlik imkoniyatlarini taklif qiluvchi kuchli
dizayn vositasi bo'lib, uni dizaynerlar va dizayn guruhlari orasida mashhur
tanlovga aylantiradi. Uning veb-ga asoslangan dizayn imkoniyatlari, vektor
tarmoqlari xususiyati, plaginlari va integratsiyalari, dizayn tizimlari va avtomatik
joylashtirish funksiyasi uni dizayn mutaxassislari uchun qimmatli vositaga
aylantiradigan asosiy xususiyatlardan faqat bir qismidir.
2.2 Dizayn jarayonining umumiy tushunchasi
Dizayn jarayoni umumiy tushunchasi, dizayn vazifasini bajarish uchun
muhim qadam-lar to'plami hisoblanadi. Bu jarayon odatda quyidagi bosqichlarni
o'z ichiga oladi:
Ma'lumotlar to'plami va tahlil: Bir dizayn vazifasini boshlash uchun, muayyan
maqsadlar va ma'lumotlar to'plami zarur. Bu ma'lumotlar dastur uchun bo'lgan
maqsadlar, doimiy o'zgarishlar va mijozlar to'g'risidagi ma'lumotlarni o'z ichiga
oladi.
Strategiya va konseptsiya: Ma'lumotlar to'plamini olishdan so'ng, dizayn
strategiyasi va konseptsiyasi belgilanadi. Bu qadamda, vazifa maqsadlariga
muvofiq dizaynning umumiy shakli va qarorlaridan iborat bo'lgan strategiya va
konseptsiya yaratiladi.
Tasavvurlash va qurilish: Strategiya va konseptsiyaga asoslangan holda,
dizaynning qurilishi va tarkibi belgilanadi. Bu qadamda, prototiplar, wireframe'lar
22

yoki mockup'lar yaratiladi, shuningdek dizaynning asosiy elementlari va interaktiv
funksiyalari belgilanadi.
Dizaynning yaratilishi: Tasavvur etilgan dizaynning amaliyotda yaratilishi va
o'zgarishlarni qabul qilishi uchun dizayn jarayoni boshlanadi. Bu qadamda, grafik
elementlar yaratiladi, ranglar va shriftlar tanlanadi va dizaynning umumiy
ko'rinishi belgilanadi.
Natijalarni tekshirish va tahrirlash: Dizaynning birinchi versiyasi yaratildiktan
so'ng, uni tekshirish va tahrirlash lozim. Bu qadamda, dizayn vazifasining muvofiq
bo'lgan natijalar tekshiriladi va zarur o'zgartirishlar kiritiladi.
Taqdimot va to'g'ri-hamkorlik: Dizaynning oxirgi versiyasi tayyorlashdan
so'ng, uni loyihalash yoki mijozlarga taqdim etish uchun tayyorlanadi. Bu
qadamda, dizayn vazifasini muvaffaqiyatli yechish uchun muvofiqliyat
ta'minlanadi va dastlabki maqsadlarga mos ravishda bajariladi.
Dizayn jarayoni, muayyan maqsadlar va ma'lumotlar to'plami asosida
strategiya va konseptsiyani belgilash, vazifani yaratish va uning natijalarini
tekshirish va tahrirlashni o'z ichiga oladi. Bu jarayon, dizayn vazifasini amaliyotda
bajarish uchun integrativ, muntazam va natijaga yo'naltirilgan bo'lishi kerak.
2.3 Krasovka yoki Nike kabi oddiy dizaynning konseptsiyasi
5-rasm. Figma dasturida krasovka yoki nike kabi oddiy dizayni
Oddiy dizaynning umumiy tushunchasi dasturini foydalanuvchiga maqbul va
qulay ekanligini aniqlash uchun kerakli ma'lumotlarni, funksiyalarni va dizaynning
23

boshqa tafsilotlarini o'z ichiga oladi. Bu, maqsadga yo'l qo'ymoqda va dizaynni
to'g'ri va samarali ravishda yaratish uchun muhimdir. Oddiy dizaynning umumiy
tushunchasi quyidagi nuqtalarga ega bo'ladi:
Kontseptsiya va Maqsad: Dizaynning boshlang'ich nuqtasi, konseptsiyasi va
maqsadi belgilanadi. Misol uchun, krasovka yoki Nike kabi oddiy dizayn, sportiv
modada keng qo'llaniladigan, oson yurish va qulaylikni kafolatlaydigan,
shuningdek zamonaviy va ko'rgazmali ko'rinishda bo'lishi mumkin.
Funksiyalar va Mo'jizalar: Dizaynning funksiyalari va mo'jizalari belgilanadi.
Bu, nima uchun dizayn qilinganligini va uni foydalanuvchilarga qanday foyda
keltirishi kutilishi mumkinligini aks ettiradi. Misol uchun, krasovka dizayni yaxshi
yurishni ta'minlaydigan ergonomik va o'zgacha tufayli dizaynlanishi mumkin.
Ranglar va Materiallar: Ranglar va materiallar dizaynning asosiy qismlarini
tashkil etadi. Misol uchun, sportiv modada ko'p qo'llaniladigan toqqa ranglar va
texnologik materiallar, krasovka yoki Nike kabi oddiy dizaynda muhim
ahamiyatga ega bo'ladi.
Uskunalarni va Usullarni O'zgartirish: Dizaynning ahamiyatli qismi uskunalar
va usullar hisoblanadi. Bu, foydalanuvchilar uchun qulaylik va samarali ishlovchi
texnologiyalarni qanday qo'llash haqida o'ylashni o'z ichiga oladi. Misol uchun,
krasovka yoki Nike dizayni sport bilan bog'liq muhim funksiyalarga ega bo'lishi
mumkin.
Boshqa Elementlar: Dizaynning boshqa elementlari ham belgilanishi
mumkin, masalan, logotip, branding elementlari, matnlar, grafikalar, va boshqa
detallar. Bu elementlar dizaynning barcha qismlarini birga tashkil etadi.
Oddiy dizaynning umumiy tushunchasi dizaynning maqsadi, foydalanuvchilar
uchun foydali bo'lishi, ergonomik va estetik ko'rinishi, rang va materiallari,
uskunalari va usullari o'z ichiga oladi. Bu tushuncha dizayn jarayonini
osonlashtirish, o'z vaqtingizda va resurslaringizda samarali ishlashga imkon beradi.
Yaratilgan dizaynning ko'zdan kechirilishi va tekshirishi
Yaratilgan dizayning ko'zdan kechirilishi va tekshirishi jarayonlari Figma
dasturida quyidagi bosqichlardan iborat bo'lishi mumkin:
24

1. Ko'zdan kechirish: Dizayning yaratilganligi haqida ko'rib chiqish uchun
quyidagi bosqichlarni o'tkazishingiz mumkin:
- Dizaynning umumiy ko'rinishini tekshirish: Siz dizayning umumiy
ko'rinishini tekshirish uchun barcha slaydlarni va ma'lumotlarni o'z ichiga olgan bir
umumiy sahna yaratasiz. Bu sahna sizning dizayningizning barcha qismlarini bir
yerga joylashtirib, umumiy ko'rinishini tushunishga yordam beradi.
- Tekshirish qatlamalari yaratish: Siz dizayning har bir qatlamasiga alohida
alohida tarkibiy qism joylashtirishingiz mumkin. Bu sizning dizayningizdagi har
bir qismini alohida tekshirish va tahrirlashga imkon beradi.
- Ma'lumotlar va funksiyalarni sinash: Siz dizayningizdagi ma'lumotlarni va
funksiyalarni sinashingiz mumkin. Bu sizning dizayningizning ishlashini va
maqsadlarini tekshirishga yordam beradi.
2. Tekshirish: Dizayning ko'zdan kechirilishi va tekshirilishi uchun quyidagi
bosqichlarni o'tkazishingiz mumkin:
- O'zgartirishlarni sinash: Siz yaratilgan dizayningizni barcha qurilmalarda
(masalan, telefon, planshet, kompyuter) ochishingiz, va uning davranishini
sinashingiz kerak. Bu sizning dizayningizning moslashtirishini va uning
foydalanuvchilar uchun qulayligini tekshirishga imkon beradi.
- Ma'lumotlarni sinash: Siz dizayningizda joylashgan ma'lumotlarni
sinashingiz mumkin. Bu ma'lumotlarning to'g'riligini, to'liqligini va ishlashini
tekshirishga yordam beradi.
Yuqorida keltirilgan bosqichlar sizning yaratilgan dizayningizni ko'zdan
kechirish va tekshirish jarayonini osonlashtirish uchun yordam beradi. Agar
qo'rqinchlar yoki boshqa savollar bo'lsa, menga murojaat qilishingiz mumkin.
III BOB: Figmada oddiy dizayn yaratish
25

Figma so'nggi yillarda dizaynerlar orasida mashhurlikka erishgan bulutga
asoslangan dizayn vositasidir. Ushbu adabiyotlarni ko'rib chiqishda biz Figmaning
xususiyatlari va afzalliklari haqida oldingi tadqiqotlar va yozuvlarni o'rganamiz.
Haqiqiy vaqtda hamkorlik Figmaning eng ko'p muhokama qilinadigan
xususiyatlaridan biridir. Tadqiqotlar shuni ko'rsatdiki, bu xususiyat dizayn
guruhlari o'rtasidagi hamkorlik va muloqotga sezilarli ta'sir ko'rsatadi. Nielsen
Norman Group tomonidan o'tkazilgan tadqiqotda ishtirokchilar Figmaning real
vaqt rejimida hamkorlik qilish xususiyati ularning birgalikda ishlash qobiliyatini
yaxshilagani va uchrashuvlar va elektron pochta xabarlariga bo'lgan ehtiyojni
kamaytirgani haqida xabar berishdi.
Figmaning vektor tarmog'i xususiyati dizayn hamjamiyatida ham keng
muhokama qilingan. Bu xususiyat dizaynerlarga murakkab shakllar va dizaynlarni
osonlik bilan yaratishga imkon beradi. Creative Bloq tomonidan Figma sharhida
vektor tarmoq xususiyati "har qanday ekran o'lchamiga moslasha oladigan sezgir
dizaynlarni" yaratish qobiliyati uchun maqtovga sazovor bo'ldi.
Prototiplash Figmaning yana bir muhim xususiyati bo'lib, dizaynerlar va
tadqiqotchilar e'tiborini tortdi. Journal of Usability Studies jurnalida chop etilgan
tadqiqot shuni ko'rsatdiki, Figma prototiplash xususiyati foydalanuvchilarni sinab
ko'rishni osonlashtirish va dizayn jarayonining boshida foydalanishga yaroqlilik
muammolarini aniqlashda samarali bo'lgan.
Figmaning dizayn tizimini boshqarish xususiyati ham tadqiqot va yozish
mavzusi bo'ldi. InVision tomonidan e'lon qilingan amaliy tadqiqotda dizayn
agentligi Figma dizayn tizimini boshqarish xususiyati ularga o'z dizaynlarida
izchillikni saqlashga va jamoa a'zolari o'rtasidagi hamkorlikni yaxshilashga
yordam berganligini xabar qildi.
Figmaning afzalliklari avvalgi tadqiqot va yozishda ham muhokama qilingan.
O'zaro platformalar mosligi Figmaning eng tez-tez tilga olingan afzalliklaridan
biridir. Bu xususiyat dizaynerlarga har qanday qurilma yoki operatsion tizimdan
dizaynlar ustida ishlash imkonini beradi, hamkorlik va mahsuldorlikni oshiradi.
26

TechCrunch tomonidan o'tkazilgan sharhda Figma "har qanday ish oqimiga
muammosiz integratsiyalash" qobiliyati uchun maqtovga sazovor bo'ldi.
O'lchovlilik - adabiyotda muhokama qilingan Figmaning yana bir afzalligi.
Figmaning bulutga asoslangan infratuzilmasi dizaynerlarga kerak bo'lganda
kattalashtirish yoki kamaytirish imkonini beradi va bu uni barcha o'lchamdagi
jamoalar uchun ideal vositaga aylantiradi. Forbes tomonidan o'tkazilgan sharhda
Figma "o'zgaruvchan loyiha talablariga moslasha oladigan moslashuvchan va
tezkor dizayn vositasi" sifatida tavsiflangan.
Xulosa qilib aytganda, Figma bo'yicha oldingi tadqiqotlar va yozuvlar uning
xususiyatlari, jumladan, real vaqtda hamkorlik, vektor tarmoqlari, prototiplash va
dizayn tizimini boshqarish muhimligini ta'kidladi. Figmaning afzalliklari,
jumladan, platformalararo muvofiqligi va kengaytirilishi ham keng muhokama
qilingan. Figmadan foydalanib, dizaynerlar o'zlarining ish jarayonlarini
soddalashtirishlari, hamkorlikni yaxshilashlari va yuqori sifatli dizaynlarni
yaratishlari mumkin.
Oddiy dizayn yaratish Figma dasturida quyidagi bosqichlardan iborat bo'lishi
mumkin:
 Ma'lumotlar to'plami: Birinchi qadam, dizayn qilish uchun kerakli
ma'lumotlarni to'plashdir. Bu ma'lumotlar dasturning konseptsiyasiga muvofiq
bo'lishi kerak.
 Konseptsiyani belgilash: Dizaynning konseptsiyasini belgilash juda
muhimdir. Bu, nima uchun dizayn qilayotganingiz va uni qaysi maqsadlar uchun
ishlatmoqchisizni aniqlashni o'z ichiga oladi.
 Mockup yoki wireframe yaratish: Keyingi qadam, siz asosiy dizaynning
mockupini yoki wireframe'ini yaratishni boshlaysiz. Bu sizga asosiy dizaynning
umumiy shaklini ko'rib chiqishga yordam beradi va barcha kerakli elementlarni
joylashtirishga imkon beradi.
 Obyektlarni joylashtirish va formatlash: Mockup yoki wireframe
yaratishdan so'ng, siz ma'lumotlarni joylashtirishingiz va obyektlarni kerakli shakl
27

va o'lchamlarga o'zgartirishingiz kerak bo'ladi. Bu jarayonda, siz elementlarni
joylashtirish, qo'shish, o'chirish va formatlash imkoniyatlariga ega bo'ladi.
 Ranglarni va shriftlarni tanlash: Dizayn jarayoni davomida, siz kerakli
ranglar va shriftlarni tanlashga kirishingiz mumkin. Bu sizning dizayningizga
vizual o'zgarishlar kiritishga imkon beradi va uning tushunilishini osonlashtiradi.
 Taqdimot va natijalarni tekshirish: Dizayn jarayonini tugaganidan so'ng, siz
taqdimot yoki natijalarni yaratishga o'tasiz. Bu sizning dizayningizni boshqa
foydalanuvchilarga ko'rsatishga yoki natijalarni ko'rib chiqishga yordam beradi.
 Tahrirlash va yangilash: Yuqoridagi bosqichlardan so'ng, siz dizayn
jarayonini tahrirlayapsiz va uni yangilashga davom etishingiz mumkin. Bu sizning
dizayningizni yaxshi ko'rinishga olib kelishga yordam beradi va uning
muvaffaqiyatini ta'minlashga yordam beradi.
Oddiy dizayn yaratish jarayoni Figma dasturida yoki boshqa dizayn
asboblarida o'tkazilishi mumkin. Bu bosqichlar sizga dizayn qilish jarayonini oson
va samarali qilishga yordam beradi. Agar qo'rqinchlar yoki boshqa savollar bo'lsa,
menga murojaat qilishingiz mumkin.
28

3.1 Asosiy slaydlar va ma’lumotlar joylashish
Asosiy slaydlar va ma'lumotlar joylashish Figma dasturida quyidagi
bosqichlardan iborat bo'lishi mumkin:
Slaydlar yaratish: Birinchi qadam, siz asosiy slaydlarni yaratishga
boshlashingiz kerak. Bu slaydlar sizning dizayningizdagi boshlang'ich, markaziy
sahna yoki o'zgaruvchan ma'lumotlar uchun xizmat qiladi.
Ma'lumotlar joylashish: Slaydlar yaratilgandan so'ng, siz ma'lumotlarni
joylashtirishingiz kerak bo'ladi. Bu ma'lumotlar dasturning tushunchasi, izohlar,
tasvirlar, matnlar, logotiplar va boshqa ma'lumotlardan iborat bo'lishi mumkin.
Elementlarni joylashtirish: Ma'lumotlar joylashtirilgandan so'ng, siz kerakli
barcha elementlarni slaydlarga joylashtirishingiz kerak bo'ladi. Bu elementlar
dizayningizni boshqarish uchun qulayliklar, ushbu elementlar misol uchun
tugmalar, menyular, rasmlar, grafikalar va boshqalar bo'lishi mumkin.
Formatlash: Elementlarni joylashtirishdan so'ng, siz ularni formatlash va
ularga shakl, rang va stil qo'shishingiz mumkin. Bu sizning dizayningizning o'ziga
xos tasavvurlariga ega bo'lish va uning ko'rinishini belgilashga imkon beradi.
Interaktivlik qo'shish: Agar kerak bo'lsa, siz elementlarga interaktivlik
qo'shishingiz mumkin. Misol uchun, tugmalar tugishlari, menyularni ochish,
rasmlarni aylantirish va boshqalar. Bu sizning dizayningizni foydalanuvchilarga
oson va yordamchi qilishga o'rnak beradi.
Natijalarni tekshirish: Siz dizayningizning natijalarini tekshirish va tasdiqlash
uchun barcha slaydlarni, ma'lumotlarni va elementlarni boshqarishga ega
bo'lishingiz mumkin. Bu sizning dizayningizning muvaffaqiyatini ta'minlash va
uning barcha qismlarini boshqarishga yordam beradi.
Figma dasturida asosiy slaydlar va ma'lumotlar joylashish oson va samarali
bo'lib, sizga dizayn jarayonini osonlashtirishga yordam beradi. Agar qo'rqinchlar
yoki boshqa savollar bo'lsa, menga murojaat qilishingiz mumkin.
29

3.2 Elementlar, ranglar va shriftlar bilan ishlash
Elementlar, ranglar va shriftlar bilan ishlash Figma dasturida quyidagi
bosqichlardan iborat bo'ladi:
1. Elementlarni joylashtirish: Birinchi navbatda, siz kerakli barcha
elementlarni slaydlarga joylashtirishingiz kerak bo'ladi. Bu elementlar sizning
dizayningizdagi obyektlar, matnlar, rasmlar va boshqa elementlardir.
2. Elementlarni tahrirlash: Elementlarni joylashtirgandan so'ng, siz ularni
tahrirlash va ularga shakl, o'lcham, rang va boshqa xususiyatlar qo'shishingiz
mumkin. Elementni tanlang va alatlar panelida kerakli o'zgartirishlarni bajaring.
3. Ranglarni tanlash va qo'shish: Elementlarni tahrirlash jarayonida, siz
ularning ranglarini o'zgartirishingiz mumkin. Bu sizning dizayningizning vizual
ko'rinishini belgilaydi. Elementni tanlang va alatlar panelida "Fill" qismini tanlang,
keyin kerakli rangni tanlang yoki ma'lum bir rang kodini kiriting.
4. Shriftlarni tanlash va qo'shish: Matn elementlarini tanlang va alatlar
panelida "Font" qismini tanlang. Shu yerdan kerakli shriftni tanlab, uning
o'lchamini, rangini va boshqa xususiyatlarini o'zgartirishingiz mumkin. Agar kerak
bo'lsa, sizning o'ziga xos shriftlarni yaratishingiz ham mumkin.
5. Stilga asoslangan komponentlar: Figma dasturida stilga asoslangan
komponentlar orqali, siz kerakli elementlarni yaratib, ularni boshqa joylarda qayta
ishlatishingiz mumkin. Bu komponentlar sizning dizayningizning birlashgan va
qayta ishlanadigan qismlarini tashkil etish uchun qulay bo'ladi.
Elementlar, ranglar va shriftlar bilan ishlash sizning dizayningizni
shakllantirishda va uning ko'rinishini belgilashda juda muhim bo'ladi. Figma
dasturi sizga bu jarayonlarni oson va samarali qilish imkonini beradi. Agar
qo'rqinchlar yoki boshqa savollar bo'lsa, menga murojaat qilishingiz mumkin.
30

3.3 Responsive dizayn prinsiplari va qo’llanilishi
Responsive dizayn, veb sahifalarni har qanday qurilmada (masalan,
kompyuter, planshet, smartfon) va har qanday o'lchamdagi ekranlarda to'g'ri
ko'rinishini ta'minlaydigan dizayn prinsiplari va usullardir. Figma dasturida
responsive dizayn prinsiplari va ularni qo'llash quyidagi bosqichlardan iborat
bo'ladi:
 O'lchamga moslayish: Dizaynningizni qurib, sahifalarni har qanday
o'lchamdagi ekranlarga moslashtirishga dikkat qaratishingiz kerak. Masalan, bosh
sahifaning joylashishi, matnning o'lchami, rasmlar va boshqa elementlarning
joylashishi ko'zdan kechirilmaydi.
 Grid systemdan foydalanish: Grid sistemalardan foydalanish, sahifani
ko'rsatishni moslashtirishda yordam beradi. Figma dasturida grid sistemalar
yaratish, elementlarni joylashtirishda va ularga qo'llashda osonlik va to'g'ri ko'rish
uchun juda foydali bo'ladi.
 Flexbox va CSS Griddan foydalanish: Elementlarni joylashtirish va ularga
responsive dizayn bermoqchi bo'lsangiz, Flexbox va CSS Grid kabi ara-joylashuv
usullaridan foydalanishingiz mumkin. Figma dasturida, siz bu usullarni qo'llay
olasiz va ularga moslashtirilgan dizaynlarni yaratishingiz mumkin.
 Media querylardan foydalanish: Media querylar, ekran o'lchamlari va
qurilmalari bo'yicha turli ko'rinishlarni belgilashga imkon beradi. Bu, biror sahifa
yoki komponentning responsive dizaynini belgilab berishda juda muhimdir. Figma
dasturida siz media querylardan foydalanib, har bir o'lcham va qurilma uchun
moslashtirilgan dizaynlarni yarata olasiz.
 Test qilish: Dizayningizni responsive bo'lib tekshirish uchun farkli
o'lchamdagi qurilmalarda test qilish juda muhimdir. Bu, kompyuter, planshet va
smartfonlarda sahifalarni ko'rish va ularning to'g'ri ishlashi haqida ko'proq
ma'lumot olishga yordam beradi.
Responsive dizayn prinsiplari va ularni Figma dasturida qo'llash, veb
sahifalarni har qanday qurilmada to'g'ri ko'rsatish va foydalanuvchilarga yaxshi
31

tajriba ta'minlashda juda muhimdir. Agar qo'rqinchlar yoki boshqa savollar bo'lsa,
menga murojaat qilishingiz mumkin.
Ma'lumotlar yig'ish: qo'llanma, rasmlar, va qo'llanma ma'lumotlarining
qidirilishi
Responsive dizayn prinsiplari va ma'lumot yig'ish haqida quyidagi
ma'lumotlar sizga yordam berishi mumkin:
Responsive dizayn prinsiplari:
Mobilga moslashtirish: Responsiv dizaynda, dizaynning mobil qurilmalarda
ham to'g'ri ko'rinishi va ishlashi kerak. Ushbu prinsip o'zida elementlarni
joylashtirish, matnni kichiklashtirish va qo'shimcha joyni bekor qilishni o'z ichiga
oladi.
Mediya sorabozlari: Responsiv dizaynda, mediya sorabozlari yordamida
ekran o'lchamlariga moslashtirilgan stilni belgilash mumkin. Bu, kichik ekranlar
uchun maxsus stil, katta ekranlar uchun esa boshqa stilni belgilaydi.
Flexbox va Grid: CSS Flexbox va Grid kattaliklari, elementlarni
joylashtirishda va koordinatsiyalashda qulayliklar yaratadi. Responsiv dizaynda
ulardan foydalanish juda maqbuldir.
Mediya vaqti: Mediya vaqtini o'zgaruvchan asoslash, elementlarni va
ma'lumotlarni ekran o'lchamlariga va qurilmalariga moslashtirishga yordam beradi.
Bu, dastlab mobil qurilmalarda yoki kichik ekranlarda kerakli ma'lumotlarni
yashirish uchun foydalaniladi.
Ma'lumot yig'ish:
Qo'llanma: Ma'lumot yig'ishda, qo'llanma o'z maqsadini bajarish uchun
kerakli ma'lumotlarni yig'ib olishning muhim qismlaridan biridir. Qo'llanma,
ma'lumotlarni yashirish, ularni tahrirlash, ularni ko'rish va boshqa amallarni
bajarishga yordam beradi.
Rasmlar: Ma'lumot yig'ishda, rasmlar juda muhim o'rin tutadi. Ular dastlabki
sahifalarda yoki qo'llanmada yashirilishi mumkin, keyin esa foydalanuvchining
tekshirishiga qarshi olish uchun katta o'lchamdagi rasmlar yuklanishi mumkin.
32

Qo'llanma ma'lumotlarining qidirilishi: Ma'lumot yig'ishda, qo'llanma
ma'lumotlarining qidirilishi ham muhimdir. Buning uchun ma'lumotlarni yaxshi
tuzish, qidiruv yordamchilari yaratish, ma'lumotlar indekslari yaratish kabi
jarayonlardan foydalanish mumkin.
Responsive dizayn prinsiplari va ma'lumot yig'ish, veb saytlarni mobil
qurilmalar uchun moslashtirish, foydalanuvchilar uchun yaxshi tajriba ta'minlash
va ma'lumotlarni oson topish va ishlatishga yordam beradi.
33

Xulosa
Xulosa qilib aytganda, Figma o'zining ilg'or xususiyatlari va hamkorlik
qobiliyatlari tufayli dizaynerlar va dizayn guruhlari orasida mashhurlikka erishgan
kuchli dizayn vositasidir. Uning vebga asoslangan dizayni, vektor tarmoqlari,
plaginlari va integratsiyalari, dizayn tizimlari va avtomatik joylashtirish xususiyati
uni dizayn mutaxassislari uchun qimmatli vositaga aylantiradigan asosiy
xususiyatlardan faqat bir qismidir.
Figmaning hamkorlikdagi dizayn imkoniyatlari, ayniqsa, turli joylarda
ishlaydigan uzoq guruhlar yoki dizaynerlar uchun foydali bo'ldi. Haqiqiy vaqtda
hamkorlik va fikrmulohaza va takliflarni taqdim etish qobiliyati yanada samarali
va samarali ish oqimlariga va di`zayn natijalarini yaxshilashga olib keldi.
Figmaning vektor tarmoqlari xususiyati dizaynerlarga noyob dizaynlar
yaratish va turli dizayn elementlari bilan tajriba o‘tkazishni osonlashtirdi, plaginlar
va integratsiya esa dizayn ish oqimlarini soddalashtirdi, bu esa dizaynerlarga o‘z
ishlarining ijodiy jihatlariga e’tibor qaratishni osonlashtirdi.
Bundan tashqari, Figma’ning dizayn tizimlari xususiyati barcha dizayn
elementlari bo‘yicha izchillikni ta’minlashga yordam berdi va avtomatik
joylashtirish xususiyati dizaynerlarga tez va oson javob beruvchi dizaynlarni
yaratish imkonini berdi.
Umuman olganda, Figmaning ilg'or xususiyatlari va hamkorlikdagi
imkoniyatlari uni dizayn bo'yicha mutaxassislar uchun qimmatli vositaga
aylantirdi. Kelgusi tadqiqotlar Figma ning dizayn ish oqimlari va natijalariga
ta'sirini, shuningdek, qo'shimcha funktsiyalar va integratsiya imkoniyatlarini
o'rganishi mumkin.
34

Foydalanilgan adabiyotlar va internet resurslari ro'yxati:
1. Figma veb-sayti: https://www.figma.com/
2. Adobe Photoshop CC Help, http://help.adobe.com, 2018
3. Rafael Concepcion, Adobe Photoshop CC and Lightroom CC for
4. Photographers, Second Edition, Classroom in a Book, 2019
5. Andrew Faulkner, Conrad Chaves, Adobe Photoshop CC, Classroom in
Book, 2019
6. Роберт Шаффлботэм, Photoshop CC для начинающих, Эксмо, 2017
7. Photoshop CC: Bringing the Impossible to Reality, 2nd Edition, Adobe
Press, 2017
8. John Evans, Katrin Straub, Adobe Photoshop Elements 2018 Classroom
in
9. Elaine Weinmann, Peter Lourekas, Photoshop CC: Visual QuickStart
10. Guide, Peachpit Press, 2015
11. Serge Ramelli, Dare Stevens, Photoshop for Photographers:
12. Figma blogi: https://www.figma.com/blog/  Smashing jurnalida Nik
Babichning "Figma sharhi: afzalliklari, kamchiliklari va alternativalari":
https://www.smashingmagazine.com/2020/09/figmareview-pros-cons-alternatives/
13. Ijodiy bozorda Justin Beyker tomonidan "Figmaning eskiz ustidagi
afzalliklari" https://creativemarket.com/blog/the-advantages-of-figma-over-sketch
14. Speckyboy-da Aleks Ivanovs tomonidan "Figmani dizayn loyihalaringiz
uchun ishlatishning afzalliklari va kamchiliklari":https://speckyboy.com/pros-
consfigma/
15. Veb-dizaynerlar omborida WDD xodimlari tomonidan "Figma nima
uchun g'alaba qozonadi: Vebga asoslangan dizayn vositalarining
afzalliklari":https://www.webdesignerdepot.com/2018/05/why-figma-wins-the-
benefitsof-web-based-design-tools/
16. "Figma vs Sketch vs Adobe XD: Qaysi dizayn vositasi yangi
boshlanuvchilar uchun yaxshiroq?" Tomas Laurinavicius tomonidan Adobe
35

blogida: https://theblog.adobe.com/figma-vs-sketch-vs-adobe-xd-which-design-
tool-is-best-forbeginners /
36

Kompyuter grafikasi va web dizayn fanidan tayorlangan - Figma dasturida oddiy dizayn yaratish (krasovka, nike)

Sotib olish