Amaliy ish-2 Figma bilan veb-dizayn

Qatlamlar paneli - bu erda barcha yaratilgan ob'ektlar ro'yxati saqlanadi. Bundan tashqari, bu erda biz ularni qanday tartibda ko'rsatishni aniqlaymiz (bu haqda keyinroq). Qatlamlar panelidan siz ish joyidagi kabi ob'ektlarni tanlashingiz mumkin. Bu ob'ektni tahrirlash yoki xususiyatlarini o'zgartirish uchun uni tanlashning yana bir usuli.

Dizayn yaratish uchun harakatlar ketma-ketligi:

1. Asbobni tanlang - asboblar panelida;

2. Asbobdan foydalaning - ish joyida. Masalan, to'rtburchak yoki yozuv qo'shing;

3. Biz allaqachon mavjud ob'ektni tanlaymiz - ish maydoni yoki qatlamlar paneli yordamida;

4. Tanlanganni o'zgartirish - xususiyatlar paneli yordamida (joylashuvni, o'lchamni, rangni o'zgartirish) yoki asosiy menyuning kontekst buyrug'i yordamida (nusxa olish);

5. Ob'ektlarni chizish ketma-ketligini o'zgartirish - qatlamlar paneli yordamida;

To'rtburchak chizish
To'rtburchak (Rectangle) – juda tez-tez ishlatiladigan ibtidoiy. U nafaqat to'rtburchaklar, kvadratlar, balki doiralarni chizish uchun ishlatilishi mumkin. Chizish uchun biz quyidagi ketma-ketlikni bajaramiz:
1. To'rtburchak(Rectangle) asbobini tanlang - asboblar panelidagi to'rtburchak belgisini bosing. Yoki klaviaturangizdagi R tugmasini bosing. Tugma ko'k rangda ta'kidlangan bo'lishi kerak;
2. Boshlanish nuqtasini o'rnating - buning uchun to'rtburchakning "boshini" o'rnatish uchun ish joyining istalgan joyida sichqonchaning chap tugmachasini bosing va ushlab turing. Sichqonchaning chap tugmachasini qo'yib yubormang;
3. O'lchamlarni o'rnating - chap tugmani bosib sichqonchani istalgan yo'nalishda harakatlantiring - to'rtburchak paydo bo'la boshlaydi;
4. Yakuniy nuqtani belgilang - endi rasmning o'lchamini o'rnatish uchun sichqonchaning chap tugmasini qo'yib yuboring. Tayyor!
U amalda shunday ko'rinadi:

