5 модуль

Фигма графикалық редактормен танысу және жұмыс жасау сабақтары
1. Фигмамен танысу

Фигма- ол мощный дизайн жасауға арналған графикалық редактор. Фигма браузерде жұмыс жасайды және жасалған жұмыстар автоматты түрде сақталып отырады.

Фигмада жасалған сайт дизайнын Тильдаға верстка жасауға болады немесе қажетті элементтерді ғана жасап алып, экспорт жасап тильдада қолдансаңыз болады.

Фигмаға тіркелу, фигмамен толық танысуды видесабақта көре аласыз.
Үй тапсырмасы:

Фигмаға тіркеліп, жұмыс алаңын ашып , элементтерді қолданып көріңіз. Сілтемесін үй тапсырмасы чатына жіберіңіз.
2.Модульная сетка.Фигма (11:14)

Фигма арқылы кез-келген дизайн жасар кезде біз алдымен сетка құрып алуымыз қажет.Сетка бізге әр бір элементтерді пропорционалды түрде,бір линияда,өте тиянақты,дәл етіп орналастыруға көмектеседі.

Және әр компьютер/ноутбук/планшет/телефон экрандарының размерлері әр түрлі болғандықтан,барлық сайттағы контент/ақпараттар осы сетканың ішінде орналасуы қажет.

Сетканың түрлері өте көп, мен сізге жиі қолданылатын әрі ыңғайлы вариантын көрсеттім. Сәттілік!
Үй тапсырмасы:

Видео сабақта көрсетілгендей сізде өзіңіздің сеткаңыздың настройкасын жасап қойыңыз.
Төмендегі 3 тапсырманы сеткаға орналастырыңыз:
1. 3 суретті сетка бойынша орналастырыңыз
2. 1 сурет және текстті 12 колона бойынша орналастырыңыз
3. сайтта 6 сурет қолданатын болсаңыз соны 12 колона бойынша қойыңыз.
Сурет, текст кез-келген өз идеяңызға сәйкес ала беруге болады.
3. Плагин деген не? (11:11)

Фигмада біздің жұмысымызды жеңілдететін, басқа разработчиктардың инструменттері бар. Олардың қызметі қандай және қалай установка жасап, жұмыс жасаймыз видеодан көре аласыз.
Үй тапсырмасы:

Плагиндарды жүктеп, жұмыс жасап көріңіз. Өзіңіздің сайтыңызды жасау барысында қолданыңыз.
4. Плагин Remove BG (5:14)

Cуреттердің артқы фонын Фотошопты қолданбай, бірден алып тастау үшін қолданылатын плагин
Remove BG. Фигманың ішінде қалай регистрация жасап, жұмыс жасауға болады толық видеосабақтан көре аласыз.
Үй тапсырмасы:

Remove BG плагинін өз фигма аккаунтыңызға установка жасап, сайтыңызды жасау барысында пайдаланып көріңіз.
5. Плагин Get Waves (5:56)

Сайтымыздағы блоктардың арасындағы переход толқынды (волнистый) болуы үшін қолданылатын плагин.

Фигмада жасап, Тильда Зеро блокқа экспорт жасаймыз.
Үй тапсырмасы:

Плагинді пайдаланып, сайтыңыздың переходтарын ерекшелей түсіңіз.
6. Фигмада Иллюстрацияларды қалай қолданамыз? (7:01)

Фигмада қазіргі таңда трендтегі иллюстрациялар бар, оларды біз өзіміздің сайттарымызда және баннерларымызда қолдана аламыз. Сайтыңызға ерекше дизайн жасауға мүмкіндік береді.
Үй тапсырмасы:

Иллюстрацияларды пайдаланып, сайтыңызды ерекшелей түсіңіз.
7. Фигмада жасаған сайтымызды Тильдаға бірнеше минутта ауыстыру (16:11)

Фигмадан макетті бұрын әр элементті жеке-жеке экспорт жасау арқылы Тильда Зеро блокка ауыстыратын болсақ, жақында ғана шыққан Тильда функциясы арқылы қазір ол макетімізді сілтеме арқылы бір минутка жетер-жетпес уақыт ішінде ауыстыра аламыз. Яғни дизайнерлердің тілімен айтқанда верстка жасаймыз.

Верстка деген ол Фигмада жасалған дизайнымыздың Тильдаға ауысып, кнопкаларына сілтеме беріп, анимациялар беріп, былайша айтканда сайтымызды тірілту.
Үй тапсырмасы:

Сіздер де видеосабақтағыдай қайталап жасап, практика жасап көріңіздер.