Компонентлар ҳақида
Битта кнопка(button)ни ўзгартирасиз - қолган ҳаммаси ўзгаради яхши а?)
Ҳозир биз дизайнерларнинг энг ёқтирган фигманинг асосий фишкаларидан бирини кўриб чиқамиз.
Агар сайтда ҳар бир кнопка(button)ни алоҳида чизадиган бўлсак, веб-дизайнернинг ҳаёти дўзахга айланарди. Шунга ўхшаш ҳолатларни олдини олиш учун фигмада компонентлар бор)
Компонент бу — элемент бўлиб, ушбу элементни нусхалари у билан биргаликда ўзгаради. Мисол учун, киритиш майдонлари (inputlar), статусли аватарлар ёки менюлар. Биринчи ҳосил қилинган компонентлар, асосий компонентлар(main component) деб юритилади. Унинг нусхалари эса - экземплярлар йоки (instance) деб айтилади.
Айтайлик биз битта асосий компонент ҳосил қилдик - қора квадрат. Кегин унинг икки нусахасини қўшдик.
Асосий компонентни — "онаси" деб олсак қолган икки нусхасини — қора квадранинг "болалари" бўлади.
Биринчисини қизил рангга бўясак. Қолган учтаси ҳам қизил рангга ўзгариб қолади — нусхалар(болалари) асосий компонент(онаси)нинг параметрларини ўзлаштириб, 1:1 нусхалаб олади.
Асосий компонент(онаси)дан мерос қилиб олган экземплярлар(болалари)ни "она" компонентдан ўзмасдан туриб тўғридан тўғри ўзгартириш мумкин. Мисол учун, иккинчи квадратни сирень рангида, учинчисини эса бироз чўзиб четига қора ранг беришимиз мумкин.
Болаларинг хусусиятларини тўғридан тўғри ўзгартиришимиз мумкин - ранги, шакли ва бошқа хусусиятларини ҳам.
Болалари хусусиятини ўзгартирганимиз сабабли "Она" компонентнинг бироз кичик қилиб ранги сариқ қилган тақдиримизда ҳам болаларинг ҳолати ўзгармай қолаверади. Бири сирень рангида иккинчиси чўзилган ва четлари қоралигича қолаверади. Чунки биз "болалари" учун алоҳида хусусиятлар бергандик юқорида.
Экземпляр(болалари) нинг олган хусусиятлари - сирень ранги ва тўғри тўртбурчак - катта приоритетга йоки устунликка эга бўлиб "онаси"дан оладиган параметрларга қараганда баландроқ туради.
Асосий компонент - бўлажак дизайн элементлари учун шаблон ҳисобланади. Мисол учун: кнопкамиз тўғри тўртбурчак шаклида, текст ва иконкаси бор. Унинг ўлчами ва ичидагилари экземплярга боғлиқ.
Компонентлар кутубхонаси ўзи нима?
Кутубхона — бу шундай файлки, унда проект учун керак бўладиган асосий компонентлар сақланади. У ҳам таййор дизайн файли каби бир хил. Агар лойиҳага стандарт элементлардан бирини қўшиш керак бўлса, дизайнер уни қайтадан чизиб ўтирмайди, шунчаки кутубхонадан олади.
Facebook иловасининг барча визуал элементларини ўз ичига олган Facebook iOS 11 UI Kit компонентлар кутубхонаси фрагменти.
Кутубхоналар учун қатъий бир стандартлаш мавжуд эмас. Одатда компонентлар сарлавҳаларга эга ва уларни фреймлар бўйича гуруҳлаш қулай.
Facebook iOS 11 UI Kit билдиришномалар ва ҳаракатларни тасдиқлаш компонентлари.
Компонентлар кутубхонаси ўзи нимага керак?
Профессионаллар компонентлар кутубхонаси - "фигманинг асосий афзалликларидан бири" деган фикрга қўшилишади.
Компонентлар кутубхонасининг имкониятлари:
- Вақтни тежаш.
Интерфейс компонентлар ёрдамида конструктор каби еғилади. Олдиндан тайёрлаб қўйилган миниатюра кўринишидаги загатовкаларимиз экраннинг чап тарафдаги панелда жойлашган бўлиб ўша ердан проектда ишлатиш учун керакли компонентни тортиб экранга ташлашимиз мумкин. Шундай қилиб сиз бир стильдан иккинчисига тезда ўтишингиз мумкин. "Вақт - бу пул" дейилганидек компонентлардан фойдаланиш клиентлар учун бюджетни тежашни англатади. - Жамоа билан самарали ишлаш. Кутубхоналар барча жамоа фигманинг ўзида нашр(publish) қилинади, ва ҳар бир ходим битта дизайн-концепциядаги элементлардан фойдаланиши мумкин. Агар унга ўзгартиришлар киритса, компонентлар барчада янгиланади, дастурчилар эса билдиришнома(notification) олади. Шу билан бирга Фигма орқали бир ой давомида қилинган ишларни назорат қилиш мумкин. Кимдир хато қилдими? Муаммо йўқ, орқага қайтсангиз бўлди)
- Редизайнни соддалаштириш. Экземплярларга автоматик тарзда "онлари" томонидан ўзгартиришлар ўтади. Шунинг учун, сайтни йоки иловани дизайнини янгилаш керак бўлса, асосий иш - кутубхонадаги компонентларни янгилаш бўлади холос.
- Таййор элементларни ишлатиш.
Фигма файлни барча фойдаланиши учун сиз рухсат беришингиз мумкин оддийроқ қилиб айтса доступ беришингиз мумкин. Ушбу функция туфайли интернетда ҳамма фойдаланиши мумкин бўлган таййор бепул кутубхоналар бор. Юқоридаги скришотларда бири Facebook для iOS 11 нинг экранларнинг дизайни компонент кўринишида берилган.
Компонентлар кутубхонасини қандай қилиб тайёрланади?
Биринчи кутубхона учун бўш файл очишингиз керак ва уни компонентлар билан тўлдиринг. Бошланишига компонентни таркибий қисмларини чизиб олинг. Кейин уларни белгилаб юқори панелда жойлашган "Create Component" тугмасини босинг.
Янги кутубхонани лойиҳаларда ишлатиш учун, уни нашр қилиш керак. Буни Assets иловаси орқали бажаришингиз мумкин. Китоб иконкасига босиб Publish тугмасини боссангиз кифоя.
Агар сиз бир нечта қоидаларга амал қилиб ишласангиз, кутубхоналар билан ишлаш янада осонлашади.
- Икки мартадан кўп ишлатадиган қўлланиладиган элементларни қўшинг. Интерактив элементлар, иконкалар, слайдерлар, тапбарлар, фойдаланувчилар аватаркалари, экран лэйаутлари, меню ва шунга ўхшаш нарсалар.
- Озидан бошланг. Атомик дизайн принциплари бўйича биринчи бўлинмайдиган элементлар ҳосил қилиниши керак: мисол учун, сарлавҳа ва параграфлар, иконкалар, чек-бокслар. Кейинчалик, улар бошқа компонентларни бир қисмига айланади.
- Элемент ҳолатларни батафсил кўрсатиб бериш. Одатда кнопкаларни ҳолатини кўрсатиб бериш учун уларни устма-уст қўйилади. Мисол учун кнопка(button)ни устига курсор борандаги ҳолати ва босилгандаги ҳолати. Кнопкани бир ҳолатидан иккинчи ҳолатига ўтиш учун всего лишь кўриниши(кўзчали иконка)ни ўчириб йоқилса кифоя.
- Таърифларни тўлдириш.
Асосий компонентда тавсиф йозиш учун алоҳида жой бўлиб, бу элементни қачон ишлатиш кераклиги ва у ўзини қандай тутиши ҳақида ёзилади. Шунда ҳамкасблар топишмоқлар ичида қолиб кетишмайди. - Битта интерфейс - битта кутубхона.
Бу асосан катта жамоалар учун фойдали. Агар интерфейсни десктоп версиясини битта одам чизаётган бўлса, мобил версиясини эса бошқалар чизаётган бўлса, улар икки хил кутубхонадан фойдаланишган маъқул. Менюда компонентлар кам бўлса, янгилаш ҳам кам бўлади - ҳеч ким ортиқча нарсаларга чалғимайди.
Компонентлар кутубхонасидан қандай қилиб тўғри фойдаланиш мумкин. Кутубхона жамоа учун нашр қилинганидан Кейин, унинг компонентлари экраннинг чап тарафидаги Assets панелида пайдо бўлади. Шундан Кейин фойдаланувчилар уни ишлатишлари мумкин.
Компонент экземплярини дизайнга 3 та йўл билан жойлаштириш мумкин:
- Нусхалаш.
Асосий компонентнинг нусхаси ёки унинг нусхаси (асосий компонентдан нусха олиниб, олинган нусхадан ҳам нусха олинса) автоматик равишда экземплярга айланади - Assets панелидан суриб ўтиш.
Assets панелидан иш ойнасига керакли компонентни суриб ўтиш. - Ўзгартириш.
Экземплярни танлганизда ўнг тарафдаги панелда Instance созламалари бор. У ердан биз керакли асосий компонентни танлаб олишимиз йоки ўзгартиришимиз мумкин.
Баъзида шундай ҳолатлар бўладики, ўзгартирган экземпляримиз асосий компоненти(онаси)дан анчагина фарқ қилади. Агар у бизга шу ўзгарган ҳолатида яна керак бўладиган бўлса биз иккита йўл тутишимиз мумкин:
- Ўзгартиришларни асосий компонентга ўтказиш.
Instances Push панелида жойлашган Overrides to Main Component функцияси орқали биз ўзгартиришларимиз асосий компонентга ўтказишимиз мумкин. Бунда барча параметрларимиз асосий компонент(онаси)га ўтади ва барча бошқа нусхаланиб ишлатилаётган экземплярларимизда ҳам ўзгаради. Бу функцияни қачон ишлатишимиз тўғрироқ бўлади? Қачонки бутун дизайн-концепциямизда ўзгаришлар бўлган бўлса тўғри бўлади. - Экземпляримизни мустақил алоҳида компонент қилиш.
Сичқончамизни ўнг тугмасини босиб, рўйхатдан Detach Instance ни танлаймиз. Экземпляр оддий ташкил қилувчи бўлимларига бўлиниб эски(компонент бўлмаган) ҳолатига қайтади ва уни яна осонлик билан алоҳида янги компонент қилиб қўйишимиз мумкин. Бу нега керак десангиз: биз битта компонент қилдик ва уни ишлатяпмиз, ўзгартиришлар қўшиш керак бўлиб қолди, лекин бизга бу компонент керак ҳали уни ўзгартиришни хоҳламаймиз шу сабабдан нусхалаган экземпляримизни Detach Instance функцияси орқали копонентдан чиқариб олиб керак бўлган ўзгартиришларни қўшиб алоҳида янги компонент қилиб қўямиз. Шунда биз ютқазмаймиз, эскиси ҳам янгиси ҳам бор)
Хулоса Фигма компонентлар кутубхонаси- интерфейс учун ярим таййор блокларимизни, қоралама чизмаларимизни сақлаш учун қулай ва бу кутубхонани истаган инсонимиз билан бўлиша оламиз. Кўп ишлатиладиган истаган нарсангизни унда сақлашингиз мумкин. Истаган вақтда ўзгартиришлар киритиб янгилашингиз мумкин ва бу ўзгартиришларингиздан барча жамоа аъзолари хабардор бўлишади. Агар асосий компонентдандиги дизайндан узоқлашиб кетган бўлсангиз осонгина алоҳида янги компонент қилиш мумкин.