To'rtburchak chizilgan vaqtida va chizilgandan keyin siz uning ko'k hoshiyaga ega ekanligini sezasiz - bu ob'ekt tanlanganligini bildiradi. Bu chegaralovchi quti deb ataladi (cheklovchi qutini o'qing), bu chegaralovchi quti degan ma'noni anglatadi. Uning ostida ob'ektning piksellardagi o'lchami - biz ular haqida oldingi darsda gaplashdik.
O'ng tarafdagi xususiyatlar paneli darhol tanlangan to'rtburchakga moslashtirildi. Quyidagi variantlar paydo bo'ldi:
• X – ob’ektning X o‘qi bo‘yicha holati (gorizontal). Koordinatalarning kelib chiqishi yuqori chap nuqtadan o'tadi (endi biz to'rtburchakni siljitamiz va siz hamma narsani tushunasiz);
• Y – ob’ektning Y o‘qi bo‘yicha holati (vertikal);
• W – ob’ektning kengligi (o‘qish chaqiruvi) yoki kengligi;
• H – balandligi (balandligi o'qiladi) yoki ob'ektning balandligi.
Bu xususiyatlarning barchasi piksellarda ko'rsatilgan. Ulardan birini o'zgartirish uchun ustiga bosing va klaviaturadan yangi raqamni kiriting, so'ng Enter tugmasini bosing. Ob'ekt darhol javob beradi.
Chapdagi qatlamlar panelida to'rtburchak belgisi bo'lgan "To'rtburchak 1" qatori mavjud. Primitiv yaratilganda, u uchun avtomatik ravishda yangi qatlam yaratiladi. U grafik muharrirga shakllarni qanday tartibda chizish kerakligini aytish uchun xizmat qiladi. Bu hech qanday ma'noga ega bo'lmasa-da, lekin juda ko'p ob'ektlar mavjud bo'lganda, men qatlamlarning foydaliligini misol bilan ko'rsataman.
Yana ikkita to'rtburchakni o'zingiz chizing. E'tibor bering, har safar to'rtburchaklar vositasini yana tanlash kerak, chunki u foydalanishdan keyin qayta tiklanadi. Bundan tashqari, har bir yangi shakldan keyin qatlamlar panelida yangi chiziq paydo bo'ladi.
Ob'ektlarni tanlash, ko'chirish va hajmini o'zgartirish
Avval ko'chirish(move) vositasi tanlanganligiga ishonch hosil qiling, ya'ni ko'chirish. Belgi kursorga o'xshaydi va asosiy menyu tugmachasining o'ng tomonida joylashgan. Tez qo‘ng‘iroq qilish uchun V tugmasini bosishingiz mumkin.Keyingi:
• Ob'ektni tanlash uchun ish joyida uning ustiga bosish kifoya. Chap paneldagi qatlam nomini ham bosishingiz mumkin. Har bir tanlov bilan xususiyatlar paneli va qatlamlar paneli yangilanadi. Tanlovni olib tashlash uchun ish maydonining bo'sh joyini yoki qatlamlar panelini bosing;
• Tanlangan obyektning burchaklarida o‘lchamini o‘zgartirish uchun ishlatilishi mumkin bo‘lgan oq kvadratchalar mavjud. Buning uchun kursorni kvadrat ustiga olib boring, sichqonchaning chap tugmachasini bosib ushlab turing va uni siljiting. Yangi o'lchamni qo'llash uchun sichqonchaning chap tugmasini qo'yib yuboring;
• Ob'ektni siljitish uchun kursorni uning ustiga qo'ying, sichqonchaning chap tugmachasini bosib ushlab turing va uni qo'yib yubormasdan sichqonchani harakatlantiring. Ushbu nuqtada ob'ekt ajratib ko'rsatiladi va chap tugmani qo'yib yubormaguningizcha sichqonchani kuzatib boradi.
Biz to'rtburchaklar ustida mashq qilamiz:


Ko‘chirish va o‘lchamini o‘zgartirish jarayonida xususiyatlar panelidagi mos variantlar o‘zgaradi. Ammo bu shakllar bilan o'zaro ta'sir qilishning eng oddiy usullari. Yana bir nechta aniq bo'lmagan fokuslar mavjud, ammo ular bilan ishlash ancha samarali:
• Harakat qilishdan oldin Shift tugmasini bosib tursangiz, sichqonchaning chap tugmachasini bosib turganingizdan so‘ng kursorni qayerga siljitishingizga qarab ob’ekt qat’iy vertikal yoki gorizontal harakatlanadi;
• Ob'ekt o'lchamini faqat balandligi yoki faqat kengligini o'zgartirish uchun burchakdan ko'ra uning yuzlaridan birini sudrab o'zgartirishingiz mumkin;
• Proportionlarni saqlash uchun ob'ekt o'lchamini o'zgartirish vaqtida Shift tugmasini bosib turing. Bunday holda, tomonlar nisbati saqlanib qoladi va kvadrat, masalan, kvadrat bo'lib qoladi;
• Klaviaturadagi o‘q tugmalari yordamida figuraning o‘rnini nozik sozlang. Bir marta bosish tanlangan ob'ektni mos keladigan yo'nalishda bir pikselga siljitadi. Qadamni 10 pikselgacha oshirish uchun o'qni bosish paytida Shift tugmachasini bosib ushlab turish kerak. Doimiy harakatlanish uchun o'qlarni chimchilashingiz ham mumkin.
Boshqa fokuslar ham bor, ammo hozircha bu qulay ish uchun etarli bo'ladi. Ob'ektlarni boshqarishning yangi usullarini sinab ko'ring:

Navigatsiya
Siz ish joyida ko'rgan bo'shliq uning faqat kichik bir qismidir. Tasavvur qiling, videokamera ulkan tuvalga qaratilgan. Siz faqat ob'ektiv nimaga qaratilganligini kuzatishingiz mumkin. Albatta, siz qulay pozitsiyani tanlashingiz va hatto tafsilotlarni ko'rish uchun yaqinlashishingiz mumkin; yoki butun dizaynni qadrlash uchun orqaga qadam qo'ying. Keling, loyiha orqali oson navigatsiya qilish uchun yangi fokuslar bilan tanishaylik:
• Kamerani siljitish uchun sichqonchaning chap tugmachasini bosib ushlab turganda bo‘sh joyni ushlab turing va kursorni kerakli yo‘nalishda harakatlantiring. Sahnadagi ob'ektlar yangi kamera pozitsiyasiga ko'ra harakatlana boshlaydi. Ko'rib turganingizdek, atrofda juda ko'p bo'sh joy bor. Ushbu manipulyatsiya paytida kursor qo'lning tasvirini oladi va bu uning boshqa rejimda ekanligini ko'rsatadi. Kamera o'xshashligi o'rniga, siz shu tarzda biz shakllar chizilgan tuvalni siljitishimizni ham tasavvur qilishingiz mumkin;
• Kamera shkalasining joriy qiymati yuqori o'ng burchakda ko'rsatilgan. Shunday qilib, masalan, 100%, biz hammamiz 1 dan 1 gacha, ya'ni to'liq hajmda ko'rishimizni anglatadi. 200% hamma narsa ikki baravar ko'payganligini anglatadi. 25% - hamma narsa to'rt barobar. Kattalashtirish uchun + (ortiqcha) tugmasini bosing. Kichraytirish uchun - (minus) tugmasini bosing. Sichqonchani aylantirish g'ildiragidan foydalanish yanada qulayroq. Agar sizda Windows bo'lsa, kamerani kattalashtirish/kichraytirish uchun uni burang. MacOS-da siz hali ham Buyruq tugmasini bosib turishingiz kerak;
• Masshtabni 100% ga tezda qayta tiklash uchun Shift + 0 tugmalar birikmasini bosing. Agar siz avval chapdagi panelda qatlamni ustiga bosish orqali tanlasangiz, belgilangan kombinatsiya kamerani tarkib markazda bo‘ladigan tarzda harakatlantiradi. ish maydonidan. Bu siz izlayotgan ob'ektni ko'zdan qochirsangiz va unga e'tibor qaratmoqchi bo'lsangiz foydali bo'ladi;
Ob'ekt xususiyatlarini sozlash
Va endi eng qiziqarli. To'rtburchakni tanlang va xususiyatlar paneliga e'tibor bering. Ushbu variantlarning aksariyati barcha turdagi ob'ektlar uchun mavjud. Keling, u erda nimani va qanday sozlashni batafsil ko'rib chiqaylik.

• Joylashuv va o‘lcham — maydonni bosgandan so‘ng yuqoriga/pastga o‘q tugmalari yordamida uning qiymatini bir martalik bosqichlarda oshirish/kamaytirish mumkin. Qadamni 10 ga oshirish uchun Shift tugmasini bosib turing. Shuni ham ta'kidlash joizki, bu sohalarda oddiy arifmetik amallar ishlaydi. Masalan, joriy qiymatga +8 yozib, Enter tugmasini bosib raqam qo'shishingiz mumkin. Ayirish, ko'paytirish va bo'lish operatsiyalari ham qo'llab-quvvatlanadi. Keyingi xususiyatga tezda o'tish uchun Tab tugmasini bosishingiz mumkin. Avvalgisiga o'tish uchun Shift + Tab tugmalarini bosing;
• Fix proportions – xususiyat maydonlari orqali kenglik yoki balandlikni o‘zgartirganda proporsiyalarni saqlash imkonini beradi;
• Burilish burchagi – obyektni ixtiyoriy burchak bilan aylantirish imkonini beradi;
• Burchakni yaxlitlash – barcha burchaklar uchun yaxlitlash radiusini o'rnatish;
• To‘ldirish rangi — to‘rtburchak rangini o‘rnating. Bosish orqali oyna paydo bo'ladi, undan so'ng siz mos rang va uning to'yinganligini tanlashingiz kerak. Keyin, o'zgarishlarni saqlash uchun oynaning yuqori o'ng burchagidagi yoki oynadan tashqaridagi istalgan joydagi xochni bosing;
• Qator qo‘shish - Shaklning konturiga zarba effektini qo‘shing. Faollashtirishdan so'ng yangi sozlamalar paydo bo'ladi;
• Chiziq rangi – bosgandan so'ng, to'ldirish rangi bilan bir xil oyna paydo bo'ladi;
• Qator qalinligi - chiziq qalinligini ko'rsating;
Rang tanlash oynasi
Uning rangi, to'yinganligi va hatto shaffofligini juda moslashuvchan tarzda sozlash imkonini beradi. Bundan tashqari, har bir rang o'zining aniq qiymatiga ega, uni nusxalash va boshqa ob'ektning to'ldirish yoki chiziq rangiga joylashtirish mumkin.
Buning uchun rang qiymati bo'lgan maydonni bosing, uni tanlang, sichqonchaning o'ng tugmachasini bosing va Nusxa olish (nusxalash) ni tanlang. Keyinchalik, biz ko'chirilgan rangni qo'llamoqchi bo'lgan ob'ektni tanlang, uning to'ldirish rangi yoki chiziq rangi maydonini bosing, butun qiymatni tanlang, sichqonchaning o'ng tugmasini bosing, Qo'shish (qo'shish) ni tanlang va bosing. MacOslar uchun Command + C, Command + V va Windows uchun Ctrl + C, Ctrl + V tugmalaridan foydalanish ancha tezroq.

