Figma’da sayt dizayni: maketlar bilan ishlash va ularni dasturlashga topshirish

Figma brauzerda ishlaydi va havola orqali ulashiladi, shuning uchun u sayt dizayni uchun amaldagi standartga aylangan. Lekin vositaning o‘zi sifat bermaydi: muhimi — faylni qanday tashkil qilish va dasturchiga qanday topshirish.

Fayl tuzilmasi

Bitta faylda yuzlab ekranlar tartibsiz yotsa, kerakli versiyani topish qiyin. Qulay tartib:

• Cover — loyiha nomi va holati
• Dizayn tizimi — ranglar, shriftlar, tugmalar, formalar, ikonkalar
• Sahifalar — har bir sahifa alohida freymda, desktop va mobil yonma-yon
• Arxiv — eski variantlar, ular ish sahifalarini to‘ldirib yubormasin

Freymlarga tushunarli nom bering: «Bosh sahifa / mobil», «Katalog / filtr ochiq».

Komponentlar va variantlar

Tugma, kartochka, menyu kabi takrorlanuvchi elementlar komponent sifatida yasaladi. Komponent o‘zgarsa, u barcha sahifalarda yangilanadi. Variantlar orqali bitta komponentning holatlari saqlanadi: oddiy, kursor ustida, bosilgan, faol emas, xato. Dasturchi uchun bu tayyor ro‘yxat — qaysi holatlarni kodda yozish kerakligi ko‘rinib turadi.

Avtomaket (Auto layout)

Auto layout bilan qurilgan bloklar matn uzaysa yoki qisqarsa, o‘zi kengayadi. Bu dizaynni haqiqiy saytga yaqinlashtiradi: ichki bo‘shliqlar va elementlar orasidagi masofa qat’iy belgilanadi, dasturchi ularni o‘lchab o‘tirmaydi.

Stillar va o‘zgaruvchilar

Ranglar, shriftlar va soyalar stil yoki o‘zgaruvchi sifatida saqlansin. Keyin ular kodda ham xuddi shunday nomlar bilan qayta ishlatiladi. Har bir ekranda «deyarli bir xil» kulrangning beshta turi bo‘lsa, bu tizim emas, tartibsizlik.

Izohlar bilan ishlash

Figma’da izohni to‘g‘ridan-to‘g‘ri element ustiga qoldirish mumkin. Qoidalar:

1. Bitta izoh — bitta masala
2. Hal qilingan izohni yopish
3. Muhokama chatga emas, izoh ichida davom etadi
4. Yakuniy qarorni izohda yozib qo‘yish

Dasturchiga topshirish

• Tayyor ekranlar alohida belgilangan, qoralamalardan ajratilgan
• Ikonkalar va suratlar eksport uchun sozlangan
• Interaktivlik izohlangan: nima bosilganda nima ochiladi
• Mobil, planshet va keng ekran uchun xatti-harakat tushuntirilgan
• Holatlar chizilgan: yuklanmoqda, bo‘sh ro‘yxat, xato xabari

Dasturchi Dev Mode yoki ko‘rish rejimida o‘lchamlar va CSS qiymatlarini oladi, lekin mantiqni u faqat siz yozib qo‘ygan joydan biladi.

Prototip va muhokama

Figma’da ekranlarni bog‘lab, bosiladigan prototip yasash mumkin. Uni telefonda ochib, mijoz yo‘lini o‘tib chiqing: katalogdan mahsulotga, mahsulotdan formaga. Statik ekranlarda ko‘rinmaydigan muammolar — ortiqcha qadam, tugma yo‘qligi, orqaga qaytish imkoni yo‘qligi — prototipda darhol seziladi. Prototipni sotuv bo‘limiga ham ko‘rsating: mijozlar bilan ishlaydigan odamlar ko‘p narsani tez payqaydi.

Versiyalar

Muhim bosqichlarda versiyani nom bilan saqlang: «Dizayn tasdiqlandi», «Mobil tuzatishlar». Keyinchalik nima va qachon o‘zgarganini ko‘rish va kerak bo‘lsa orqaga qaytish oson bo‘ladi. Tasdiqlangan ekranlarga keyin kiritilgan o‘zgarishlarni dasturchiga alohida xabar qiling — u eski versiya bo‘yicha ishlayotgan bo‘lishi mumkin.

Huquq va kirish

Fayl kompaniya jamoasi hisobida bo‘lsin. Dizayner ketganda ham fayl qolishi kerak. Mijoz yoki tashqi hamkorga faqat ko‘rish huquqi bering.