8pt to‘r: interfeysda oraliqlar tizimini qanday qurish kerak

8pt to‘r nima va u nima uchun kerak

8pt to‘r — interfeysdagi barcha oraliqlar, ichki maydonlar va elementlar o‘lchamlari 8 ga karrali bo‘lishi haqidagi kelishuv: 8, 16, 24, 32, 48, 64 va hokazo. Mayda detallar uchun yarim qadam — 4pt qo‘shiladi.

Nega o‘zingizni cheklash kerak:

• Vizual ritm. Masofalar takrorlanganda maket yig‘iq ko‘rinadi, hatto foydalanuvchi buning sababini tushuntira olmasa ham.
• Kamroq qarorlar. Dizayner 13, 14 va 15 piksel orasida tanlash o‘rniga qisqa shkaladan tanlaydi.
• Ishlab chiqishga oson topshirish. Shkala bir nechta tokenga aylanadi va kodda tasodifiy margin: 13px paydo bo‘lmaydi.
• Masshtablash. 8 soni 2 va 4 ga qoldiqsiz bo‘linadi, shuning uchun turli piksel zichligidagi ekranlarda qiymatlar butun qoladi.

Oraliqlar shkalasi qanday tuziladi

Amalda 8 ga karrali barcha sonlar emas, balki cheklangan qadamlar to‘plami ishlatiladi. Odatiy shkala namunasi:

Yaqinlik qoidasi: elementlar qanchalik bog‘liq bo‘lsa, ular orasidagi oraliq shunchalik kichik. Kartochka sarlavhasi qo‘shni kartochkaga emas, o‘z matniga yaqinroq turadi.

Padding, margin va qatorlar oralig‘i

• Padding (ichki maydonlar). Balandligi 48, yon tomonlarida 16 dan maydoni bor tugma — klassik misol. Balandlikni 8 ga karrali qiling, matnni markazlang.
• Margin va gap (tashqi oraliqlar). Elementlar orasidagi masofani ko‘z bilan tanlamang, shkaladan oling.
• Line height. Qatorlar oralig‘i ham 4 yoki 8 ga karrali bo‘lsin: 16px matn uchun 24px, 14px uchun 20px mos keladi. Shunda qatorlar bazaviy to‘rga tushadi va matn bloklari qo‘shni elementlar bilan tekislanadi.

Nega ba’zan 4pt kerak: mayda matn, beyjlar, 16–20px ikonkalar va zich jadvallar 8 qadamga sig‘maydi. Yarim qadam tizimni buzmasdan bunday holatlarni yopadi.

Figma’da qanday qo‘llash kerak

1. Nudge’ni sozlang. Figma sozlamalarida Shift bilan surish qadamini 8 ga teng qilish mumkin — obyektlar to‘r bo‘yicha harakatlanadi.
2. Layout grid qo‘shing. Freymdagi 8px kvadrat to‘r boshida yordam beradi, keyin uni yashirish mumkin.
3. Auto Layout’dan foydalaning. Padding va gap’ni faqat shkala qiymatlari bilan bering — komponentlar ritmni o‘zi saqlaydi.
4. O‘zgaruvchilar yarating. Figma Variables’da sonli qiymatlarga ega space kolleksiyasini yarating va ularni qo‘lda kiritish o‘rniga maydon va oraliqlarga bog‘lang.
5. Komponentlarni tekshiring. Tugmalar, kiritish maydonlari va jadval qatorlarining balandligi ham 4 yoki 8 ga karrali bo‘lishi kerak.

Tizimni dasturchilarga qanday topshirish kerak

Oraliqlar shkalasi — bu dizayn-tokenlar. Ularni bir marta tavsiflab, hamma joyda ishlatish qulay:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

.card {
  padding: var(--space-3);
  gap: var(--space-2);
}

Jamoa bilan nimani kelishib olish muhim:

• Figma’da va kodda bir xil token nomlari.
• Birliklar. Kodda ko‘pincha rem ishlatiladi, bazaviy o‘lcham 16px bo‘lsa, 8px = 0.5rem.
• Ixtiyoriy qiymatlarni taqiqlash. Linter yoki code review shkaladan tashqari oraliqlarni ushlashga yordam beradi.

Ko‘p uchraydigan xatolar

• Juda uzun shkala. Qadamlar yigirmata bo‘lsa, tizim tanlovni soddalashtirmay qo‘yadi.
• To‘r faqat oraliqlar uchun. Elementlar balandligi va line height tasodifiy bo‘lsa, ritm baribir buziladi.
• Shriftni har qanday narxda to‘rga moslash. Shrift o‘lchami 8 ga karrali bo‘lishi shart emas — qatorlar oralig‘ini karrali qilish kifoya.
• Qoidasiz istisnolar. Optik tuzatishlar normal holat, lekin ularni ko‘paytirmasdan qayd etib borish kerak.