Matn qo'shish
Birinchidan, asboblar panelidan Matn asbobini tanlang. Uning belgisi bosh T harfiga o'xshaydi. Yoki T tugmasidan foydalaning. Keyin quyidagi harakatlar ketma-ketligini bajaring:
• Matn blokining chegaralarini o'rnatish - bu to'rtburchak yaratish bilan bir xil tarzda amalga oshiriladi. Ushbu chegaralar, agar kenglik etarli bo'lmasa, matn avtomatik ravishda yangi qatorga qaerga o'ralishini ko'rsatadi. Bundan tashqari, ular matn mos keladigan ramkalarni o'rnatadilar;
• Matn kiritish - matn blokining chegaralarini yaratgandan so'ng, miltillovchi karet, aslida, matn kiritish vaqti kelganligini ko'rsatadi. Matnimizni saqlash uchun Escape tugmasini bosing;
• Matn ko'rinishini o'zgartirish - endi biz shrift, rang, o'lcham, vertikal va gorizontal tekislashni o'rnatishimiz mumkin. Alignment matnni qaysi chetiga (chapga, o'ngga, markazga) joylashtirishni belgilash imkonini beradi. Bu variantlarning barchasi xususiyatlar panelida joylashgan. Matn bloki tanlanganligiga ishonch hosil qiling.

Chiziq va o'qni chizish
Yaratish jarayoni ham to'rtburchakga juda o'xshaydi va biz allaqachon barcha muhim xususiyatlarni ko'rib chiqdik. Asbobni tanlash uchun Chiziq (chiziq) yoki Ok (strelka), avval to'rtburchaklar belgisi yonidagi o'qni bosishingiz kerak, so'ngra ochiladigan menyudan kerakli asbobni tanlang. Tez faollashtirish uchun tezkor tugmalar ham mavjud: Line - L, Arrow - Shift + L. Videoni tomosha qiling va o'zingiz sinab ko'ring:

Bitta foydali hiyla bor. Chiziq yoki o'qni yaratishda Shift tugmachasini bosib ushlab tursangiz, rasm 45 gradusga ko'payadigan burchak ostida chiziladi.
Nima uchun qatlamlar kerak?
Qatlamlar tushunchasi aniq bo'lishi uchun men haqiqiy dunyo bilan o'xshashlik chizaman. Tasavvur qiling, sizda bir nechta A4 fayl bor. Ofis qog'ozi kiritilgan bir xil shaffof fayllar. Shunday qilib, ushbu fayllarning har biriga biz rangli kartondan (doira, to'rtburchaklar va boshqalar) kesilgan bitta raqamni joylashtiramiz. Shaffof fayllarda bir nechta shakllarni oldik. Endi ularni jildga joylashtiring va barcha fayllarni bir tomonga aylantiring. Endi siz ba'zi shakllar boshqalar bilan bir-biriga mos kelishini ko'rishingiz mumkin. Ushbu o'xshashlikda papka qatlam paneli, fayl qatlam va shakl qatlam ichidagi primitivdir. Keling, nima uchun bizga Figma-da qatlamlar kerakligini bilib olaylik:
• Ob'ektlarni tartibga solish va guruhlash - keyingi darslarda biz primitivlar bilan bir nechta qatlamlarni bitta qatlamga yig'ish imkonini beruvchi guruhlar va ramkalar yaratishni o'rganamiz. Qatlamlarning nomini o'zgartirish mumkin, bu ularni mazmunli tarzda birlashtirishga imkon beradi (masalan, tugmalar, ro'yxatlar, oynalar, ekranlar va boshqalar). Bundan tashqari, guruhlar va ramkalar butun ierarxiyalarni yaratib, bir-birining ichiga joylashtirilishi mumkin. Bu xususiyatlarning barchasi sizga juda katta loyihalar bilan tez va qulay ishlash imkonini beradi. Haqiqiy dunyo bilan o'xshashlikni davom ettirib, shaffof faylga bir nechta karton shakllarini kiritish mumkinligini tasavvur qiling;
• Ob'ektni tanlash va unga e'tibor qaratish imkoniyatini ta'minlash - bundan tashqari, qatlamlar panelida nom bo'yicha qidiruv mavjud;
• Chizish ketma-ketligini aniqlang - bir xil nomdagi panel qatlamlari yuqoridan pastgacha ro'yxatda birin-ketin joylashtirilgan. Eng yuqori qatlam har doim birinchi bo'lib, eng pastki qatlam esa har doim oxirgi chiziladi. Vaziyat fayllar bilan bir xil, yuqori fayllardagi raqamlar pastki raqamlar bilan bir-biriga mos keladi.
Foydali buyruqlar
• Oxirgi harakatlarni bekor qilish - ba'zida siz beparvolik bilan biror narsa qilishingiz mumkin va bir necha harakatlar uchun vaqtni orqaga qaytarishingiz kerak bo'ladi. Buning uchun MacO'larda Buyruq + Z yoki Windows'da Ctrl + Z tugmalarini bosing. Biz kerakli holatga qaytgunimizcha bir necha marta bajarishingiz mumkin;
• Ob'ektning dublikatini yaratish - kerakli ob'ektni tanlang va MacO'larda Buyruq + D yoki Windowsda Ctrl + D tugmalarini bosing. Nusxa asl nusxa bilan bir joyda paydo bo'ladi va tanlanadi. Siz darhol u bilan ishlashni boshlashingiz mumkin, masalan, o'qlar bilan harakatlantiring, bu juda qulay;
• Ob'ektni o'chirish — kerakli ob'ektni tanlang va Delete tugmasini bosing. U darhol ish joyidan va qatlamlar panelidan yo'qoladi;
• Bir vaqtning o'zida bir nechta ob'ektlarni tanlash - sichqonchaning chap tugmachasini bosib ushlab turing va kursni istalgan yo'nalishda torting, shunda paydo bo'lgan ramkaga bir nechta ob'ektlar tushadi. Keyin sichqonchaning chap tugmachasini qo'yib yuboring va bir nechta tanlangan ob'ektlarga ega bo'ling. Endi ular bilan nima qilish mumkin? Siz bitta ob'ekt sifatida ko'chishingiz yoki hajmini o'zgartirishingiz mumkin. Agar ob'ektlar bir xil turdagi bo'lsa, siz bir vaqtning o'zida barcha xususiyatlarni o'zgartirishingiz mumkin.
Ramkalar. Guruhlar bilan taqqoslash
Boshqa dasturlardagi ramkalar artboardlar deb ataladi. Ammo Figma o'z yo'lidan bordi va o'ziga xos nom bilan chiqdi. Va yaxshi sabablarga ko'ra, ramkalar artboardlarga qaraganda ko'proq kuch va moslashuvchanlikka ega, masalan, Sketch-da bitta artboardni boshqasiga joylashtirish mumkin emas.
Frame ingliz tilidan ramka, ramka, skelet deb tarjima qilingan. Soddalashtirish uchun ramkalarni rassomning tuvali yoki ish maydoni bilan taqqoslash mumkin. Odatda ramka (artboard) ma'lum o'lchamdagi bitta sahifaning dizaynini o'z ichiga oladi. Misol uchun, dizayner noutbuk, planshet va smartfon ekrani uchun bir xil sahifa bilan bir nechta ramkalarni yonma-yon joylashtirishi mumkin.
Guruhlar sizga primitivlarni birlashtirish va ramka ichida mantiqiy birliklar yaratish imkonini beradi, bu esa loyiha bilan ishlashni ancha osonlashtiradi. Ramkalar guruhlarga o'xshaydi, lekin bir qator o'ziga xos xususiyatlarga ega:
• Ramkaning o'lchami bor va uni rang bilan to'ldirish mumkin. Guruhlarda o'lcham ichidagi barcha ob'ektlarning o'lchamiga qarab avtomatik ravishda o'rnatiladi. Bu farq chekkalari bo'ylab to'ldirilgan tasvirlarni eksport qilish imkonini beradi, bu piktogrammalarni saqlashda foydalidir. Kadrlar sozlamalarida siz barcha turdagi qurilmalar ekranlaridan (mashhur smartfonlar, aqlli soatlar va planshetlar) va hatto Instagram hikoyasi yoki Facebook postigacha bo'lgan o'lchamli shablonlarning katta ro'yxatini topishingiz mumkin;
• Har bir kadrning o'z koordinata tizimi mavjud. Ichkaridagi ob'ektlarning koordinatalari ramka chegarasining yuqori chap chetiga nisbatan bo'ladi;
• Kadr o'z ramkasidan tashqariga chiqadigan tarkibni kesishga qodir. Ya'ni, "Klip kontenti" opsiyasi yoqilgan bo'lsa, ramkadan tashqaridagi hamma narsa yashirin bo'ladi. Bu xususiyat niqob deb ataladi;
• Kadr to'r, vertikal va gorizontal ustunlar kabi tartib belgilarini ko'rsatishi va uning ichiga yo'riqnomalarni kiritishi mumkin. Bu vositalar tartib obyektlarini toʻgʻri joylashtirish va tekislash uchun moʻljallangan;
• Kadr o‘lchamini o‘zgartirishda siz obyektlar qanday harakat qilishini belgilashingiz mumkin. Misol uchun, tugma ekranning yuqori qismiga yopishib olishi va kengligi bo'ylab cho'zilishi mumkin. Bu xususiyat cheklovlar deb ataladi.
Endi biz ushbu funktsiyalarning har birini qanday ishlatishni ko'rib chiqamiz va o'rganamiz.
Ramka yaratish. O'lchamni o'zgartiring va to'ldiring
Ramka yaratish jarayoni to'rtburchakdan farq qilmaydi, faqat panjara tasviri bo'lgan asbobni tanlash yoki F tugmasini bosish kerak. Keyin ish joyining chap tugmachasini bosib ushlab turing va sichqonchani torting. O'lchamlarni o'rnatish uchun sichqonchaning chap tugmasini qo'yib yuboring.
O'ng panelda, xuddi to'rtburchak kabi, fonni to'ldirish rangi allaqachon o'rnatiladi (To'ldirish bo'limi). Chetni sudrab yoki W (kenglik) va H (balandlik) maydonlarida aniq o'lchamni o'rnatish orqali ramkaning o'lchamini eski usulda o'zgartirishingiz mumkin. Ammo endi bizda xususiyatlar panelining yuqori chap burchagida o'lcham shablonlari bilan yangi ochiladigan menyu mavjud - Frame. Qanday shablonlarni ko'ring va ulardan kamida bir nechtasini qo'llashga harakat qiling.

Ob'ektlarni ramka ichiga qanday qo'yish kerak
Bir nechta oson usullar mavjud:
• Kadrlar chegaralari ichidagi barcha ob'ektlarni tanlang va torting;
• Kerakli ob'ektlarni tanlang, kesib oling (macO'larda Buyruq + X yoki Windowsda Ctrl + X) va ramkani tanlagandan so'ng (macO'larda Buyruq + V yoki Windowsda Ctrl + V) joylashtiring.
Ushbu manipulyatsiyalardan so'ng, ob'ektlar qatlamlar panelida ko'rinadigan ramka ichida bo'ladi, chunki kiritilgan ob'ektlar ofset bilan ko'rsatiladi (guruhlardagi kabi). Kadr ichidagi ob'ektni tanlashga harakat qiling, X va Y koordinatalarining qiymatiga e'tibor bering - ular o'zgardi, chunki endi ramkaning yuqori chap burchagi yangi kelib chiqishi.
To‘r qo‘shish
Ramkalar ob'ektlarni tekislash va joylashtirishni osonlashtirish uchun moslashuvchan tarzda sozlanishi mumkin bo'lgan yordamchi panjaralarni ko'rsatishga imkon beradi. Buning uchun:
1. Ramkani tanlang;
2. Layout Grid bo'limining qarshisidagi ortiqcha belgisini + bosing - standart qizil rang sozlamalariga ega bo'lgan panjara 10 pikselli bosqichlarda ko'rsatiladi;
3. To'rni o'rnatish uchun Grid yorlig'ining (10px) chap tomonidagi belgini bosing. Ochiladigan oynada biz panjara qadamini (Hajmi), chiziq rangini (Rang) va shaffoflikni o'rnatishimiz mumkin;
4. To'rni vaqtincha yashirish yoki o'ngdagi mos ravishda ko'z yoki minus belgisini bosish orqali olib tashlash mumkin;
5. Agar kerak bo'lsa, bir ramka ichiga turli rangdagi bir nechta panjara qo'shishingiz mumkin.
6. Barcha ramkalardagi panjaralarni vaqtincha yashirish uchun Ctrl + G tugmalarini bosing. Ularni yana ko'rsatish uchun tugmalar birikmasini takrorlang.

