Figma β bu 2016 yilda chiqarilgan UI/UX dizayn vositasi bo'lib, 2027 yilda dunyo bo'yicha eng mashhur dizayn platformasi hisoblanadi. U bulutga asoslangan (cloud-based) β barcha ish brauzerda. Bu Sketch va Adobe XD'dan farqli ravishda β ular desktop dasturlar. Cloud yondashuvi real-time kollaboratsiyaga imkon beradi va Figma'ning eng katta afzalligi shu. 2025 yilda Figma 4M+ aktiv foydalanuvchiga ega.
Nima uchun Figma mashhur
Birinchi sabab β bepul. Boshlash uchun hech qanday to'lov yo'q. Free planda 3 ta loyiha, kollaboratsiya, asosiy funksiyalar.
Ikkinchi sabab β brauzerda ishlash. Hech qanday yuklab olish yoki o'rnatish kerak emas. Har kompyuterda (Windows, Mac, Linux) ishlaydi.
Uchinchi sabab β real-time kollaboratsiya. Bir vaqtda bir necha kishi bir faylda ishlay oladi. Google Docs kabi, lekin dizayn uchun.
To'rtinchi sabab β Auto Layout. Komponentlar avtomatik kenglik moslashishi β responsive dizayn juda osonlashdi.
Beshinchi sabab β komponentlar va design system. Bir marta yaratilgan element minglab joyda qayta ishlatish.
Figma'da boshlash
figma.com'da ro'yxatdan o'tish. Email yoki Google account bilan. Bepul plan darrov ochiladi.
Birinchi loyiha yaratish: \"+\" tugma β \"New Design File\". Bo'sh canvas ochiladi.
Frame yaratish: F tugma bossang yoki sidebar'dan Frame. Standart o'lchamlar bor (Desktop 1440x1024, iPhone, Tablet).
Asosiy vositalar
V β Move (ko'chirish). F β Frame (ramka). R β Rectangle (to'rtburchak). O β Ellipse (doira). T β Text (matn). L β Line (chiziq). P β Pen (perΠΎ).
Bu vositalar β dizayn yaratish poydevor.
Layers va Groups
Photoshop kabi, Figma'da layers (qatlamlar) bor. Har element alohida qatlam. Group (Ctrl+G) β bir nechta elementni birga qo'shish.
Layers panel chap tomonda β barcha qatlamlar ko'rinadi. Drag bilan tartib o'zgartirish.
Components
Components β Figma'ning eng kuchli funksiyalaridan biri. Bir marta yaratilgan element shaklini boshqa joyda qayta ishlatish.
Misol: bir tugma yaratdingiz. Uni Component qiling (Ctrl+Alt+K). Endi har joyda shu tugmaning nusxasini ishlatish mumkin. Original'ni o'zgartirsangiz, barcha nusxalar avtomatik o'zgaradi.
Variants
Components'ning kengaytmasi. Bir component'ning turli holatlarini saqlash. Misol: tugma β default, hover, active, disabled holatlari.
Variant tanlash dizayn jarayonida tez navigatsiya beradi.
Auto Layout
Auto Layout β Figma'ning revolyutsion funksiyasi. Frame'ga Auto Layout berasiz va ichidagi elementlar avtomatik joylashadi.
Misol: button. Matn uzun bo'lsa, tugma kenglashadi. Matn qisqa bo'lsa, kichik bo'ladi. Padding, gap, alignment β bularning hammasini Auto Layout boshqaradi.
Constraints
Frame ichidagi element o'lcham o'zgarganda qanday harakat qilishi. Misol: header element \"top, left, right\" constraint bilan β frame kengligi o'zgarganda kengligi avtomatik moslashadi.
Prototype mode
Figma'ning ikkinchi qismi β Prototype. Sahifalar orasida click navigation, animatsiya, microinteractions.
Prototype tab β ikki frame ulanishi β click yoki hover trigger β animation. Bu interactive prototype yaratish uchun. Stakeholder'larga ko'rsatish va testlash mumkin.
Plugin'lar
Figma'ning katta ekosistemasi β plugin'lar. Yuzlab bepul va pulli plugin'lar.
Mashhur plugin'lar: Iconify (1000+ icon), Unsplash (bepul rasm), Content Reel (test content), Stark (accessibility checker), Figmotion (animation), Lottie Files (animation), Figma to Code (HTML/CSS export).
Design Systems
Katta loyihalarda design system yaratish. Bu komponentlar, ranglar, shriftlar, spacing va boshqa qoidalar to'plami.
Figma libraries orqali design system'ni boshqa loyihalarga eksport qilish. Konsistent dizayn ta'minlanadi.
Developer handoff
Dizayn tugagach β developer'larga topshirish. Figma'da Inspect mode β developer dizayn elementlarining aniq parametrlarini ko'radi: ranglar, shriftlar, o'lchamlar, code snippet (CSS, iOS, Android).
Bu \"manual measurement\" bosqichini olib tashlaydi. Vaqt va xato sezilarli kamayadi.
Figma vs Sketch vs Adobe XD
Figma: bepul, brauzerda, kollaboratsiya, cross-platform. Eng yaxshi yondashuv hozir.
Sketch: faqat Mac, desktop app, eski. Figma'gacha standart edi.
Adobe XD: Adobe ekosistemasida, lekin Figma'ga raqobat berolmadi. 2025'da Adobe XD'ni faollashtirish kamayotgan.
Figma narxlari
Free: 3 ta loyiha, asosiy funksiyalar. Yagona dizayner uchun yetadi.
Professional: $12-15/oy. Cheksiz loyihalar, libraries, version history.
Organization: $45/oy. Team libraries, design system, advanced permissions.
Enterprise: kelishuv bo'yicha.
Figma uchun resurslar
Figma rasmiy: figma.com/community β bepul shablon va resurslar. YouTube: \"Figma\", \"Mickey Owens\" (Figma instructor). Udemy va Coursera kurslari.
Sayt.uz va Figma
Sayt.uz UI/UX dizayni Figma'da yaratilgan. Asosiy sahifalar (bosh, hosting, domen, blog post), kabinet sahifalari, mobile versiyalar β barchasi Figma'da.
Design system yaratilgan: ranglar (brand ko'k, neutral), shriftlar (Inter), komponentlar (tugma, card, navigation), spacing system (8px grid).
Yangi sahifa yaratilganda β design system'dagi komponentlar qayta ishlatiladi. Konsistensiya va tezlik.
Developer handoff Figma Inspect orqali. Aniq ranglar, o'lchamlar, CSS code β developer'lar dizaynerlardan to'g'ridan-to'g'ri olishadi.