Ustunlar va qatorlar qo'shish
Vertikal ustunlar veb-sahifa dizaynida juda keng qo'llaniladi. Ularni o'rnatish panjaraga qaraganda biroz murakkabroq:
1. Ramkani tanlang;
2. Layout Grid bo'limining qarshisidagi + ortiqcha belgisini bosing - bir xil standart panjara ko'rsatiladi;
3. Grid (10px) yozuvining chap tomonidagi belgini bosing. Ochilgan oynada yuqori chap burchakdagi Grid-ni bosing;
4. Ochiladigan menyuda Ustunlar-ni tanlang. Shundan so'ng, rang va shaffoflikdan tashqari, bir qator yangi parametrlar paydo bo'ladi:
• Count – ustunlar soni;
• Type – ustun qurilish turi. Variantlardan birini tanlashingiz mumkin: Chap - ustunlar chap chetida, O'ngda - o'ng chetida, Markazda - markazda tekislangan, Stretch - ramkaning butun kengligi bo'ylab cho'zilgan;
• Width – pikseldagi ustun kengligi. Agar ustun turi Stretch ga o'rnatilgan bo'lsa, bu parametr avtomatik ravishda hisoblanadi;
• Offset – agar ustun turi Chapga o‘rnatilgan bo‘lsa, chapga siljish. O'ng ustun turi uchun bu mos ravishda o'ngdagi chekinishdir. Stretch turi uchun bu har ikki tomonning to'ldirishidir. Ushbu parametr Markaziy ustun turi uchun avtomatik ravishda hisoblanadi;
• Gutter - ustunlar orasidagi masofa.
Keling, ishlab chiquvchilar veb-sahifalarni joylashtirishda tez-tez foydalanadigan Bootstrap ramkasidan bitta mashhur tarmoqni o'rnatamiz. Buning uchun bizga kengligi 1440 piksel va balandligi 900 piksel bo'lgan ramka kerak, bu odatiy noutbuk ekranining o'lchamidir. To'rning o'zi 1140 piksel kengligida va 12 ustundan iborat. Har bir ustun kengligi 65px va bir-biridan 30px.

Qo'llanmalar va hukmdor
Barcha turdagi panjaralar dizaynerning ishini sezilarli darajada osonlashtiradi, ammo undan ham foydali vosita - qo'llanmalar mavjud. Bu dizayner har qanday joyga joylashtirishi mumkin bo'lgan vertikal yoki gorizontal chiziq. Bunday chiziqlar ko'p bo'lishi mumkin va siz faqat qo'llanmalar yordamida har qanday panjarani qayta yaratishingiz mumkin. Ob'ektlar ushbu chiziqlarga, shuningdek, to'rlarga yopishadi. Qo'llanma yaratish uchun:
1. Agar ramka ichida chiziq kerak bo'lsa, ramkani tanlang;
2. Shift + R tugmalar birikmasi yordamida o'lchagichni yoqing. U ish joyining chetlari bo'ylab yuqorida va chapda ko'rinadi va tanlangan ob'ektlar chegaralarini piksellarda ko'rsatadi. E'tibor bering, yo'riqnomalar faqat o'lchagich yoqilgan holda ko'rsatiladi;
3. Gorizontal yoki vertikal yo'riqnoma yaratish uchun yuqori yoki chap o'lchagich ichidagi sichqonchaning chap tugmasini bosing va ushlab turing;
4. Kursorni ekranning markaziga torting. Hukmdor chegarasidan tashqariga chiqishingiz bilan ish joyida yo'riqnoma paydo bo'ladi. Uni kerakli nuqtaga torting;
5. Yo'riqnoma o'rnini tuzatish uchun sichqonchaning chap tugmachasini bo'shating;
Yo‘lboshchining o‘rnini o‘zgartirish uchun uni yangi joyga torting.
Qo'llanmani olib tashlash uchun ustiga bosish orqali uni tanlang. Tanlangan chiziq ko'k rangga aylanadi. Keyin klaviaturadagi "O'chirish" tugmasini bosing. Shuningdek, siz yo'riqnomani o'lchagich maydoniga sudrab o'tishingiz mumkin va u ham o'chiriladi.
Barcha qo'llanmalarni vaqtincha yashirish uchun Shift + R tugmalari yordamida o'lchagichni yashiring.

Komponentlar.
Komponentlar - tez-tez ishlatiladigan interfeys elementlarini yaratish uchun ramkalardan yaratilgan maxsus turdagi ob'ektlar. Bu murakkab tuyuladi, lekin mohiyatiga ko'ra, komponentlar yordamida ular tugmalar, ochiladigan menyular, navigatsiya va boshqalar uchun shablonlarni yaratadilar. Kelajakda har safar, masalan, tugmachani chizmaslik uchun siz tugma komponentini nusxa ko'chirasiz, kerakli o'lcham va rangni o'rnatasiz, matnni o'zgartirasiz - ish tugadi! Figma terminologiyasida bunday komponentlar to'plami komponentlar kutubxonalari deb ataladi. Va dizaynerlar ularni UI Kit deb atashadi (yuai to'plamini o'qing).
Nima uchun narsalarni shunchalik murakkablashtiramiz? Aslida, komponentlar o'nlab soatlik ishni tejashga qodir. Vaziyatni tasavvur qiling: sizda 50 ta veb-ilova ekranlari mavjud. Ularning har birida tugmalar mavjud. To'satdan siz "barcha tugmalar" tahririni olasiz. Agar dizayn komponentlar yordamida yaratilgan bo'lsa, unda siz faqat asosiy komponentni (tugma shablonini) o'zgartirishingiz kerak, qolgan barcha o'zgarishlar avtomatik ravishda amalga oshiriladi. Agar hamma narsa komponentlarsiz bajarilgan bo'lsa, unda siz har bir tugmani qo'lda o'zgartirishingiz kerak bo'ladi.
Bu erda komponentlarning kuchi yotadi. Va cheklovlar (cheklovlar) bu erda asosiy rollardan birini o'ynaydi.
Komponentlarning foydaliligini tushunish uchun quyidagi misolga qarang. Yuqori qismida ota-komponent (shablon), pastki qismida esa uning xususiyatlarini meros qilib olgan uchta yordamchi komponent mavjud. Eng pastki qismida oddiy ramka asosida tayyorlangan tugma mavjud. Ota-ona komponentini o'zgartirib, biz barcha "bolalar" ni avtomatik ravishda o'zgartiramiz.


Ko'rib turganingizdek, pastki tugma tegilmaydi, chunki u komponent emas, balki faqat ramka. Umid qilamanki, siz allaqachon tarkibiy qismlar va ularning dizayner ishidagi foydaliligi haqida birinchi taassurotga egasiz.
Cheklovlar turlari
Keling, turli cheklovchi sozlamalari bilan ramkalar ichida bir nechta tugmachalarni yarataylik. Ulardan eng oddiyini ko'rib chiqing:

• 
  Vertikal to'xtash joylari:
  
• 
  Top - ob'ekt ramkaning yuqori chetiga yopishadi;
  
• 
  Center - ob'ekt ramka balandligi bo'yicha markazlashtirilgan;
  
• 
  Bottom - ob'ekt ramkaning pastki chetiga yopishadi.
  
• 
  Gorizontal to'xtash joylari:
  
• 
  Left - ob'ekt ramkaning chap chetiga yopishadi;
  
• 
  Center - ob'ekt ramkaning kengligi bo'ylab markazlashtirilgan;
  
• 
  Right - ob'ekt ramkaning o'ng chetiga yopishadi.
  

Yuqoridagi cheklovlarning barcha mumkin bo'lgan kombinatsiyalari bilan 9 ta ramka (tugma) yarating. Ramkalar ichidagi ob'ektlar o'lchamli bo'lganda qanday harakat qilishini ko'ring.


Cheklovchilarning yana bir qancha turlari mavjud:
• Left & Right – gorizontal cheklovchi turi. Ob'ektning chap qirrasini ramkaning chap tomoniga, o'ng chetini esa ramkaning o'ng tomoniga yopishtirishga olib keladi. Ob'ektni chap va o'ng tomonda qattiq chekinishlar bilan kenglikda cho'zish imkonini beradi;
• Top & Bottom - vertikal cheklovchi turi. Ob'ektning yuqori tomonini ramkaning yuqori tomoniga, pastki tomoni esa ramkaning pastki tomoniga yopishishiga olib keladi. Belgilangan yuqori va pastki chetlari bilan ob'ektni balandlikda cho'zish imkonini beradi;
• Scale - ob'ekt kengligi va/yoki balandligi bo'yicha ramkaga mutanosib ravishda cho'ziladi. Bunday holda, ramkaga chekinishlar o'rnatilmaydi, lekin ramkaning o'lchamiga mutanosib ravishda o'zgaradi.

Topshiriq.
1. Bitta saytni tanlang va ushbu darsdagi vositalar yordamida uning asosiy sahifasini chizing (birinchi ekran yetarli). Shu kabi (sayt bilan o’xshash) ranglarni, o'lchamlarni, blok nisbatlarini, shriftlarni tanlashga harakat qiling.
2. O‘rgangan vositalaringizdan foydalanib, pastdagi har bir qatordan bittadan belgi chizing;
3. Ro'yxatdagi cheklovchilarning barcha mumkin bo'lgan kombinatsiyalari bilan 9 ta tugma yarating: top, center, bottom, left, right. Har bir tugma alohida ramka ichida bo'lishi va kamida rang va matnni o'z ichiga olishi kerak;
4. Forma shaklini chizing. "Ism", "Elektron pochta", "Xabar" maydonlari va "Yuborish" tugmasi bo'lishi kerak. Uning kengligini o’zgartirilganida, maydonlar shakl bilan birga cho'zilishi kerak. Maslahat: left va right cheklash foydali bo'ladi. Forma shakli uchun alohida ramka yarating.