Скачать "Md-CG3-97-24_Антипенко Максимилиан_Вебинар 4_Обучение инструментам UI/UX дизайна_30.01.2024"

|

Похожие ролики из нашего каталога

1:54

tv room - Famous (ft. Slyleaf)

Канал: tv room

8:40

Новогодний квиз, 1-й раунд

Канал: quize2you

4:40

Учимся плавать на надувном матрасе.

Канал: Dear Maria

3:10

Priscilla Ricart - Professional fashion model from Brazil. Biography, Wiki, Age, Net Worth

Канал: Instagram Models

27:28

О том, кто помогает найти многое. Протоиерей Андрей Ткачёв.

Канал: Протоиерей Андрей Ткачёв

57:16

BBC. Таинственный мир гормонов. Эндокринная система

Канал: Мы за здоровье

3:59

[안방1열 직캠4K] 스트레이 키즈 방찬 '특' (Stray Kids BANG CHAN 'S-Class' FanCam) @SBS Inkigayo 230611

Канал: SBSKPOP ZOOM

1:57:28

10 лет я копал в Заброшке чтобы найти всё ЭТО! Лучшие находки 2021-2011. Поиск Золота с XP Deus.

Канал: СЕРЫЙ КОПАТЕЛЬ

20:06

Какой ТЕПЛОВИЗОР купить? Обзор и тест тепловизоров для охоты.

Канал: Оружейный Барон - Top Hunter -

3:15

Убери сутулость через челюсть(ВНЧС)

Канал: DoctorEvgeniy Быковских Евгений

|

Теги видео

Выделить всеКопировать

md-cg3-97-24_антипенко

максимилиан_вебинар

4_обучение

инструментам

uiux

дизайна_30.01.2024

|

Субтитры

• Английский

Скачать

00:00:08

Привет

00:00:11

Привет доброе утро Доброе доброе утро

00:00:15

значит Сегодня у нас тема довольно

00:00:17

сложная будет мы сегодня будем говорить

00:00:19

о стилях и сразу же затронем что такое

00:00:22

переменный может кто-то из вас заходил

00:00:24

на Дин тун в субботу смотрели мой Стрим

00:00:28

Я как раз рассматривал переменные мы с

00:00:30

вами их уже применим на нашем проекте

00:00:34

который вы сделали тот самый РМ макет а

00:00:38

но для начала стоит проверить что мы

00:00:40

сделали по црм то есть иллюстрации ещё в

00:00:43

процессе там на самом деле смысла

00:00:44

особого нету смотреть а вот с цмоко

00:00:47

нашей хотелось бы глянуть Поэтому сейчас

00:00:50

я секунду

00:00:51

включу демонстрацию и хотел бы чтобы вы

00:00:55

выложили в секцию провероч РМ тот у кого

00:00:59

есть буквально несколько работ мы

00:01:01

посмотрим на типичные ошибки Это сюда

00:01:05

или

00:01:06

[музыка]

00:01:07

секунду вот

00:01:10

сюда или вот сюда как

00:01:15

обычно справа вот сюда можете выложить

00:01:17

свой мм это где мы создавали там много

00:01:20

помните нужно повторить иконок вот это

00:01:25

вот меня немножко другого цта отличается

00:01:28

сегодня тему

00:01:48

жду выкладывайте копируйте вставляйте А

00:01:52

мы сейчас посмотрим чином посередине

00:01:55

работа Значит на что обращаю внимание ну

00:01:58

для начала просто сходство берте один

00:02:00

макет и второй смотрите визуально и

00:02:03

ищете ели какие-то сильно различия Какие

00:02:06

могут быть отступления гарнитура может

00:02:08

немножко быть другой Это нормально Но

00:02:10

главное чтобы она была похожа понимаете

00:02:12

будет странно если тут гарнитура без

00:02:14

засечек А тут гарнитура с засечками Вот

00:02:16

это странно цвета одинаковые я вижу

00:02:19

формы иконки тоже могут немножко

00:02:21

отличаться потому что попасть в стиль

00:02:23

надо знать се иконок и просто чуточку

00:02:25

дольше посидеть Поэтому если вы нашли

00:02:27

похожие ин

00:02:30

В общем я сечас смотрю сравниваю начина

00:02:32

вместе верхний край кстати логотип ещ

00:02:35

немножко иначе сделали ничего страшного

00:02:38

верхняя часть всё похоже Здесь всё тоже

00:02:40

отлично тут всё очень похоже тоже

00:02:45

хорошо

00:02:47

Так ну тут чуть-чуть Наверно с отступом

00:02:50

именно от заголовка что-то кажется он

00:02:51

чуть-чуть дальше ушёл но это так это нез

00:02:55

влом Внутри тоже здесь

00:02:58

поже

00:03:00

слева две иконки покрашены в серый цвет

00:03:03

то есть не с обводкой а в серый цвет

00:03:05

тоже самое что с тремя точками которые

00:03:07

вы сделали это в левой границе Тут всё

00:03:12

похоже Тут всё

00:03:16

похоже может быть только чуточку больше

00:03:18

иконки слева возможно иллюзии из-за

00:03:21

может только трубочка просто нужно

00:03:23

увеличить Ну чуть-чуть в размерах

00:03:24

Хочется больше а тут всё в принципе тоже

00:03:28

похоже если заморочиться можно сказать

00:03:31

чуть-чуть светлее серый цвет для 9 2.350

00:03:35

долларов Но это такое тоже знаете Это не

00:03:38

сильно это не такая уж проблема что

00:03:40

из-за этого не знаю я сниж балл какой-то

00:03:43

Нет конечно молодцы Да всё остальное

00:03:46

хорошо Так что вопросы какие-то пишите

00:03:50

нет просто мышка

00:03:52

подёргивает теперь я внутри внутрь

00:03:54

перехожу элементов мне теперь важно что

00:03:56

вы переименовали элементы правильно

00:03:59

группировать элементы переименовали как

00:04:01

хотите вот я вижу header о header 2 Это

00:04:04

хорошо Главное чтобы был порядок значит

00:04:06

смотрим с верхней части вы сделали

00:04:08

фреймом правильно внутри хедер у нас

00:04:16

сгруппированные книгу значит начинается

00:04:18

у нас лого потом у нас идёт меню потом

00:04:21

идёт

00:04:23

профайлскул изменений Да дальше вы

00:04:26

сделали раздва та же самая история

00:04:28

желательно слева направо как инока потом

00:04:30

этот элемент Ико запихнули Молодцы текст

00:04:34

вот смотрите момент А вы написали так Да

00:04:37

всё нормально окей может быть меню

00:04:39

элементы сделали смотрим текст тоже

00:04:41

должен быть ровно со свой размер Молодцы

00:04:44

всё прекрасно последний

00:04:48

объекти хорошо й сделали вынесли фике

00:04:53

шарик добавили красота Т тоже всё хорошо

00:04:56

Аватар дате лу при видеть Так теперь

00:05:01

смотрим Аватар хорошо так сделали через

00:05:05

маску

00:05:07

прекрасно следующая часть header 2 а

00:05:11

значит та же самая история просто

00:05:12

чуть-чуть менять местами опять вы

00:05:14

сделали через фрейм всё логично тут всё

00:05:17

хорошо насчёт текста текстовый блок

00:05:19

какой он должен быть Вот такой он должен

00:05:21

быть или вот такой Он должен быть в

00:05:23

целом здесь не сильно влияет Я думаю что

00:05:26

вы наверное даже выровняли их друг

00:05:27

относительно друга чтобы этот был

00:05:29

одинаковый отступ ну здесь не критично

00:05:32

кто-то скажет лучше тем переносить тут

00:05:34

же умышленный перенос идёт не лучше

00:05:37

Давайте текстовым блоком зажали его всё

00:05:39

то есть всё ничего не меняете дальше

00:05:42

первый мент хорошо сделали 1 2 3 4 Ну в

00:05:48

принципе можно так я бы наверно Вик

00:05:50

просто сделать чуточку ниже То есть он

00:05:52

следующий идёт в этом порядке почему это

00:05:54

так важно Ну если говорить про алеут он

00:05:57

конечно Каприз он немножко Здесь вам

00:06:00

наоборот бы сделал как раз как сейчас

00:06:02

автор нам показал но лучше всё же делать

00:06:06

порядок слева направо сверху вниз если

00:06:08

мы говорим про слои так понятнее всем и

00:06:10

дизайнерам в то числе чит ПГ молодцы

00:06:13

сделали Всё тоже корректно текст

00:06:14

разделили на две части это тоже

00:06:16

корректно БГ сделали со скругления Круто

00:06:19

я уверен что здесь остальных два

00:06:20

элемента выполнено также правильно

00:06:22

смотрим теперь нашу

00:06:24

колбасу можно прямо начинать с неё Можно

00:06:26

даже её вверх туда запихнуть Но можно

00:06:28

было е отделить здесь я бы не сказал что

00:06:30

его нужно куда-то вверх что типа вот

00:06:32

отсюда начинается он первый элемент Нет

00:06:33

он может быть отде настоящий тут

00:06:35

Вопросов нет смотрим внутр создали для А

00:06:38

написали всё вот как красота смотрите

00:06:40

нужно написать на Нати ST где-нибудь и

00:06:42

вы пишете в поиске смотрите как это

00:06:44

сделать если я нажму комбинацию клавишу

00:06:47

Ctrl F Или

00:06:50

я Или я где найду забыл уже А вот Олу

00:06:56

Вот это лу просто чаще нажимаешь

00:06:59

пишем допустим с

00:07:00

вами То есть это поиск мы автоматически

00:07:03

попадаем на все звёздочки которые у нас

00:07:07

есть то есть я на все стары которые вы

00:07:10

создали сразу же перешёл прекрасно то

00:07:13

есть вот почему это очень удобно когда

00:07:15

вы правильно именуется объекты смотрим

00:07:18

внутренний один элемент только Значит

00:07:20

есть иконка Вы запихнули во фрейм хорошо

00:07:22

внутри фрейма лупа совет бы я дал здесь

00:07:25

такой возможно я в предыдущих случаях не

00:07:27

передал этому значение Сейчас посмотрю

00:07:29

что здесь конкретно дада да смотрите

00:07:32

какой да бы дал бы вам совет Вот вы

00:07:34

создаёте фрейм и внутрь запихивает

00:07:36

объект фрейм он должен быть одного

00:07:38

размера для Всех элементов то есть в

00:07:40

идеале фрейм обычно чуточку больше

00:07:42

объект внутренний чуточку меньше для

00:07:44

того чтобы у нас были все одинаковые

00:07:46

иконки между собой за счёт фрейма а

00:07:49

внутренний элемент он мог быть вот таким

00:07:50

А в следующем например случае у

00:07:54

нас

00:07:57

квадратик так извиняюсь по ждите Сейчас

00:07:59

минутку отойду и приду секунду

00:08:20

извиняю вернулся поехали значит я вот

00:08:24

сейчас вам просто показал что ну бывают

00:08:26

разные элементы бывает какая-нибудь

00:08:28

маленькая

00:08:29

вот здесь в виде иконки и потом

00:08:31

начинаешь мучиться с

00:08:34

ней если будете поджимать фре отступы

00:08:38

будут немножко некорректны то есть между

00:08:40

Вот такими элементами отступ будет лучше

00:08:42

настраиваться там компенсируется размер

00:08:45

А между элементами которые чётко зажаты

00:08:48

кстати лайфхак дам как сразу же взять

00:08:50

объект и обернуть во Фрей то есть мы уже

00:08:52

говорили можно сгрупировать

00:08:55

Моть для

00:08:58

этого нажали и написано Frame selection

00:09:01

Ctrl То есть он его оберт во Фрей ровно

00:09:04

с размера Сейчас вы ничего не видите я

00:09:06

покрашу в белый цвет я опять бы сказал

00:09:08

что лучше так не оборачивайся лучше ваш

00:09:11

рейм должен быть чуточку с воздухом

00:09:13

сейчас кто уже сделал так то сделал уже

00:09:16

ничего лучше не возвращайте но проблема

00:09:18

потому что ещё раз внутренние объекты

00:09:21

которые у нас там существуют они могут

00:09:23

быть разных форм и хотелось бы

00:09:25

чтобы этот фрейм он разме а внутренние

00:09:31

иконки чуть-чуть имели прослойку чтобы

00:09:33

хорошо

00:09:36

выравниванию начинали отступать а именно

00:09:38

от этой оболочки чуточку легче

00:09:40

становится дизайнером рать Окей но как

00:09:44

сделали так сделали это уже не меняется

00:09:46

слишком много будет действий Но мысль

00:09:49

была здесь самая глобальная что все

00:09:51

иконки в идеале должны быть одного

00:09:52

размера фрейма то есть пря Если

00:09:55

присмотреться Так оно и есть Возможно

00:09:57

гдето есть ОТП может где-то здесь Но

00:10:00

сомневаюсь скорее всего не все одного

00:10:02

размера это бывает какая-то иллюзия

00:10:04

кажется что типа нет сбг всё верно Вот

00:10:07

БГ я с вами полностью согласен значит

00:10:09

часть дизайнеров скажет что БГ является

00:10:11

частью фрейма это в принципе частично

00:10:14

верно БГ - это может быть отдельный

00:10:17

декоративный элемент что из этого бы

00:10:19

выбрать Я наверное бы всё же советовал

00:10:21

его обернуть вместе в один фрейм но если

00:10:25

они все одного размера как здесь да То

00:10:27

есть можно было это всё взять например

00:10:29

весь ваш объект и прямо его не групп

00:10:32

даже а поменять Фрей Когда вы уже

00:10:34

превратили в группу можно справа в

00:10:36

свойствах нажать на группу и превратить

00:10:38

его врей так давайте знаете что ещё

00:10:41

включу забыл чтобы вы видели комбинацию

00:10:43

клавиш Но тогда я поменяю экран на весь

00:10:46

чтобы вы видели что я

00:10:48

нажимаю так Ага вот оно ну то есть я

00:10:53

просто взял и вот здесь в списке Когда

00:10:56

вы нажали на группу или на можно

00:10:57

переключать его либо появляется либо

00:11:00

онф опять менять ли сейчас это всё в

00:11:03

логике Нет мы совсем скоро Сегодня мы

00:11:06

составим разберёмся А на следующем

00:11:08

занятии мы перейдём на компоненты вы

00:11:10

поймёте что ну с компонентами легче жить

00:11:14

исправление таких ошибок гораздо быстрее

00:11:17

будет происходить поэтому Как есть так

00:11:19

есть всё хорошо делали БГ назвали всё

00:11:22

хорошо сверху смотрим Теперь у нас есть

00:11:24

Блок О отлично сделали отде молодцы

00:11:29

сделали вместе карточки прекрасно

00:11:31

единственный вопрос смотрите когда

00:11:33

делается группировка и появляются

00:11:35

какие-то дырки сверху и снизу сразу

00:11:37

возникает вопрос какой-то из элементов

00:11:39

вышел за предел заходим внутрь этой

00:11:41

группы карточка своего размера своего

00:11:44

своего тут какая-то

00:11:52

плашек и сделали через

00:11:56

[музыка]

00:11:57

ВОМ хотите так всё сейчас объясню В чём

00:12:00

причина почему это неправильно сделано

00:12:03

вы могли просто вот этот элемент Сейчас

00:12:05

объясню я возьму его даже отдельно

00:12:07

кусочек заберу отсюда так блок один

00:12:11

возьмём его просто отдельно

00:12:14

стоящем не нужно мне растянуть ещё вашу

00:12:17

секцию вот смотрите значит по сути вот у

00:12:22

вас есть элемент ваш блок когда мы его

00:12:25

вернули в группу он просто стал

00:12:27

группировкой

00:12:28

Но если бы вы его сейчас обернули во

00:12:30

фрейм тон тонкий момент ну интересный

00:12:33

обернуть во фрейм давайте я сейчас меняю

00:12:35

группу на

00:12:36

фрейм то с фреймом можно играться как с

00:12:39

цветом То есть ему можно тоже задавать

00:12:41

цвет сейчас объясню То есть у вас был

00:12:43

отдельный фон Серый вот и он тем самым

00:12:46

так и работал Но что если вы вместо

00:12:49

отдельного цвета вместо отдельного

00:12:51

прямоугольника в виде фона всю вашу

00:12:54

группу обернётся в фрейм А фрейм там

00:12:57

можно покрасить эту группу не покрасить

00:12:59

А фрейм можно покрасить И что если мы

00:13:03

наш фрейм будем

00:13:05

скругление были 30 как мы это быстро

00:13:08

сделаем взяли помните правой клавишей

00:13:11

Copy properties выбрали наш фрейм правой

00:13:14

клавишей paste properties Мы в принципе

00:13:17

то и сделали но в чём его преимущество

00:13:20

наш фрейм обрезает элемент и всё что

00:13:22

выходит за его пределы Мы не видим То

00:13:25

есть если я сейчас разорву старую логику

00:13:28

с

00:13:30

те маско вот прямоугольник то он выре

00:13:35

спокойно выре потому что фрейм будет

00:13:37

всегда отсекать элементы смотрите какой

00:13:39

фрейм ещ интересный элемент у фрейма

00:13:42

есть галочка где мы уже смотрели есть

00:13:44

вот шаблоны фрейм поменять на группу и

00:13:46

на секцию поняли галочка когда галочку

00:13:50

отжима теперь все элементы которые не

00:13:52

вмести

00:13:57

ви равно обошли этот момент через маску

00:14:00

но оказывается всегда есть какие-то

00:14:02

более лёгкие способы чтобы не усложнять

00:14:05

и получается маска нам не нужна была

00:14:07

Почему смотрите объясню мысль что если

00:14:09

бы у нас были ещё карточки в перспективе

00:14:12

которые реально уходят туда за пределы Я

00:14:15

их вот так скопирую то хотелось бы чтобы

00:14:18

Мы их видели И если что нам нужно было

00:14:20

сделать анимацию мы могли их просто

00:14:22

сдвигать вот так и все видели помен

00:14:27

Тате мы могли это не увидеть где-то мы

00:14:30

могли это не разобрать эта тема Ну

00:14:33

всплывает всегда так сходу сложно

00:14:36

сказать а сам фрейм если потребуется

00:14:38

настроить мы можем фрейм капризный В

00:14:40

каком плане Когда Вы начинаете двигать

00:14:43

элемент элементы начинают вместе плыть

00:14:45

тут есть одна настройка интересная

00:14:47

называется constrain я пока лишь скажу

00:14:49

Так что если вы будете удерживать кол

00:14:51

ещё когда левой клавишей то вы теперь

00:14:54

можете менять размер фрейма элементы не

00:14:56

будут

00:14:57

ехать

00:14:59

Окей поговорили как эта часть решается

00:15:01

Почему была такая проблема потому что

00:15:03

вот этот блок за счёт своей высоты за

00:15:05

счёт своей маски объединение этой группы

00:15:09

начал растягивать видите как стали такие

00:15:11

прослойки которые не нужны в идеале они

00:15:14

должны быть одного размера такой

00:15:16

капризный

00:15:17

элементи хорошо а может нужно было ещё

00:15:20

отдельные карточки превращать во фре я

00:15:23

скажу так не

00:15:27

технологи

00:15:31

ру об эы это бы Папочка и поэтому группу

00:15:36

покрасить нельзя и хорошо когда у нас

00:15:38

есть Гру какне удобно перемещать элемент

00:15:41

случайно скосили случайно что-то не

00:15:43

подвинул я взял этот цельный элемент

00:15:45

пододвинул

00:15:46

го значит внутренние теперь карточки

00:15:50

смотрим карточка о

00:15:57

группа здесь текст Да насчёт вот такого

00:16:00

текста советую всегда поджимать

00:16:02

Вертикаль то есть берёте помните в

00:16:04

настройках мы говорили есть автошина

00:16:06

есть авто высота есть фиксированных

00:16:08

размеров авто высота чтобы он был всегда

00:16:10

свой размер если Тут ещё Ладно вы где-то

00:16:12

будете поджимать где-то умышленно энтеро

00:16:15

то контролируйте расстояние вот как

00:16:18

здесь опять сде поджали хорошо и там ещё

00:16:21

поджали что-то ещё смотрим

00:16:25

внутрянку промахи так есть Аватар тоже

00:16:29

мы говорили что можно там местами менять

00:16:31

это не Сильно критично

00:16:34

иконой иконки ой можно было через шарики

00:16:37

вы сделали лучше лучше конечно через

00:16:40

готовую иконку вот опять хороший

00:16:42

типичный пример Почему сказал фрейм

00:16:43

лучше делать одного размера видите что

00:16:45

происходит теперь наш фрейм сверху не

00:16:47

имеет пустоты А теперь он ровно под

00:16:50

размер поджал и теперь контролировать

00:16:52

эти отступы но оден сложности есть можно

00:16:56

было их взя вот реть только до

00:16:59

одинаковых размеров допустим я попробую

00:17:02

вот а вот эту иконку отцентрировать

00:17:04

внутри вашего фрейма а потом весь этот

00:17:07

фрейм отцентрировать немножко безопасней

00:17:10

шарики с шариками всё хорошо Вы сделали

00:17:13

через маску Всё верно Молодцы справа

00:17:16

теперь смотрим

00:17:17

Ева значит ну здесь в принципе тот же

00:17:21

самый я вижу подход логично насчёт

00:17:25

свечения значит если внимательно

00:17:27

присмотреться потрите здесь есть

00:17:30

какое-то розовое свечение которое

00:17:32

обрезается и есть здесь даже серое

00:17:34

свечение Да ужас какой-то Но это сложная

00:17:38

тема Я согласен Значит нам нужно было

00:17:41

взять красный правиль он где-то там взу

00:17:44

находится если видите красный уходит за

00:17:46

пределы то ему нужно обреза и вариантов

00:17:50

было два вы могли сделать через маску

00:17:52

чтобы

00:17:54

Эри

00:17:57

э

00:18:00

всего подо Вот и вы увидите тепер на

00:18:04

шарик не может выйти мы ему не позволили

00:18:07

туда и по сути нам нужно было сделать

00:18:10

красненький элемент скопировать и взять

00:18:13

какой-нибудь серенький элемент Вот это

00:18:16

был тот самый

00:18:18

эффект стало теперь яснее Поня есть

00:18:27

нет г здесь вс хорошо Окей отлично Как

00:18:32

быстро переходить на элементы

00:18:34

удерживайте Вы можете сразу быстро их

00:18:36

кликать сразу же раскрываются папочки Ну

00:18:39

у вас всё тут корректно сделано тут та

00:18:41

же самая история хорошо тут у нас что

00:18:44

детализирована

00:18:45

информация тоже самое полосочками

00:18:48

делаете слева направо делаете всё

00:18:51

логично здесь какая-то иллюзия Я

00:18:54

предполагаю навли а немножко поле

00:18:59

помните как мы говорили с Вами если есть

00:19:01

даже группа или есть фрейм вы выбираете

00:19:04

объект относительно внутреннего элемента

00:19:07

будет выравниваться и возьмёте два

00:19:10

элемента они друг относительно друга

00:19:11

будут выравниваться очень удобно и

00:19:14

быстро значит здесь что всё остальное

00:19:17

вроде как Хорошо посмотрим только здесь

00:19:19

на иконку вы сделали через

00:19:27

Маре картинка Окей значит как можно было

00:19:31

сделать немножко

00:19:32

легче для нас формат иконок называется

00:19:36

свг помните мы как-то смотрели на

00:19:39

прошлом занятии jp - это картинки

00:19:41

которые не поддерживают прозрачность png

00:19:44

- это картинки которые поддерживают

00:19:45

прозрачность то есть удаление фона

00:19:47

полупрозрачной как будто это стекло а

00:19:51

свг - это формат векторный ответ был бы

00:19:53

такой Если бы вы написали

00:19:56

допустим вы бы нашли ш элемент

00:19:59

Представьте он был бы как прямоугольники

00:20:01

созданные Вы могли бы легко их

00:20:03

перекрасить если потребовалось Но именно

00:20:05

из-за того что Вот я сейчас говорю через

00:20:07

маску немножко некомфортно работать Хотя

00:20:09

вариант через картинки всегда рабочий то

00:20:12

есть Так тоже делали раньше сегодня

00:20:14

желательно ищите свш Нужно ли сейчас

00:20:17

переделать вам этот макет Нет не

00:20:19

стоит слева Я думаю что тоже всё

00:20:21

корректно Я уже не вижу здесь каких-то

00:20:24

проблем Давайте сюда перейм посмотрим

00:20:27

кусочки

00:20:29

понял Ну в принципе всё остальное хорошо

00:20:32

Да всё остальное хорошо так хорошо совет

00:20:36

какой бы я дал всё же внести коррективы

00:20:41

Какие так хорошо значит на 9 баллов в

00:20:45

этом макете Я бы хотел чтобы чуть-чуть

00:20:47

выровняли иконки Я бы хотел чтобы ну тут

00:20:52

Ладно шариком уже разобрались забили

00:20:55

повторить эти иконки в такой

00:20:57

цвет и

00:21:00

наверное наверное всё ничего страшного

00:21:03

там виде фреймы есть фрейма нету сказал

00:21:06

что скоро мы даже этот вопрос закроем

00:21:09

это будет на 9 баллов на 10 баллов

00:21:11

повторюсь сделайте чуть-чуть больше чем

00:21:13

я от вас прошу Попробуйте подумать Может

00:21:16

что-то дорисуйте в макете может Создайте

00:21:18

какой-то дополнительный элемент когда мы

00:21:20

Нажали что-то на иконку это было бы 10

00:21:22

баллов но в принципе во баллов уже в

00:21:25

кармане почти девять

00:21:28

хорошо проверили значит я думаю что в

00:21:32

принципе вы

00:21:34

услышали я выду сейчас мой проверить

00:21:37

макет Хорошо давайте я выборочно просто

00:21:40

гляну найду ли я какие-то проблемы в

00:21:42

макете но вы увидели Вот это стандарт

00:21:45

сгруппировать порядок сделали правильным

00:21:48

элементом и готово значит я хотя бы пока

00:21:51

гляну на сходство в этом макете Хорошо

00:21:54

хорошо что-то А всё понял такой Чуть

00:21:58

поменьше но это не критично значит

00:22:01

элементы Я просто по навожу увижу всё

00:22:03

Ага хорошо логотип есть О'кей похоже

00:22:07

правда тут

00:22:10

Отлично Отлично здесь шариком Мы уже

00:22:13

поговорили наверно ситуация будет тоже

00:22:15

здесь по коже да А нет вы сделали через

00:22:19

кнл Да вариант такой хороший ну там два

00:22:22

шарика Да Типа он внизу идёт второй

00:22:24

здесь серый шарик Ну и готово так тут

00:22:28

смотрим всё

00:22:30

похоже левая часть всё отлично тут тоже

00:22:34

всё

00:22:35

похоже тут тоже немножко такой более

00:22:38

блеклый серый цвет но в остальном всё

00:22:40

похоже посмотрю только немножко по

00:22:43

группировке так А да Оно такое

00:22:46

сместилось Я предполагаю Кстати это

00:22:48

автора проблема его то есть скриншот

00:22:51

этот элемент должен был быть на оси но

00:22:53

случайно поехал мы это конечно не

00:22:54

исправляем так теперь про группировку

00:22:57

сразу скажу смотрите вы сейчас начинаете

00:22:58

группировать левую часть и правую часть

00:23:00

Но на самом деле в логике этот элемент

00:23:02

соединён с левой частью А этот элемент

00:23:04

соединён со второй частью то есть они

00:23:06

должны быть по смыслу вместе в остальном

00:23:10

сейчас гляну быстро тут всё

00:23:14

хорошо

00:23:16

так вижу лишнюю группировку Посмотрите

00:23:19

есть группа раз есть группа два то есть

00:23:22

в одной группе Вы соединили что-то

00:23:26

одно Вы соединили д Хотя по сути можно

00:23:29

было а маску так типа

00:23:32

соединен А типа внутренний элемент всё

00:23:35

ну ну можно как бы хорошо ну как бы

00:23:38

вроде и не нужно если говорить про вот

00:23:40

эту внутреннюю часть То есть можно было

00:23:42

Ctrl сломать и вот типа главная оболочка

00:23:45

У нас есть большая вот у нас Например

00:23:48

можно сказать что эти элементы вместе

00:23:50

как будто являются хром Вот это было бы

00:23:54

чуточку лучше ну уня где-то Здесь ганем

00:23:59

тоже интересно нано через маску Да

00:24:01

делали нет а нет через маску О'кей

00:24:05

советовал бы через фрейм по внутрянки

00:24:08

всё

00:24:09

хорошо Так тут какая-то история с

00:24:12

группой видимо случилась смотрите А вы

00:24:15

офи цельный элемент всё сделали Ну ладно

00:24:17

Ну тут что-то с группой просто вылетело

00:24:18

проверьте просто Где находится эта

00:24:20

иконка возможно она вылетела с фото вот

00:24:23

здесь вот типа да бывает такая штука да

00:24:26

но в принципе хорошо здесь

00:24:28

то что я вот сейчас разбирал у другого

00:24:30

автора те же самые моменты просто пере

00:24:32

проверьте у себя в макете смотрю тут

00:24:35

тоже на повторение на

00:24:37

похожесть так верхняя часть

00:24:40

[музыка]

00:24:42

хорошо вторая

00:24:44

часть

00:24:47

похожа Здесь тоже похоже Ну с шариками

00:24:50

мы уже разобрались здесь Посмотрите

00:24:54

видите здесь нету жирного нах лаках про

00:24:57

текст говорим

00:25:01

Ага здесь чуточку не тот цвет выбран там

00:25:04

иконка серого цвета все иконки серого

00:25:09

[музыка]

00:25:14

тут здесь у

00:25:16

нас

00:25:18

хорошо

00:25:20

тут хорошо возможно вопросы где-нибудь с

00:25:24

группировкой будет сейчас просто глянем

00:25:26

с размерами good

00:25:29

обрали так фрейм элипс вынесли Отдельно

00:25:33

Ну пускай отдельно так отдельно Ага

00:25:38

Молодцы

00:25:42

круто так хорошо

00:25:47

супер отлично Ну в принципе я вижу что

00:25:50

хорошо тут Окей молодцы молодцы всё всё

00:25:55

Молодцы Хорошо Значит Давайте перейдём к

00:25:58

следующей части нам пригодится этот

00:26:00

макет Значит кто не успел сделать Я даже

00:26:04

возьму чей-нибудь Может макет да давайте

00:26:06

я возьму

00:26:08

макет рандомно Милана я твой возьму

00:26:11

макет Значит кто сейчас ещё не выполнил

00:26:14

задачу понятное дело так услышите меня

00:26:16

ни в коем случае не Возьмите чужой макет

00:26:18

это неправильно То есть если кто-то ещё

00:26:20

в процессе Вы должны сами пройти через

00:26:22

эту боль понять онные принци и запомнить

00:26:26

комбинации лаш сегодня нам пригодится

00:26:28

наш макет РМ Кто не успел сделать

00:26:30

Возьмите макет у кого-нибудь но потом

00:26:33

пожалуйста до делайте и на своём макете

00:26:36

продолжайте Так что Создайте для себя

00:26:38

сейчас все секции на нашем файле

00:26:41

Назовите себя или фамилию вашей секции

00:26:45

разместите

00:26:47

туда свою

00:26:49

црч и сейчас будем на новую те

00:26:53

переходить очень

00:26:54

сез А пока это дете

00:26:58

мнение Ну так скажите ну как рутина Да

00:27:02

вот создать элемент сгруппировать

00:27:04

элемент и спасает только мы видим

00:27:07

глобальный макет Да Наталья рутина Ну

00:27:10

честно поначалу кажется что да но потом

00:27:13

когда ты в это всё вливается и копируешь

00:27:16

одинаковые элементы кажется просто там

00:27:18

переименовать подогнать выровнять И на

00:27:21

самом деле не ВС так страшно как кажется

00:27:24

на первый взгляд

00:27:26

правильно е сразу хорошо качественно то

00:27:30

потом не прид переделывать все наши

00:27:32

копии это верно Так

00:27:35

есть но через это ВС равно надо пройти

00:27:38

Да сейчас вы 100% уже нету вопросов как

00:27:42

копирует Ctrl как вообще это сейчас

00:27:45

залетает просто на ура

00:27:48

круто Поехали дальше теперь нам пригоди

00:27:52

выва давайте

00:27:55

Увате сво нету берите Ну хоть у меня Я у

00:27:59

Миланы

00:28:02

взял это наше занятие номер че Вы сейчас

00:28:07

у меня даже немножко увидите Цель этого

00:28:09

занятия мы должны разобраться что такое

00:28:12

стили Что такое переменные и наш весь

00:28:15

макет превратить в тели переменный это

00:28:17

первая наша оптимизация понимание Почему

00:28:26

фигма-обзор жду Всё все скопировали

00:28:30

Молодцы почти все

00:28:33

копируйте Я думаю вы уже столкнулись с

00:28:35

этим вопросом что ну блин как-то

00:28:37

немножко странно Так подождите проверим

00:28:40

А что с текстом У нас всё хорошо Я

00:28:42

просто думал вдруг гарнитура другая и у

00:28:44

нас её нет как-то немножко странно в

00:28:46

виде но мы повторяем одни и те же идеи

00:28:50

одни и те же мысли Я сейчас вам

00:28:53

реальность дам от клиента что клиент

00:28:55

выбегает и говорит правок первая правка

00:28:58

давайте сейчас вместе её внесём Клиент

00:29:01

говорит мне конечно всё здорово мне всё

00:29:03

нравится но Давайте все жёлтые элементы

00:29:08

покрасим в красный меняем у себя так

00:29:12

значит нужно выбрать здесь элемент

00:29:14

красный его любой красный какой хотите

00:29:17

Окей Опачки Возможно когда вы

00:29:20

перекрасили красный цвет возможно что-то

00:29:23

прид перекрашивать ещ так навер белый

00:29:27

цвет теперь менять все элементы чтобы

00:29:29

контраст был давайте сделаем я выбираю

00:29:33

все

00:29:34

элементы крашу в белый

00:29:37

цвет согласитесь мы сейчас я жду вас вы

00:29:41

в красный цвет покрасьте покрасьте все

00:29:42

внутренние элементы в белой Пока в одном

00:29:45

месте Вы заметили Сколько времени мы уже

00:29:47

потратили Жду вас делайте вы должны

00:29:51

увидеть Сколько времени вы сейчас

00:29:53

тратите на то что нужно всего лишь

00:29:54

внести изменения в жёлтый цвет поменять

00:29:57

на красную Он всего в трёх местах А мы

00:30:00

уже должны потратить Ну секунд так пять

00:30:02

на один элемент секунд пять на второй

00:30:05

элементы в итоге Ну ну как-то долго а

00:30:08

если этих макетов у нас страниц 15

00:30:11

представляете какая боль происходит Ух

00:30:14

сложность погодите лайфхак следующий

00:30:16

хорошо А может можно как-то чуточку

00:30:18

быстрее поменять Да если вы возьмёте

00:30:21

цельную группу неважно чего может вы

00:30:23

возьмёте фрейм Возможно вы возьмёте

00:30:25

целую колбаску у нас появляется заметьте

00:30:29

справа в свойствах selection Colors

00:30:31

Найдите это все цвета которые в

00:30:34

выделении у нас можете нажать внизу 72

00:30:38

Colors вы увидите Сколько ещё оттенков У

00:30:40

вас есть с прозрачностью и отсюда мы

00:30:43

можем как раз упростить Вот вы Найдите

00:30:46

жёлтый цвет вон он есть ещё в одном

00:30:48

месте но не запутай есть у нас несколько

00:30:50

оттенков жёлтого вот у нас один оттенок

00:30:52

А вот у нас второй оттенок чувствуете

00:30:54

определённую проблему возможно произошла

00:30:56

Вая да возможно один и тот же жёлтый

00:30:59

цвет на самом деле один цвет просто мы

00:31:01

пипеткой брали и цвета стали разные

00:31:03

вторая проблема возможно реально там два

00:31:05

разных оттенка значит Возьмите в одном

00:31:07

случае в этом списке В свойств кликните

00:31:10

на жёлтый цвет и Поменяйте его опять на

00:31:13

красный и вот мы в принципе покрасили

00:31:16

Окей но бывает задача есть что немножко

00:31:21

неудобно хотелось бы все эти элементы

00:31:23

выделить за один присест как это сделать

00:31:27

Возьмите Наведите справа вы увидите

00:31:30

четыре точки нам Они пока не нужны Но мы

00:31:32

сегодня пройдём снайперский прицел и он

00:31:35

говорит выбрать три элемента значит этот

00:31:39

инструмент говорит о том что он Сейчас

00:31:41

выберет все объекты с этим цветом

00:31:44

нажмите сейчас он взял этих ровно три

00:31:48

объекта и теперь если потребуется что-то

00:31:50

там откорректировать в одном месте Вы

00:31:52

можете

00:31:53

откорректировать удобная Тука ладно

00:31:57

покрасили А дальше-то ничего не поделать

00:31:59

дальше-то всё равно придётся заходить

00:32:00

внутрь красить белый цвет один элемент

00:32:04

покрасить найти здесь и просто только

00:32:06

надеяться что мы Ну пропадаем что мы

00:32:09

где-то не пропустим это же беда Да блин

00:32:13

что если ещё где-то был красный цвет Но

00:32:16

это пока рутина мы замечаем что даже

00:32:18

есть оттенок жёлтого который автоматом

00:32:20

попадает под проблему надо его тоже

00:32:22

перекрасить в оттенок какого-нибудь там

00:32:25

тёмно-красного потому что он тоже с ним

00:32:27

стал Ну вместе эти цвета нужно их менять

00:32:30

одновременно и вот как-то всё равно

00:32:32

видите неудачно Представьте в большом

00:32:34

объёме 15 страниц 20 Нам нужно поменять

00:32:37

цвет Это же не ужасная правка не

00:32:39

единственная смотрите ужаснее Какая

00:32:42

звучит правка цитата в микрофон буду

00:32:45

говорить цвета какие-то Ой не цвета

00:32:48

гарнитура какая-то скучная поиграйся со

00:32:50

шрифтом Ух поиграйся со шрифтом да

00:32:54

посмотрите сколько теперь придётся

00:32:56

менять элементов

00:32:58

да Так это же не самое ужасное ужасно

00:33:01

что когда мы начнём их менять Возьмите

00:33:03

сейчас сверху вот у нас мацерат клиент

00:33:05

приходит говорит Не мацерат отстой

00:33:07

Возьмите что-то другое Давайте вместо

00:33:09

мансера выберем

00:33:13

робота вы видите проблему уже в этой

00:33:16

кнопке То есть когда мы меняем гарнитуру

00:33:19

меняется её расположение потому что она

00:33:21

же слево и границ у них разная ширина

00:33:23

Мара Широкая гарнитура а робота

00:33:27

и получается нам потом е это ВС двигать

00:33:29

местами Посмотрите сами Возьмите все эти

00:33:32

текстовые элементы сверху напишите им

00:33:34

всем

00:33:35

робота Ну что кайфушки конечно кайфушки

00:33:39

у нас расстояние от первого до второго

00:33:41

51 А второго до третьего 45 от третьего

00:33:44

до четвёртого 45 а потом где-то будет

00:33:46

ещё другое расстояние он где-нибудь

00:33:48

слетит может быть Вот т и при ться Ну да

00:33:53

при выравнивать сча один Эмен потом ИП

00:33:57

начинать

00:34:00

делать Ш это же мы только в одном месте

00:34:03

меняем Ну как-то нелогично как-то

00:34:06

нерационально и вы будете правы есть

00:34:09

какой-то инструмент который нас спасёт

00:34:11

Так давайте его сейчас изучим элемент

00:34:14

называется начнём с простого стили Что

00:34:18

такое стили Давайте начнём на аморфных

00:34:20

объекта Хотя можно даже и на карточке

00:34:23

Почему нет Давайте на карточке вот наша

00:34:25

карточка красная которой мы только что

00:34:27

переделали кликаем на неё значит

00:34:31

Посмотрите сейчас в интерфейсе справа

00:34:33

нашей фигмы я даже Вам сейчас буду

00:34:35

подчеркивать что как только вы

00:34:37

встречаете вот такие четыре точки ту

00:34:40

точки ту точки просто в эффектах Мы ещё

00:34:43

не создали если бы создали тут были

00:34:45

точки А знаете где ещё точки Если был бы

00:34:48

фрейм у него есть сетки помните мы с

00:34:50

вами немножко проходили УК тоже есть

00:34:53

точки по сусли

00:34:55

мы ним мы скажем Ну пока стиле мы их не

00:34:59

затронули мы скажем что можно присвоить

00:35:02

стили заливки обводке теням сетке и

00:35:09

шрифту если вы возьмёте любой шрифт

00:35:11

например вот у нас Royal package Вы у

00:35:13

видите тоже четыре точки есть рядом с

00:35:15

текстом начнём с простого значит возьмём

00:35:19

наш прямоугольник красного цвета или

00:35:22

неважно или вы возьмёте всю карточку

00:35:23

целиком которая в группе Мы помним что у

00:35:26

нас если мы выбрали всю группу цвета

00:35:29

находятся где-то в selection Colors Я

00:35:31

лишь хочу показать что Вы можете даже

00:35:33

отсюда в selection Colors нажать четыре

00:35:35

точки

00:35:39

нажмите четыре точки открывает нам

00:35:41

интерфейс запоминаем Что такое

00:35:44

библиотека библиотека Вот мы с вами как

00:35:46

команда работаем Мы решили вывести цвета

00:35:48

на всех на всём нашем продукте чтобы

00:35:51

каждый из нас мог взять этот цвет себе

00:35:53

но библиотека нам не интересна нам

00:35:55

интерес вот этот кастом кастом

00:35:59

нажали значит Ой простите какой кастом

00:36:02

ерунду несу не то кам - это то что мы

00:36:05

сейчас выбираем цвет библиотека есть и

00:36:08

кам нам нужно Когда вы Нажали на четыре

00:36:10

точки нажать на

00:36:12

плюсик тут написано новая переменная New

00:36:15

variable и начинается некая Путаница

00:36:18

Причём тут переменно когда мы говорим о

00:36:19

стилях Когда вы нажали открывается ещё

00:36:22

одно окошко Я сейчас в скриншоте хочу

00:36:24

вам пометить чтобы мы просто не забыли

00:36:27

мы нажали

00:36:29

сюда потом мы Нажали на плюсик а потом

00:36:33

мы говорим о двух элементах стили и

00:36:36

переменный поэтому я пока выделю то что

00:36:39

мы сейчас должны сделать вот это наш

00:36:42

алгоритм скинув телеги чтобы Вы могли

00:36:44

потом вспомнить Значит кликнув на

00:36:49

стиль мы переходим в создание стиля

00:36:52

Посмотрите его настройки название О'кей

00:36:55

давайте пока по банально первое Напишите

00:36:58

впереди например своё имя чтобы мы

00:37:00

просто не потерялись вы сейчас создадите

00:37:02

все стили и мы просто потеряемся я

00:37:04

напишу Макс

00:37:05

сокращённо или хотите по-другому можете

00:37:08

здесь цвет А внизу описание давайте так

00:37:11

я напишу

00:37:12

здесь А внизу напишу Макс типа помни что

00:37:17

это я

00:37:19

создал чуть ниже посмотрите что вот

00:37:21

который вы цвет его начинаете создавать

00:37:25

ниу

00:37:27

за Вы можете ему Если хотите знаю в

00:37:30

Градиент превратить Вы можете обратно

00:37:33

вернуть его в заливку но главное что вот

00:37:35

здесь

00:37:36

настройки Когда вы всё сделали то есть

00:37:39

Нажали на стал написали имя описание не

00:37:42

обязательно для нас и сделали настройку

00:37:48

нажали все

00:37:55

нажали ме ц Шарик и название вашего

00:37:59

стиля появляется ещ замочек сломать

00:38:03

появляется опять тот самый

00:38:05

прицел кликните на наше название

00:38:10

стиля открывается опять стили то есть на

00:38:13

четыре точки уже Нажимать Нет смысла и

00:38:15

даже показано все наши стили созданы Вот

00:38:18

они все всес всес

00:38:25

которые интересно другое вопрос первый -

00:38:28

это как понять что наше что не наше

00:38:30

Можно ли как-то Здесь удобно работать

00:38:32

заметьте сверху как мы сказали Мы в

00:38:34

библиотеки какого-то глобального

00:38:36

элемента я его сейчас наверное удалю

00:38:38

Подождите Давайте не хочу чтобы он нас

00:38:40

путал Сейчас

00:38:42

секунду Да не так всё просто так так так

00:38:47

так секунду так Нет не

00:38:53

здесь Да наверно оттуда лучше удалять ри

00:38:58

а он переменный ВС понял ВС я сечас

00:39:01

удалю переменную она нас сечас сбивает

00:39:03

нам перемен чуть потом пригодится удалю

00:39:06

всё забили на это берём наш цвет То есть

00:39:09

вы сделали цвет как и я но непонятно ваш

00:39:12

этот или это чужой Когда Вы кликнули

00:39:15

посмотрите есть что есть выпадающий

00:39:17

список это библиотеки скажем что ещё раз

00:39:20

есть команды воз этих библиотек много

00:39:22

допустим команда сде биоте называтся

00:39:26

браузер назм Да а вторая команда Яндекс

00:39:30

такси и там отличаются цвета чуть правее

00:39:33

Посмотрите на

00:39:35

иконку превращает в шарики И когда вы

00:39:38

наводите подсказку тоже даёт чей этом

00:39:41

элемент да вернётесь Опять нажмёте на

00:39:43

лист теперь это список

00:39:46

идёт Жалко что при наведении ничего не

00:39:49

написано если нарядом вот э

00:39:55

поэто создавали Поэтому бывает что Вот

00:39:58

видите так как мы сейчас работаем все в

00:40:00

одном макете можно запутаться Поэтому в

00:40:02

целом Можно перейти на квадратики

00:40:03

навести на элементы так не путаться я

00:40:05

нашёл себя Red Max вот

00:40:08

выбрал Пока непонятно зачем это нужно но

00:40:11

мы лишь скажем что изменила свою форму

00:40:13

когда мы перекрасили в другой цвет

00:40:16

давайте выберем теперь внизу нашу

00:40:24

плашечные значение то есть нажимаем на

00:40:27

элемент видим цвет вон он л видите

00:40:29

красный нажимаем на четыре

00:40:32

[музыка]

00:40:33

точки и в этом списке находите свой цвет

00:40:36

Red

00:40:38

Max видите Red Ma готово переходим

00:40:43

наверх та же самая история с

00:40:46

плашечный тут тоже самое четыре точки

00:40:49

ищем Red своё имя

00:40:55

готово

00:40:57

Жду вас

00:41:12

Повторяйте только с красным работаем ещё

00:41:15

раз только нам нужно кликнуть на красный

00:41:17

выбрать свой стиль и

00:41:24

всё Ну или зелёный да понят дело Какой

00:41:27

цвет хотите такой дела разобрались Ой

00:41:31

теперь смысл вкусный какой кликните в

00:41:35

пустом месте не на вашем макете в пустом

00:41:38

месте значит в пустом месте мы как-то

00:41:41

говорили есть настройка цвета всего

00:41:43

макета

00:41:44

окей а чуть ниже есть переменная которую

00:41:48

мы пройдём А ещё ниже то

00:41:52

что име него

00:41:55

Грув с цве с цветом и он говорит Color

00:41:59

стайл кроме цвета было бы что-то ещё

00:42:01

было бы ещё разделение значит отсюда

00:42:04

можно быстро перейти ко всем нашим

00:42:06

стилям и внести коррективы Вот пришла

00:42:09

всё же опять справочка клиент выбегает и

00:42:12

говорит не всё же жёлтый был хороший Ну

00:42:15

ты клиент конечно даёшь Найдите в этих

00:42:18

переменных свою Ну понажимал

00:42:22

верена вот я нашёл второй у меня

00:42:25

элемент и Поменяйте цвет на любой жёлтый

00:42:30

Можете просто вот так вот менять цвет

00:42:31

увидите что все три элемента теперь

00:42:37

связаны сказали жёлтый Ну и жёлтый

00:42:40

значит

00:42:42

будет класс получается

00:42:46

да то есть Представьте теперь в объёме

00:42:49

мы сейчас затронули только маленький

00:42:51

цвет О если мы приво всем элементам

00:42:55

цвета всё будет хорошо Хорошо это наша

00:42:58

сегодня задача будет Окей но мы уже

00:43:02

начинаем путаться Да может нужно было

00:43:04

название написать например как ре Дария

00:43:07

неплохая мысль А вторая проблема которую

00:43:10

вы уже нашли смотрите это хороший вопрос

00:43:13

точно ли нужно наши стили писать

00:43:15

конкретно цветом А что если сегодня он

00:43:18

ре А завтра он Yellow да будем всегда

00:43:20

менять описание или лучше что-то брать

00:43:23

аморфное например акцентный цвет

00:43:27

цвет фона понимаете к чему я веду есть

00:43:29

как-то стало полегче на но я дам лайфхак

00:43:33

Можно ли делать папочки вот прямо в

00:43:36

стилях делать папочки чтобы было нам

00:43:37

легче потому что сейчас будет очень

00:43:40

много цветов давайте это сделаем первое

00:43:42

Найдите свой элемент который вы

00:43:44

покрасили я нашёл вот он второй Наведите

00:43:47

на него нажмите правой клавишей

00:43:49

мыши имо что он говорит первое добавить

00:43:52

новую папочку второе отредактировать

00:43:55

треда

00:43:57

куда-то там вставить на другой макет

00:43:59

значит давайте добавим

00:44:03

папочку Да момент когда вы сейчас

00:44:05

добавите папочку Ну вот у нас какой-то

00:44:08

конфликт произошёл можно ещё одну

00:44:10

добавить папочку Неважно где вы будете

00:44:12

сейчас находиться нажмите ещё раз правой

00:44:14

клавишей ещё раз папочку папочка - Это

00:44:16

как обычный элемент можно сюда

00:44:18

вкладывать элементы Можно отсюда

00:44:20

забирать элементы например е одну создам

00:44:23

папочку Ну вот Ну и ладно хорошо наши

00:44:27

папочки получилась ещё одна Папочка Но

00:44:29

их же можно перемещать Вот они Да

00:44:31

скрываются элементы просто что надо

00:44:35

разобраться что из них что Создайте себе

00:44:38

папочку в любом месте Вот здесь имеется

00:44:41

в виду но она создаться где-то внутри Да

00:44:43

и пускай Создайте выберите элемент New

00:44:45

Fold Создайте папочек посидите помучать

00:44:48

после переименуйте

00:44:50

папочку Да я вот здесь переименую напишу

00:44:54

максими нажму ой

00:44:57

бывает когда

00:44:59

переходит Я вот здесь

00:45:02

напишу что мы порядок почему так

00:45:04

происходит Просто у нас один элемент

00:45:06

было бы два элемента обернули было бы

00:45:09

хорошо Да вот надо найти Вот я нашл

00:45:12

Милана твой цвет есть а где-то

00:45:15

потерянные цвета где-то они здесь

00:45:16

находятся Ну вон я нашл свой Ред Я его

00:45:19

перенёс сюда вот твой Потри куда его

00:45:24

запихнуть Возьмите и Достаньте отсюда Да

00:45:28

Во я так Опа

00:45:30

достаю написала

00:45:33

уберём уберём Да вон ещё Натали взяли

00:45:37

так разложили то есть не бойтесь здесь

00:45:39

их перемещать это

00:45:40

удобно так вроде все перенёс смотрите

00:45:44

вот Наведите короче

00:45:48

порядок сразу сдесь

00:45:52

уже СВ

00:45:54

СМИ кто-то переименовал на Color кто-то

00:45:57

не переименовал именно папочку не

00:45:59

обязательно Я лишь хочу чтобы мы

00:46:01

отделили хотя бы имене мы сейчас не

00:46:03

потерялись вот кто-то создал ещё папочку

00:46:06

видите она внутри Выйди Достаньте её

00:46:08

Алёна возьми Достань эту папочку Одень

00:46:10

чтобы удобно было

00:46:12

рабо Жду вас просто сейчас мы будем

00:46:14

добавлять ээ разные цвета и мы замутим

00:46:18

если мы сейчас это не сделаем Просто

00:46:23

потеряемся кто-то создал STM он отдельно

00:46:26

там стоящий Создайте для себя папочку

00:46:28

тоже жду

00:46:32

вас У меня вопрос пока ждём А можно

00:46:36

как-то из файла перекидывать стили можно

00:46:41

это ты наверное говоришь про библиотеку

00:46:43

пока что мы сейчас увидели можно взять

00:46:45

стиль правой клавишей Cut ST открыть

00:46:48

другой макет правой клавишей

00:46:50

представляешь это помимо того что ты

00:46:52

когда копируешь вот допустим вот ну вот

00:46:54

я домашку Да скидывала Я делала со

00:46:56

стилями там по тексту и Я сейчас смотрю

00:46:59

Их нету это получается помимо того что

00:47:01

нужно Копировать Вот эту саму фрейм

00:47:02

Нужно ещё и вот кат стайл делать или как

00:47:05

а один из вариантов Да это самый

00:47:07

неудобный вариант правильный был бы

00:47:09

другой вариант сложный сейчас будет

00:47:11

Давай так представь что мы сейчас

00:47:13

создали на отдельном файле фигмы цвета

00:47:17

Да вот теперь представь что мы этот файл

00:47:20

опубликовали и сказали что он типа файл

00:47:23

стилей открыли Второй файл где ты

00:47:26

работаешь сейчас и связала в библиотеке

00:47:30

что вот этот файл является стилей сложно

00:47:33

Да но в общем ты просто делаешь связи

00:47:35

между одним и вторым файлом получается

00:47:37

когда Ты создаёшь отдельный файл и там

00:47:39

создаёшь стили Ты этот файл можешь

00:47:40

прикрепить К любым другим Вот так это

00:47:42

работае как

00:47:44

прикреплять подожди сложная тема Погоди

00:47:48

это нам сейчас не надо запутаться мы

00:47:49

пока сейчас копаемся чтобы не боялись

00:47:52

папочку трогать не боялись совать Польше

00:47:56

ле опять возвращаемся на свой макет

00:47:59

поехали Мы создали жёлтый применили Наша

00:48:02

задача создать ВС что тут есть и уже мы

00:48:04

видим проблему мы назвали какой-то Зачем

00:48:07

делать Давайте перемену его быстро

00:48:09

двойного щелчок

00:48:11

кликнули и написали что он похож хотите

00:48:14

написать Окей А может скажем что он

00:48:17

акцент Я бы вам не советовал писать

00:48:24

через акцент тире о то есть жёлтый цвет

00:48:27

для меня акцент один и возможно смотрите

00:48:30

Почему мы сейчас не боимся всё что

00:48:31

связано и вам не нравится сейчас Вы же

00:48:34

потом можете перейти в настройки и тот

00:48:36

цвет настроить то есть сначала было всё

00:48:38

ужасно вон да цвет не попал где-то

00:48:40

возьму крикну на че-то чужой во всё

00:48:43

меняется в один присест пото что мы их

00:48:45

связали продолжим дальше Давайте все

00:48:47

цвета сейчас Прикрепи создадим для них

00:48:50

стили например синий цвет кликнули на

00:48:53

него нажали четыре точки

00:48:56

Да только погодите мы сейчас Что

00:48:58

издеваться будем над собой Вы что хотите

00:49:01

стиль одному а потом заново всем

00:49:03

задавать Зачем кликните на весь

00:49:07

фрейм Возьмите все ваши цвета вот так

00:49:11

целиком Вон они и Если повезёт то

00:49:14

элементы будут одного цвета если не

00:49:16

повезёт придётся немножко вручную

00:49:17

наставить Ну ничего вот я вижу синий

00:49:19

цвет

00:49:20

2657 ещё раз напомню причина почему

00:49:22

цвета отличаются Возможно когда мы

00:49:24

кликали пипеткой

00:49:25

из-за шакальное фотографии чуть-чуть

00:49:27

оттенок менялся но в целом Это был один

00:49:29

и тот же цвет мы сейчас это исправим то

00:49:31

есть проверить него нажимать четыре

00:49:32

точки и напишите Ту же самую

00:49:35

логику плюс нажали выбрали

00:49:38

стиль и а назовём Ну как акцент Вы же

00:49:44

уже писали Да тире два

00:49:48

кристал Когда вы это создали конечно же

00:49:51

ваш элемент может появиться где-то там

00:49:53

видите опять

00:49:54

отдельно мы можем запутаться К сожалению

00:49:57

и такая штука произойдёт Можно опять

00:50:00

писать извини пожалуйста А можешь ещё

00:50:03

раз показать как ты вот нашёл эти цвета

00:50:06

потому что я что-то вот выделила фрейм и

00:50:09

куда Вот вот и дальше как ты вот целый

00:50:12

список этих цветов нашёл вот selection

00:50:15

как ты выбираешь свой макет вот здесь

00:50:18

есть список и последняя

00:50:20

кнопочка Ага дадада Всё спасибо

00:50:24

большое Поэтому вот мы сейчас случайно

00:50:26

создали видите у нас акценты Возможно мы

00:50:28

не написали сейчас потеряли что это из

00:50:30

себя представляет А вот кто-то ошибочно

00:50:32

создал не стиль а создал переменную

00:50:34

спешите переменная Совсем скоро будет но

00:50:37

мы просто на отдельном элементе это

00:50:39

применим значит вот я создал стиль зачем

00:50:42

я сейчас хочу к нему перейти надо всё же

00:50:44

для меня писание например писать Макс я

00:50:46

боюсь что я опять потеряю но не

00:50:48

обязательно Это только для изза нас то

00:50:50

что мы работаем все вместе в парах и в

00:50:52

парах блин а нас много Поэтому я решил

00:50:56

написать Макс вот я нашёл себя всё Вот

00:50:58

это мой взял перенёс левый клавиши

00:51:00

просто главное не запутаться иначе вы

00:51:01

сейчас примените стиль Чужой и будет

00:51:04

кто-то менять Этот стиль и будет и у вас

00:51:06

тоже меняться так цент д Мы работаем

00:51:10

вместе поэтому есть определённой

00:51:13

сложности кликнув глобально на весь наш

00:51:16

фрейм естественно вы найдёте этот синий

00:51:18

цвет ещё раз Но это же уже быстро нужно

00:51:20

найти цвет нажать четыре точки найти

00:51:23

смотрите как классно Вот вы назвали

00:51:24

папочку теперь минимум Папочка вот синий

00:51:27

цвет танс ещё где-то синий цвет Конечно

00:51:30

вот он опять четыре точки опять ищу своё

00:51:33

имя опять синий цвет

00:51:36

НС А вот какой-то цвет непонятный я беру

00:51:39

на него снайперский прицел нажимаю и

00:51:42

выделяю А это иконка линки дна Всё тогда

00:51:45

отбой может ещё вы найдёте цвет

00:51:47

покопайтесь так это линки дын была это

00:51:50

что за цвет так что-то он выделил непонятно что

00:51:56

а вот этот оттенок цвета синего Ну это

00:51:58

не тот Да понятно всё ясно Ну а зачем мы

00:52:02

это сделали ну нам нужно

00:52:03

[музыка]

00:52:05

разобраться может ещё какой-то нет Всё я

00:52:07

понял всё это не тот А это какой-то

00:52:09

голубой Ну давайте глянем где голубой

00:52:11

находится А всё понял это иконка вот он

00:52:15

всё Вопросов нет теперь я уверен всё

00:52:18

точно три цвета синего

00:52:20

сде Не забудьте потом кнуть в пустое

00:52:22

место и навести

00:52:24

порядок

00:52:29

в по такой логике прекрасно разобрали

00:52:32

что дальше нужно делать нам нужно каждый

00:52:34

из элементов создать стиль и наложить

00:52:38

если есть Уникальны то приходится больше

00:52:40

их делать А когда есть похожие элементы

00:52:42

то мы просто быстрее

00:52:44

оптимизируем Давайте немножко этой

00:52:46

рутиной займёмся хотелось бы чтобы

00:52:54

мы ВС Понятно А что насчёт вот этих

00:52:57

странных элементов Ну например вот вы

00:52:59

сделали белый цвет с прозрачностью

00:53:03

24% есть ещё

00:53:06

эффект можно сделать из него стиль

00:53:08

Нажмите на четыре

00:53:10

точки нажмите всё также создать плюсиком

00:53:14

но не забудьте Мы ещё раз работаем с

00:53:16

вами вкладок не перемен не я вижу кто-то

00:53:19

создал переменных А мы владо нажимаем не

00:53:24

затесь

00:53:26

и вот здесь называем тот самый элемент

00:53:28

как его назвать Ну например БГ потом

00:53:31

написать хотите в процентах 25% я скажу

00:53:34

это БГ 25% Я укг немножко значение вот

00:53:37

здесь

00:53:39

25 видите он поддерживает прозрачность

00:53:42

белого цвета Если бы вы сделали Сейчас

00:53:44

слой не 100% А 25 то мы бы не смогли

00:53:48

создать с вами стиль белый

00:53:50

полупрозрачный напишу опять Макс внутри

00:53:53

чтобы не

00:53:54

потерять

00:53:57

естественно вот у меня этот ста готов 25

00:54:00

я его себе в папочку

00:54:02

запиваю думаю в логике дальше Понятно

00:54:05

внутри папочки Макси можно создать ещ

00:54:07

папочки и одна Папочка бы называлась

00:54:09

например возьму

00:54:11

элемента

00:54:13

чере

00:54:15

Эмен и он их объединит истим

00:54:24

на

00:54:25

Я пока не знаю Если хотите чтобы знали

00:54:28

вы могли много папок делать внутри

00:54:29

сколько угодно чтобы лишь бы был порядок

00:54:31

и вы не

00:54:33

потерялись что дальше Ну 25 сделали Всё

00:54:36

понятно теперь для каждой

00:54:54

плашечный стиль надо ничего не поделать

00:54:57

четыре точки плюсик не переменная а

00:55:02

стиль не забыли Да если вы создали

00:55:05

Создайте новый стиль ес если проблема

00:55:08

что вы создали переменную Создайте новый

00:55:10

стиль Я назову Это то же самое БГ но

00:55:13

например Здесь я скажу что может быть

00:55:15

это какой-то Пинк типа розовый для себя

00:55:17

опять для нас чтобы мы не запутались 33

00:55:20

О'кей может прозрачность покажете Ну

00:55:23

можно сказать хорошо там 35

00:55:25

это уже как вам нравится

00:55:29

35 промахнулся не создал ещё раз да бг

00:55:35

пин для себя сказал что Это Макс написал

00:55:39

35 или Да тире 35 там и нажали Create

00:55:44

Style готово потом перешли опять в

00:55:47

папочку нашу нашли этот Пинг перенесли в

00:55:50

папочку ничего

00:55:51

[музыка]

00:55:54

нового что понимаете сейчас опять

00:55:57

происходит рутина Но это рутина которая

00:55:59

выиграет вам огромное количество времени

00:56:02

чем больше уникальных элементов тем

00:56:04

больше приходится создавать стилей но у

00:56:06

нас такой макет непростой Я бы хотел

00:56:08

чтобы это от точили и мы пока

00:56:10

рассмотрели только одно свойство

00:56:12

свойство цвета Посмотрите момент

00:56:15

интересный Создайте отдельно себе

00:56:17

прямоугольник просто в любом

00:56:19

месте Значит мы можем четыре точки

00:56:22

нажать и применить цвет это мы уже с

00:56:23

вами разобрались наме возьму у Миланы

00:56:26

какой-нибудь цвет вот он но Вы точно

00:56:29

также можете применить цвет для обводки

00:56:32

четыре

00:56:34

точки понимаете момент что Он позволяет

00:56:37

применять цвет и к обводке это

00:56:39

универсальный цвет и заливка и обводка

00:56:42

можно ли делать Градиент для стиля Да

00:56:46

всё тоже самое то есть по сути

00:56:48

посмотрите что происходит у нас есть

00:56:50

цвет и какие-то е допустим

00:56:53

слои

00:56:55

для

00:56:58

те он вс превращает в один стиль но в

00:57:01

этом У нас стиле

00:57:03

внутрянка Давайте здесь в этом стиле

00:57:05

внутрянки все слои есть неважно Градиент

00:57:08

там есть какое-то

00:57:10

свечение радиально в градиенте всё это

00:57:13

здесь если потребуется можно удалить

00:57:16

откорректировать Ну ничего нового тут

00:57:23

Да

00:57:26

цвет Ну так получилось там не знаю

00:57:28

зелёный например А обводка у вас жёлтая

00:57:31

допустим Ну так и получилась история

00:57:35

что вам этот цвет нужен но нужен

00:57:38

немножко оттенок его знакомая история

00:57:40

здесь с красным оттенок нужен что делать

00:57:44

лайфхак значит сейчас элементы связаны и

00:57:47

вот справа от стиля написан замочек

00:57:50

замочек означает сломать стиль но

00:57:53

выплюнуть свет

00:57:55

То есть он сейчас этот цвет выгрузил но

00:57:58

теперь он не связан с нашим макетом Я же

00:58:01

сказал нужен оттенок поэтому я его

00:58:02

сломал внс коррективы в этом оттенке и

00:58:05

создал новый стиль Ну вот так это

00:58:08

работает быстрей что-то ещё есть минуси

00:58:11

просто убирает элемент а замочек его

00:58:14

ломает оставляет отдельный цвет если там

00:58:16

в этом цвете будет

00:58:23

500000 уже в общем не найдём то значит

00:58:26

это всё вып все цвета которые там есть в

00:58:29

прозрачность

00:58:31

хорошо с цветом разобрались копаемся

00:58:35

дальше то есть тут всё легко Всё понятно

00:58:37

просто дай больше времени посиди настрой

00:58:40

примени нужно типа оптимизировать чтобы

00:58:42

не было у нас 500 цветов серого вдруг

00:58:44

так случайно получилось вдруг в одном

00:58:46

случа можно ещё спросить А скажи

00:58:49

пожалуйста ещё раз я вот пробую

00:58:51

перенести стиль который создала в свою

00:58:54

папочку и у меня не получается это

00:58:56

что-то у меня или я что-то не нажимаю

00:58:58

какую-то кнопку А покажи смотри ты

00:59:01

сейчас как у меня Да вот здесь стиль

00:59:03

берёшь да дада да да Вот я получается

00:59:06

Нажала Ну вот на прямоугольник Я создала

00:59:09

я беру Ну вот создала уже стиль и в этой

00:59:13

библиотеке я пытаюсь перенести его в

00:59:16

папочку Но когда я на него нажимаю у

00:59:18

меня исчезает вобще полною это

00:59:23

окно ла на него через четыре точки тут

00:59:27

ты перенести ничего не сможешь это

00:59:28

просто

00:59:30

выбор ты перенести можешь только если

00:59:32

кликнул в пустое

00:59:34

место вот тут в свойствах только здесь

00:59:37

можно переносить

00:59:39

а потому что в настройках элементы ты

00:59:42

только можешь выбирать элементы А в

00:59:45

свойствах Когда кликнул в пустое место

00:59:47

тут уже занимаешься порядке Угу А всё и

00:59:52

получается только в пустое место нажать

00:59:54

и там

00:59:56

уже вс я поняла фа всего идея когда вы

01:00:00

нажимаете пустое место настройку всего

01:00:02

файлы то есть настройка фона настройка

01:00:04

стилей настройка ещё других

01:00:06

элементов хорошо спасибо

01:00:09

большое пожа т с цветами мы разобрались

01:00:13

мы сейчас сказали важный момент что мы

01:00:15

можем оптимизировать и мы можем

01:00:16

проверить что вдруг случайно Получи что

01:00:19

тут цвет серый е0 что-то там е а вот тут

01:00:22

у не а D5 одно и тоже так когда вы

01:00:26

сейчас создадите стиль и вы увидите что

01:00:28

А что стоит вам создавать ещё три

01:00:30

дополнительных серых оттенка которые

01:00:32

одинаковые или это одно и то же это одно

01:00:35

и тоже

01:00:37

хорошо второй момент мы сказали про

01:00:40

цвета что насчёт эффектов у нас же

01:00:43

эффект есть например вот этого матового

01:00:45

стекла мы пока на него только сделали

01:00:47

розовый прозрачный фон А вот есть

01:00:50

матовое стекло background BL тут есть

01:00:53

тоже четыре точки

01:00:55

то у нас сечас никаких эффектов нет

01:00:58

поэтому

01:00:59

дырках нету не надо кнопку нажимать

01:01:02

нажимаем

01:01:03

плюсик тут нету разделений став и

01:01:06

переменных есть только стайл только для

01:01:08

стайла у нас эффект как назовём Обычно я

01:01:12

называю тоже само например это является

01:01:14

BL могу лишь уточнить сказать что это не

01:01:17

знаю BL для

01:01:23

ни

01:01:26

Он покажет ещ дополнительные Ну то есть

01:01:28

то что вы сечас настраивали Вдруг вы

01:01:30

хотите откорректировать обычно ВС

01:01:34

Но заметьте как это выглядит теперь

01:01:37

левой клавише мыши в пустое место

01:01:39

нажимайте сначала идут цвета наши

01:01:41

папочек много низ листайте вниз вниз в

01:01:44

конце самом размещаются все эффекты вот

01:01:47

они есть тоже самое можно

01:01:53

метрия тоже самое Поэтому нужно будет

01:01:56

наложить где-нибудь стекло матовое вы

01:01:58

это легко уже сделаете

01:02:01

хорошо немножко странного мы сейчас

01:02:05

сделаем лишь чтобы запомнить Возьмите

01:02:07

свой фрейм помните мы говорили про сетки

01:02:09

создания Нажмите на фрейме своём

01:02:15

плюсик гипотетически Вам эта сетка

01:02:17

пригодилась и вы хотите использовать на

01:02:20

всех своих 15 страниц сайта там тоже

01:02:23

есть то

01:02:26

че

01:02:27

точки

01:02:29

плюсик и назвали

01:02:32

допустим Ну не

01:02:35

знаю типа как сетка неважно там есть

01:02:38

тоже настройка тоже

01:02:41

жим Style и кликаем в пустое место опять

01:02:46

видим сначала идут у нас всегда цвета

01:02:47

вниз вни вниз листайте идт У нас эффект

01:02:51

а ниже ваша сеточка идт

01:02:55

какой-то

01:02:56

фрейм вы на фрейм четыре точки Вы можете

01:03:00

применять ваши сеточки очень удобно не

01:03:02

надо заново создавать не надо что-то

01:03:04

Копировать фрейм копировать через

01:03:08

стили Я возможно не сказал хотел бы

01:03:10

чтобы вы запомнили сеткой мы пока ещё не

01:03:13

сильно работали да вообще в целом Не

01:03:15

вижу смысла даже сейчас работать сеткой

01:03:18

на обучение по фигме но как отключать

01:03:21

сетку стоит

01:03:23

запомнить мо дм способами Первое Конечно

01:03:27

когда вы применили допустим стиль или не

01:03:30

только стиль можно

01:03:31

глазик но Поверьте это всё дичь ни в

01:03:35

коем случае минуси - это не решение

01:03:37

минуси - это Убрать сетку лучший вариант

01:03:40

запомните

01:03:42

Shift сетка переводится SH Включает

01:03:45

выключает сетку это очень удобно чтобы

01:03:47

не мешало

01:03:51

назать ВМ для ну давайте хорошо я Shift

01:03:56

G просто скрою чтобы нам это не

01:03:59

мешало есть что-то ещё осталось совсем

01:04:03

чуть-чуть осталось только

01:04:06

гарнитура Возьмите с Любой карточки А

01:04:09

раз мы с вами говорили про карточку

01:04:11

жёлтую Давайте здесь и возьмём Вот вы

01:04:14

кликнули например на Royal package У нас

01:04:17

есть mancer Regular 13 высота строки

01:04:20

посмотрите внимательно на все

01:04:23

свойства если мы нажмём четыре

01:04:27

точки

01:04:28

плюсик мы видим опять название допустим

01:04:32

скажем это какой-то заголовок не знаю H4

01:04:36

напишем Пускай заголовок

01:04:38

четвёртый нажмите Show мо посмотрите что

01:04:42

он сейчас спрячет и мы не сможем

01:04:45

редактировать гарнитуру начертание

01:04:48

размер высота строки межбуквенный

01:04:51

интервал

01:04:53

и параграфа

01:04:55

отступ

01:04:58

нажмите чувствуете проблему Вы можете

01:05:00

выравнивать текст по левой границе по

01:05:02

вертикали Вы можете нажать на три точки

01:05:05

но все основные свойства спрятаны имейте

01:05:08

в виду стиль Когда вы создали он

01:05:11

зафиксирован и нам его нельзя менять в

01:05:13

этом-то и смысл чтобы мы могли применить

01:05:16

на остальные объекты сумам нужно

01:05:18

применять вот мы сечас делали H4

01:05:21

понятное дело логично все остальные зало

01:05:24

в той же самой рубрике сделать

01:05:27

H4 и не возвращаться к этому

01:05:30

вопросу кликни пустое

01:05:33

место Посмотрите текстовый стиль идёт

01:05:35

выше цвета Вот они и подсказка букво

01:05:40

идут Молодцы что вижу тут много всего

01:05:42

дописывается смотрите что ещё написано

01:05:45

размер наклонный СШ высота строки тоже

01:05:49

интересно где-то 100 Вите гдето АВ

01:05:51

где-то 40 где-то процен Если вы укажете

01:05:56

получается для Всех элементов придется

01:05:58

назначать потому что мы не можем взять

01:05:59

Вот этот стиль сюда применить потому что

01:06:01

он себо и у него размер другой Да

01:06:04

пришлось бы создать новый стиль Ну так

01:06:07

это выглядит и потрите момент допустим я

01:06:09

создам новый стиль плюсик Я назову его

01:06:12

не знаю как угодно Назовите там и пускай

01:06:15

это будет цена

01:06:23

пра это используется и удобно когда вы

01:06:26

его скопировали допустим сломать Да

01:06:28

сломать замочком чтобы вот этот текст

01:06:31

выплюнул с теми же самыми размерами и вы

01:06:33

внесли те коррективы которые нужны а

01:06:34

потом создали новый стиль это чтобы вы

01:06:36

опять напоминание замочек ломать Иногда

01:06:39

помогает Но все элементы сейчас здесь

01:06:41

будут закреплены когда мы создадим стили

01:06:43

Если вы видите что логика нижнего

01:06:46

элемента вот этого Допустим я его сломаю

01:06:48

13 и верхнего 13

01:06:50

однотипной тоже так значит и этот

01:06:53

элемент и тот должны быть в одном стиле

01:06:55

сделаны там и4 например мы говорим это

01:06:57

же

01:06:58

оптимизация всё ради одного вопроса себе

01:07:01

задавайте всегда если сейчас клиент

01:07:04

придёт и скажет внеси коррективы в этот

01:07:06

элемент я смогу ли я это изменить в

01:07:08

одном

01:07:09

месте если ты если вы скажете что не

01:07:12

смогу но это не сильно повлияет на макет

01:07:15

ничего страшного А если вы скажете не

01:07:18

смогу и придётся всё менять это очень

01:07:20

страшно лучше всё это прописать лучше

01:07:23

этим заняться Вроде вы сейчас думаете

01:07:25

так это же мне надо минут 15-20

01:07:27

настраивать всё да но вы сейчас говорите

01:07:29

О одном макете а представьте таких

01:07:32

страниц 15-20 чувствуете боль ужасная

01:07:35

боль Клиент говорит Замени мне гарнитуру

01:07:37

Не нравится мне Вы же только что видели

01:07:39

мы покрасили только немножко цвет и надо

01:07:41

было всё равно менять время тратить но

01:07:43

один раз настроив эти элементы это идёт

01:07:46

оптимизация Поэтому вот мы сейчас

01:07:48

применили Стиль на текст в виде

01:07:50

заголовка Да Ой в виде стиля текста

01:07:54

можно было также и на этот элемент

01:07:57

применить цвет мы с вами например Ну не

01:08:00

знаю не создали цвет хорошо у у нас

01:08:02

чёрный цвет мы нажали четыре точки мы

01:08:05

нажали создать стиль и мы сказали что

01:08:08

это стиль для текста Ну я напишу просто

01:08:10

Для текста текст б хотя не обязательно

01:08:15

было писать текст Black и где-то ещё мы

01:08:17

сделали бы 100% с вами а это текст

01:08:22

White

01:08:26

Это же круто Всё мы теперь спокойно

01:08:30

можем все эти элементы кроме серого да

01:08:32

Там же ещё третий получился можем легко

01:08:36

применять и оптимизировано клиент

01:08:39

приходит говори что-то заменить нужно но

01:08:41

мы в одном месте Заходим в настройки

01:08:43

Нужно больше сделать сделали

01:08:45

16 везде

01:08:52

16 и кликнув в пустое место Вы сейчас

01:08:55

это всё увидели все наши стили и да

01:08:57

папочки можно создавать и в тексте и

01:08:59

папочки можно создавать в эффектах и

01:09:01

даже в сетках если потребуется в любом

01:09:04

месте можно папки

01:09:08

создать что-то Тут ещё есть Ну на самом

01:09:11

деле нет как бы я на вашем месте этот

01:09:14

макет то есть эта домашка будет

01:09:16

превратить пока в

01:09:18

номы сес Будем рассматривать что такое

01:09:21

пере как было бы че

01:09:24

смотреть самые повторяющиеся элементы и

01:09:26

начинать с чего-то одного например

01:09:28

начните с гарнитур или начните с цвета

01:09:32

взяли гарнитуры все переименовали

01:09:34

сделали им стили создали папочки

01:09:36

настроили аккуратный порядок готово

01:09:38

перешли в цвет назначили все цвета

01:09:41

попытались оптимизировать создали

01:09:43

папочки готово перешли на эффекты

01:09:46

посмотрели все эффекты перешли на сетка

01:09:49

если требуется и все элементы должны

01:09:51

быть

01:09:52

назначены хорошо вроде бы как стало

01:09:56

понятнее но момент произошел дальше

01:09:58

раньше всё делали стилями всё было

01:10:01

хорошо всё было спокойно всё было

01:10:03

понятно потом в один прекрасный день

01:10:06

приходит Фима и говорит ещё есть у нас

01:10:09

переменные Фух Что такое

01:10:12

переменные начнём пожалуй с того что

01:10:15

когда кто-то создавал сейчас смее че точ

01:10:20

нажима лю бы вот вот

01:10:26

на англиском И когда вы созда переменные

01:10:29

они выглядят как квадратики стили

01:10:31

выглядят как кружки А переменные как

01:10:33

квадратики Я лишь Сейчас наверно

01:10:36

подчеркну вам что вот это

01:10:38

перемен

01:10:40

напоминание что за перемены как с ними

01:10:43

жить есть коллекция назовём это-то

01:10:46

похоже

01:10:52

НАТО

01:10:55

дальше название вотрите я сечас что

01:10:57

сделал Я сделал че точки на цвет Да у

01:10:59

нас цвет Мы обычно делали стилем до

01:11:01

этого вот он се а сейчас я решил его

01:11:04

превратить в переменную назвал его точно

01:11:06

также назвал назову

01:11:11

наме

01:11:14

пере первое что вы заметили появился

01:11:22

квадратик тоже квадратики и да Можно

01:11:25

перейти в настройки второе что вы

01:11:27

заметили когда закрепилась переменная

01:11:30

слева от квадратика в квадратной рамочке

01:11:33

текст написан заметьте в стилях был

01:11:36

шарик с текстом А в переменных квадратик

01:11:39

с текстом Ох хорошо Пока непонятно зачем

01:11:45

Да это спроектировали Но мы сейчас

01:11:47

дальше продолжаем А где хранятся все

01:11:51

переменные стое ме видели ли а

01:11:54

переменные хранятся отдельно локальные

01:11:56

переменные видите настройка

01:12:00

нажмите вы увидите теперь все переменные

01:12:03

это окошко можно переносить можно е

01:12:04

растягивать как угодно вот они название

01:12:08

цвет Обратите внимание Когда вы создали

01:12:10

цвет слева

01:12:22

иконой

01:12:24

Новую

01:12:26

колонку Если мы с вами

01:12:28

Семы не в обучающей версии сидим поэтому

01:12:31

это заблокировано Ну и ничего опять

01:12:35

нажимаю на перемен Зачем вообще эта

01:12:37

вторая колонка

01:12:39

нужна сейчас сломаю вам мозг Но скажем

01:12:42

так что если на переменные если она

01:12:45

находится допустим на фиолетовом

01:12:52

фоне можем это сделать как некое условие

01:12:55

нам это не нужно сейчас нам нужно просто

01:12:57

понять зачем нужны переменные для нас

01:12:59

как мы можем их сегодня использовать В

01:13:01

чём смысл поэтому мы пока сказали где

01:13:03

это находится слева что вы видите есть

01:13:05

коллекции коллекции можно создавать

01:13:07

коллекции - это что-то большое

01:13:09

гигантская Папочка обычно не создают А

01:13:12

вот чуть ниже - это фильтры фильтр

01:13:14

сейчас выбрано всё показано все

01:13:16

переменные мы можем фильтр свой создать

01:13:19

давайте это сделаем Например я создал BG

01:13:23

гй

01:13:24

значит нажмите правой клавишей и вот

01:13:27

написано создать группу как папочку мы

01:13:30

создавали Просто когда мы создадим

01:13:31

группу появится слева в списке

01:13:34

отредактировать переменную

01:13:35

продублировать переменную И удалить

01:13:37

переменную я говорю создать группу Вот

01:13:40

вы видите появилась группа Назовите его

01:13:43

двойным учком допустим Не знаю я

01:13:52

имя тепер все переменные и в Папочка

01:13:56

собраны По отдельности Ну ваши цвета

01:13:58

которые взяли Видите вот Мак о Милана о

01:14:01

у всех по одному потому что вы

01:14:02

Разместили в папочке

01:14:05

Окей Хорошо теперь начинается фундамент

01:14:09

мы сказали просто как работает Можно

01:14:11

даже создать здесь переменную есть

01:14:12

несколько разновидностей переменных мы

01:14:14

Пока говорим про первую переменную

01:14:16

цвет и вот Мы

01:14:18

создали ма что

01:14:20

шет

01:14:22

как

01:14:24

Давайте здесь допустим покажу как

01:14:26

лучше создать серый цвет фоновый как

01:14:31

стиль напишу даже специально ста вот

01:14:35

слева или создать серый цвет как

01:14:37

переменную есть проблема самая очевидная

01:14:41

проблема переменная не может быть

01:14:44

градиентом это легко понять кликнув в

01:14:47

пустое место открыв локальные переменные

01:14:49

И найдя свою переменную нажмите её

01:14:52

редактировать

01:14:53

вы увидите цвет кликнув на цвет вы не

01:14:57

увидите никаких градиентов вы увидите

01:15:00

только

01:15:01

цвет значит если мы говорим по

01:15:03

прозрачность ещё более-менее можно это

01:15:05

настроить вот оно

01:15:07

написано то когда мы говорим про

01:15:11

градиенты различные тоже не работает

01:15:14

история

01:15:15

значит зачем это вообще было создано для

01:15:19

этого я хочу вам показать кое-что другое

01:15:22

что насчёт кода

01:15:25

Есть момент такой сейчас я открою найду

01:15:28

только мне казалось проект открытый ни

01:15:30

один проект не открыт О'кей так понятно

01:15:35

Ну держитесь

01:15:38

тогда надо се сейчас найти

01:15:40

[музыка]

01:15:48

погодите Ну наверное

01:15:50

тут откроем откроем что

01:15:54

откроем CSS

01:16:00

[музыка]

01:16:05

фа Не ну допустим нет Ладно надо

01:16:09

конкретный проект найти вообще в фигме

01:16:12

тоже можно это увидеть Если я сейчас

01:16:15

нажму режим разработчика сверху

01:16:17

справа выберу наш элемент я увижу

01:16:20

переменную смотрите также в коде будет

01:16:24

название и вот этот

01:16:26

цвет коде перемен это тоже самое как для

01:16:30

Насти чтобы присвоить элементу значения

01:16:32

в одном месте написать что это

01:16:34

переменная равно серой а потом эту

01:16:37

переменную везде разместить меня только

01:16:39

в одном месте серый на белый везде

01:16:41

меняется белый вот в этом мыс со стороны

01:16:43

кода стили для наших макетов хороши а

01:16:46

для

01:16:50

[музыка]

01:16:52

разра

01:16:53

узы виде переменных Это

01:16:55

хорошо Но для нас немножко

01:16:58

сложно значит я советую так делать если

01:17:02

есть только

01:17:03

цвет например Это в основном текст

01:17:06

создавайте из цвета переменную

01:17:10

если есть

01:17:12

градиенты создавайте его

01:17:15

стилем смотрим весь макет чтобы я

01:17:18

пальцем тыкнул все эти текстовые чный

01:17:21

белый цвет перемен Эмен переменная

01:17:24

переменная этого чёрного цвета

01:17:27

переменная это серого переменного белого

01:17:29

цвета переменный чёрный оттенок серого

01:17:33

синий жёлтый Там какой глухой голубой

01:17:38

серый это всё переменно у нас нету здесь

01:17:40

градиента всё

01:17:42

хорошо хорошо понятно То есть получается

01:17:45

Ну почти тоже самое но немножко другое

01:17:49

есть ли е интересные настройки

01:17:52

есть

01:17:54

нашли себя например Нажали на настройки

01:17:56

разбираемся Значит мы можем

01:17:58

переименовать мы можем добавить описание

01:18:01

мы

01:18:02

можем добавить изменить

01:18:05

цвет что дальше а вот тут интересно

01:18:08

Представьте что вы теперь можете

01:18:09

настроить что эта переменная цвета

01:18:12

накладывается только на текст а это

01:18:15

только на цвет Круто Вот и написано это

01:18:19

все свойства

01:18:21

вклю рабо л он говорит что давайте так

01:18:26

выключу первое свойство л Везде где есть

01:18:30

л мы можем наложить этот серый цвет а

01:18:34

внутри сказано для фрейма можно наложить

01:18:36

Фил для фигуры Шей и Для текста Возможно

01:18:40

вы бы хотели чтобы серый цвет никогда не

01:18:42

накладывал на цвет текста потому что это

01:18:45

нехорошо поэтому можно сделать что это

01:18:48

толь это толь Нони

01:18:51

не обводка чуть ниже цвет для эффекта

01:18:55

цвет для эффекта поэтому я оставил

01:18:58

только серый цвет только для фрейма и

01:19:00

шейпа всё посмотрите как это сейчас всё

01:19:03

выглядит нажимаю на вот этот

01:19:05

прямоугольник который был в

01:19:07

стиле четыре

01:19:09

точки и нахожу все наши стили Ну те где

01:19:14

настроили вы конечно вот у меня есть БГ

01:19:17

как я их создавал Работают но как только

01:19:20

я перейду на текст и нажму тоже са точки

01:19:24

вы меня здесь не увидите меня нету

01:19:27

потому что в настройках я сказал Для

01:19:28

текста тебя применять нельзя видь

01:19:31

определённое удобство есть то теперь Вы

01:19:33

точно не запутай вы не будете открывать

01:19:35

Вот это кошмарное Полотно искать в этих

01:19:38

шариках роликах где же этот текст есть

01:19:42

Вы теперь чётко могли через переменную

01:19:44

найти нужный

01:19:46

элемент мы сечас сказали про цвет

01:19:50

который мы назначили имы сза всё можно

01:19:53

быть сделать переменно Но если вдруг в

01:19:55

одном случае был бы

01:19:57

Градиент Я бы автоматом из него сразу же

01:20:00

создавал смотрите он не даёт видите

01:20:02

создать он говорит только один цвет

01:20:04

взять и поэтому автоматом создаётся

01:20:06

стиль это оптимизация в любом случае

01:20:09

даже нельзя Если сделать переменную нам

01:20:11

от этого лучше не станет лучше сделать и

01:20:14

стиль и переменную чем не сделать вообще

01:20:17

ничего запомнили немножко сложно понимаю

01:20:21

е раз цвета которые здесь видите можно

01:20:24

сделать здесь переменной и также можно

01:20:27

создать их в папочки разделить их там

01:20:29

внутри папочек в локальных переменных

01:20:32

здесь спокойно всё можно это тоже самое

01:20:35

провернуть раз но если есть градиенты

01:20:39

стиль

01:20:41

продолжаем настройка гарнитуры размер

01:20:45

пока что мы не будем говорить но

01:20:47

гарнитура начертание - это стиль эффекты

01:20:52

тени эффекты размытия это стиль сетка -

01:20:56

это стиль стиль никуда не ул просто

01:20:59

добавилось новое вводное для

01:21:00

разработчиков и для нас чтобы легче было

01:21:02

оптимизировать

01:21:04

макет

01:21:06

Окей что ещё является переменно Я нажму

01:21:09

вот локальный переменный переменный он

01:21:13

нам подсказку даёт вы можете создать

01:21:15

переменную

01:21:17

размера давайте сделаем

01:21:19

Number Я назову этот размер

01:21:24

размер карточки карто и размер этой

01:21:28

карточки будет я пока Рандом на 10

01:21:31

напишу но хочу чтобы карточка была 280

01:21:37

280 заметьте что связано с переменной

01:21:41

вот этот ромбик с чёрной точкой

01:21:43

внутри МК

01:21:46

шестиугольник

01:21:51

запомни как хэштег

01:21:55

выглядит Можно также в папочку запихнуть

01:21:57

к себе Ничего нового нету перенесли

01:22:00

Готово

01:22:02

Вот настройки та же самая история со

01:22:05

значением но ниже просто настройки для

01:22:08

чего выключаю всё смотрите только могу

01:22:11

этот размер применять для

01:22:15

скругления только для ширины и высоты

01:22:19

только для отступов влейте ещё не прошли

01:22:22

только

01:22:24

для сейчас запутай ись заменить текст

01:22:28

внутри текстового блока только для

01:22:32

обводки только для прозрачности и для

01:22:36

эффекта размер эффекта какой вы делаете

01:22:39

Пока что сделаем Просто ширину и высоту

01:22:43

280 закрыл то есть кликнув смотрите где

01:22:47

это появляется кликнув на

01:22:50

карточку 280 вот он 281 ширина

01:22:54

появляется тот самый шестиугольник

01:22:57

нажимаем и в этом списке вы находите

01:23:00

свой размер Вот он

01:23:03

кар мы закрепили его всё А теперь он

01:23:06

всегда 280 красота получается Да взял

01:23:09

все четыре элемента и сказал Они все

01:23:12

будут не больше 280 если штука такая

01:23:16

произошла что-то

01:23:18

поехало вероятнее всего может

01:23:21

случайно

01:23:26

круто да размер зафиксировали это

01:23:29

недостаточно Можем ли мы на что-то ещё

01:23:31

влиять А можно ли как-то по-другому

01:23:33

создать не отдельно я на всякий случай

01:23:35

проверю писали ли вы что-то

01:23:38

писали хорошо начнём с че-то попроще

01:23:41

Допустим я решил перейти вот к этому

01:23:46

тексту с

01:23:51

для как-то повлиять значит иногда

01:23:54

перемен появляется когда вы нажимаете

01:23:56

правой клавишей мыши к сожалению в виде

01:23:59

текста размер переменную нельзя загнать

01:24:02

Почему так сделала фиг она понимает что

01:24:06

это странно если мы создаём стиль где

01:24:09

закреплена слушайте за мной да гарнитура

01:24:12

жирность размер то зачем ещё разделять

01:24:15

отдельное размер для гарнитуры это

01:24:17

немножко некорректно странно потому что

01:24:20

ну оно связано уже поэтому не надо было

01:24:23

разделять поэтому они нам не дают менять

01:24:26

может мы можем зафиксировать как-то

01:24:28

высоту строки правой клавише нажима

01:24:30

видите нет может быть ширину Нет Нет

01:24:33

Ничего здесь нельзя сделать но всё равно

01:24:36

значок почему-то есть переменно здесь

01:24:38

сложности есть Значит мы с вами прошли

01:24:41

Что такое цифры и случайным образом мы

01:24:44

даже коснулись в самих

01:24:48

[музыка]

01:24:51

цифрах Мите левой клавишей мыши Откройте

01:24:54

локальную переменную нажмите создать

01:24:57

переменную

01:24:59

выберите не Number теперь А строку стрин

01:25:03

Это третья переменная которая может быть

01:25:06

стрин букво Т написана и я напишу здесь

01:25:10

пока такое слово как это цена Бред

01:25:14

конечно цена А тут конкретно цена будет

01:25:16

у нас допустим

01:25:20

4.160 долларов

01:25:24

перехожу в

01:25:26

настройки он сейчас скажет что если я

01:25:29

примен то он заменит на этот текст будет

01:25:32

текст

01:25:33

4160 и поэтому нам больше ничего не

01:25:35

позволяет

01:25:38

сделать Возьмите

01:25:41

на любой текст как мы сейчас ну я

01:25:45

говорил про Total

01:25:47

inel пропускай давай вот эта переменная

01:25:51

как раз и говорит Если вы даже выберете

01:25:53

сво свою цифру помните мы говорили

01:25:56

280 Ну лучше Возьмите на доллары нажмите

01:26:00

46 он заменяет видите и написано здесь

01:26:04

внизу в свойствах вот какую переменную

01:26:06

мы применили Я могу даже её сломать и

01:26:09

опять назначить А если вы выберете своё

01:26:11

число он тоже превратит в число Ну

01:26:15

понимаем это немножко не то сае это

01:26:21

для кус остаётся в этой логике Да Макс

01:26:24

зачем Да какой смысл в этом всём Я вижу

01:26:29

только один

01:26:32

смысл либо это что-то шаблонное чтобы

01:26:35

быстрее записать везде Иван

01:26:37

Робинсон второе либо Есть какие-то

01:26:40

условия где если то вот это а иначе Вот

01:26:45

это чтобы создать некий интерактивный

01:26:47

Прототип на который мы нажимаем кликаем

01:26:50

и что-то с ним происходит Например если

01:26:53

я нажимаю появляется слово Иван А если я

01:26:56

ещ раз нажимаю написано неверно

01:26:58

введённое имя вот что-то для таких

01:27:02

операций поэтому сразу скажу вряд ли вы

01:27:04

будете это делать знаете что это такое

01:27:06

но вряд ли мы будем создавать как строку

01:27:09

и остался последний

01:27:11

элемент

01:27:13

бу булевые операции это И

01:27:21

вот настройки увидите что он сейчас у

01:27:24

нас стандартно включен или выключен я

01:27:26

хочу сказать что он включен допустим

01:27:29

Давайте назовём это интересная штука

01:27:31

будет просто сейчас вы Пойте но нужно

01:27:33

это делать опять ответ нет это немножко

01:27:36

сложнее для других операций давайте мы

01:27:38

скажем что в данном случае здесь у нас

01:27:42

иконки будут пропадать Я напишу что это

01:27:45

ions просто какие-то

01:27:48

иконки всё перекину себе в ма туда

01:27:52

чтоб не потеряли Вот он у

01:27:55

нас Я хочу чтобы вот этот элемент справо

01:28:00

он

01:28:02

выключался где применить э булеву

01:28:04

операцию она применяется только на леер

01:28:07

на

01:28:08

слой это очень сложно догадаться нажмите

01:28:11

правой клавишей на

01:28:14

глазик видите теперь вот ваши булевые

01:28:18

операции я сейчас выберу Бу Вот иконки

01:28:22

они будут потому что сейчас в вашей

01:28:25

логике у вас если показано TR то они

01:28:28

будут Но если будет

01:28:30

ЛС то элемент должен спрятаться Почему

01:28:34

не спрятался А я не знаю а что это за

01:28:37

штука а что-то что-то сломалось Я

01:28:40

наверно неправильно наложил ещё раз

01:28:44

сейчас Должно всё

01:28:46

заработать Вот видите нету

01:28:51

Есть Странно никто же не будет

01:28:53

переключать эти элементы в данном

01:28:54

интерфейсе но Представьте опять есть

01:28:56

некое условие что А если мы зашли Нажали

01:29:01

на аккаунт допустим эти элементы

01:29:04

появились А если мы нажали в другое

01:29:07

место то он пропал мы сейчас говорим что

01:29:09

это какая-то связь какая-то

01:29:10

функциональная настройка И вот она здесь

01:29:13

есть в переменных Но это всё сложно Я

01:29:16

лишь показал что это переменная Это

01:29:18

новая функция И что вам нужно Здесь

01:29:20

самое главное запомнить

01:29:22

Это две вещи мы можем присваивать цвет

01:29:25

мы можем как переменную мы можем

01:29:27

присваивать как

01:29:28

значение и от вас хочу в этой работе

01:29:31

первое сказал сделать стили но

01:29:33

правильнее было бы так пробега теперь с

01:29:36

нуля потом пойдём на перерыв То есть

01:29:40

если бы я сейчас начинал с нуля делать

01:29:42

первое я начал бы создавать переменную

01:29:44

цвета по каждому цвету текста

01:29:49

фону может

01:29:50

быто будет ну вряд ли ноно я создам все

01:29:54

переменные для всех цветов создам

01:29:56

аккуратную папочку где-то я обнаружу что

01:29:59

нужно создать стили например

01:30:01

размытый элемент - это стиль если здесь

01:30:04

есть сетка У нас её нету Значит не буду

01:30:06

делать стиль для сетки и создам стиль

01:30:09

для всего текста опять настрою в Папочка

01:30:13

но есть ещё один момент настроить можно

01:30:16

и разме мы сказали перемен ме что бым

01:30:21

сориентироваться где эти размеры уместны

01:30:24

мы сказали Для текста размер менять не

01:30:25

надо он станет стилем О'кей Здесь всё

01:30:28

закрыто Если бы у нас этот элемент был

01:30:30

Алей аутом А мы его ещё не прошли то мы

01:30:33

могли Вот это значение посередине

01:30:36

зафиксировать я вам хочу

01:30:38

продемонстрировать хотя бы мы ещё aout

01:30:40

не прошли но посмотрите когда я его

01:30:41

превратил в aut layout у него есть новая

01:30:43

настройка вот эти расстояния и вот здесь

01:30:47

кликнув на стрелочку Я бы мог ему

01:30:49

прикрепить нашу переменную которую мы с

01:30:51

вами сода допустим э переменная была бы

01:30:54

но Ну допустим и Понятное дело что

01:30:56

теперь я для Всех элементов мог бы

01:30:58

сделать это значение сломаем Мы ещё это

01:31:00

не

01:31:01

прошли Можем ли мы что-то ещё где-то

01:31:03

применить может какой-то размер ещё для

01:31:06

какого-то отступа Но на самом деле в

01:31:08

данном случае особо ничего не будет

01:31:11

максимум мы можем в переменных это

01:31:13

размер

01:31:15

зафиксировать Том

01:31:18

заи

01:31:20

см делайте это Создайте потом то есть

01:31:23

Создайте одно значение второе значение А

01:31:26

может быть оно одно и то же смотрите как

01:31:28

это просто плюсик нажал назову это icon

01:31:33

size сказал размер для всего 45 создал

01:31:36

Create переменную

01:31:38

представляете теперь как круто то есть я

01:31:41

могу быстренько выбрать 45 на

01:31:46

45 45 на

01:31:48

45 и пошло поехало везде

01:31:53

размеры для иконок можно они все

01:31:54

одинаковы в принципе будут хорошо что-то

01:31:57

ещ есть здесь из размеров карточки

01:31:59

размер можете задать они все что

01:32:02

повторяется да плиточки Можете размер

01:32:05

повторить вот

01:32:07

здесь и в принципе всё всё вот

01:32:10

касательно переменных в размерности

01:32:12

больше мы ничего здесь не можем это есть

01:32:20

оценка задать Да можно сделать Градиент

01:32:23

стилем фона Ну давайте ещё с нуля сделал

01:32:27

Градиент сделал стиль фона два для

01:32:31

каждого отдельного цвета чёрного фона

01:32:34

синего жёлтого красного сделал

01:32:36

переменную цвета в папочке

01:32:41

дальше взял пошёл по всему тексту создал

01:32:45

стили текста

01:32:50

дальше стекло где-то размытие создал

01:32:53

стиль дальше создал размеры переменных

01:32:58

для карточек для иконок можете ещё для

01:33:02

скруглений

01:33:06

дальше Всё Всё конец это есть вся работа

01:33:11

задача какая точить чтобы вы много

01:33:13

создали стилей не боялись их настраивать

01:33:16

не боялись их ломать наводили порядок и

01:33:19

понимали что Ну это же оптимизация

01:33:21

процесса но не хватает ещё главного

01:33:24

ингредиента двух функциональности первый

01:33:26

самый важный мы сейчас затронули я хочу

01:33:29

ещё сказать лишь в качестве завершения

01:33:31

вот сейчас на перерыв перейдём А зачем

01:33:33

это всё нужно Мы же это всё разработчику

01:33:36

передаём раз оптимизируем свой свою

01:33:38

скорость работы 2 но в конце передаётся

01:33:41

разработчику возможно Вы встречали цвета

01:33:44

в шариках оформленные это стайл гайды

01:33:47

гарнитуры которые созданы в стилях сетка

01:33:52

сода стилях то всё что вы создали Вот

01:33:54

это это и есть помощь разработчику Вот

01:33:56

почему это супер важно не только для нас

01:33:58

и он на в коде он это всё увидит

01:34:00

смотрите перешёл в код сейчас пропусти

01:34:03

этот элемент вон внизу написан цвет

01:34:05

который мы

01:34:06

наложили Да это неправильно немножко

01:34:09

если перемен было бы лучше Давайте нано

01:34:11

что-то сложнее мы карточку всю присвоили

01:34:13

Да у карточки будет написано фон вот

01:34:17

перемен если мы зафиксировали в размер

01:34:20

28

01:34:22

ну здесь К сожалению да переменного

01:34:23

почему-то нет Мне казалось должно быть

01:34:25

может я что-то другое

01:34:27

присвоил Ну да тут в принципе нет но

01:34:30

хотя бы для некоторых моментов

01:34:32

однозначно здесь будет всё выведено всё

01:34:35

это передаётся разработчику всё он это

01:34:38

использует потому что одинаковые

01:34:39

элементы проектировать это то что нужно

01:34:42

а делать уникальные элементы ширпотреб

01:34:44

это и разработчик

01:34:50

будет останавливаемся потому что Тема

01:34:53

довольно сложная возвращаемся и у нас

01:34:56

будет ещё интересная тема Мы затронем

01:34:58

прикольные штуки отдыхаем Давайте 15

01:35:01

минут [музыка]

01:35:20

отдыха

01:56:34

Извиняюсь немножко опоздал Давайте

01:56:37

продолжим

01:56:39

разбираться Ну в принципе нашу тему это

01:56:41

связано с составами это мы уже

01:56:48

разобрались разобрались со стами

01:56:50

разобрались с переменными Остаётся

01:56:52

только добить это всё на реальном

01:56:55

проекте вы в мке конечно же 20 раз

01:56:59

повторите и вопросов никаких не будет А

01:57:01

если будут вы сразу же мне напишите

01:57:03

значит с этой задачей в принципе у нас

01:57:05

всё задача секунду включил же да включил

01:57:09

задача называется только не успел

01:57:13

переименовать

01:57:18

пере Да ссылочки я немножко не успел ещё

01:57:21

вот здесь добавить но тут ссылочки будут

01:57:23

когда вы будете кликать сразу будете

01:57:24

понимать О чём проект значит переменно

01:57:27

называется у нас

01:57:29

она наверное назовём это CRM

01:57:33

Styles

01:57:34

Styles А можно и переменные Просто может

01:57:38

и

01:57:43

просто смотрим всё помести это наш lon 4

01:57:46

название чтобы мы не потеряли вот так

01:57:50

она выглядит 4 то же самую историю тут

01:57:55

напишу есть хорошо А можно вопрос по

01:57:59

переменным Да давай А вот ты говорил то

01:58:03

что можно ставить какие-то условия я так

01:58:05

правильно понимаю что вот допустим у нас

01:58:06

есть там допустим жёлтый фон и там вот

01:58:10

был белый да И когда там меняем на белый

01:58:13

потом фон потом сделать шрифт чёрным

01:58:15

можно это как-то с помощью переменных

01:58:17

типа как формулу построить или или я

01:58:19

неправильно понимала А я хотя бы вкратце

01:58:22

покажу начнём Давайте с другого Сейчас

01:58:24

подожди я понял Сейчас отвечу Ну

01:58:26

автоматически все тянула вот эти стили

01:58:29

за собой то что к тёмному там фону идёт

01:58:31

там светлый стиль Вот это текста Угу

01:58:35

сейчас я сейчас объясню Ну начнём с того

01:58:37

что вот я вам репост то что проводил в

01:58:40

субботу про переменные там как раз вот в

01:58:43

этой платной версии там всё заметно

01:58:45

чуть-чуть покажу этого же файла сейчас

01:58:48

только его найду где я его сделал хотя

01:58:51

бы чтобы вы отдалённо посмотрели зачем

01:58:54

это нужно но разбираться

01:58:56

там это вообще не сейчас точно нам нужно

01:59:00

Так [музыка]

01:59:04

секунду помню в каком аккаунте это а это

01:59:07

Нет этот был отдельный Да вот здесь

01:59:15

[музыка]

01:59:18

оно Иду уже с другого аккаунта я это

01:59:21

[музыка]

01:59:27

делал непонятно Ну ладно я вообще могу

01:59:29

новый файл создать Ладно давайте новый

01:59:31

тогда не вижу здесь я по какой-то

01:59:34

причине потом удалю значит э так как у

01:59:37

нас версия

01:59:39

обучающая как да для учеников то доступ

01:59:44

по идее должен

01:59:46

быть просто думаю в том аккаунте Ну да

01:59:49

должно быть значит давайте сделаем

01:59:51

какую-нибудь переменную переменные

01:59:52

сейчас мы здесь увидим готово или нет У

01:59:55

нас значит

01:59:56

цвет сделаем так у нас есть цвет

02:00:01

текста и в одном значении он должен быть

02:00:04

белый Понятно сейчас

02:00:07

[музыка]

02:00:09

найдём Я понял значит да Давайте лучше

02:00:11

тогда не на этом файле Сейчас я найду

02:00:13

этот файл где с доступом Наверное я его

02:00:16

просто перенёс да 100% перенёс

02:00:20

куда

02:00:23

конкретно поискать

02:00:26

[музыка]

02:00:28

погодите смотри на втором аккаунте это

02:00:33

надо в папочку команды запихнуть и всё

02:00:36

работает нету тут смотрим в

02:00:41

рабочем в рабочем показывал Не

02:00:44

[музыка]

02:00:47

знаю вот

02:00:49

[музыка]

02:00:50

нашли се сейчас

02:00:54

поведём

02:00:56

так который не понадобилась вот тут Да

02:01:00

значит сейчас покажу ещё раз переменные

02:01:04

локальные они даже уже здесь созданы

02:01:06

сейчас я только увеличу чтобы вы видели

02:01:09

значит написан фон сейчас фон белый в

02:01:13

версии А В тёмной версии чёрный текст

02:01:17

версии чёрный светлый белый можно

02:01:20

добавлять несколько таких условий и нам

02:01:23

нужно тут просто присвоить где что

02:01:26

меняется допустим у меня есть фрейм один

02:01:28

и фрейм

02:01:29

второй для этого теперь мне Нужно

02:01:31

разместить объект у которого применена

02:01:33

та самая переменная допустим Давайте

02:01:36

возьму вот эти

02:01:37

карточки О'КЕЙ в одной карточке видите

02:01:42

яё наверно сломаю полностью Давайте Ctrl

02:01:44

А мы ещё не дошли до этого тогда неважно

02:01:47

что-то нажимаю сломал

02:01:49

готова возьму вот эти все элементы

02:01:52

текстовые они у нас стилем сделаны

02:01:55

видите нам это не нужно мы поменяем их

02:01:58

на

02:01:59

кда два элемента - это переменный чёрный

02:02:03

текст также поменяем здесь на тоже Text

02:02:06

Dark есть этот элемент можно не менять и

02:02:11

значит следующее как только мы применили

02:02:13

хоть какие-то переменные то сам фрейм

02:02:15

позволяет настроить его рядом с Лером

02:02:18

есть вот такие объекты

02:02:21

я скажу что это является те самых два

02:02:23

режима которые видели колонки один и

02:02:25

второй было бы больше мог бы больше

02:02:26

настроить я скажу умышленно ему что это

02:02:29

версия А тогда в этой логике это будет

02:02:32

Тёмная версия но как никаких переменных

02:02:35

нету фрейм пустой только когда я

02:02:37

Перенесу объект Теперь я могу здесь

02:02:38

сказать что он тёмной

02:02:40

версия переношу

02:02:47

сюда локальные переменные нажимаем

02:02:51

настройки и разбираемся пер Это фон

02:02:54

здесь настройка идт к фону Ну давайте

02:02:56

это и сделаем Значит мы говорим Это

02:02:58

только заливка будет без всяких эффектов

02:03:01

Окей второй текст на белом Он чёрный на

02:03:04

чёрным он белый должен быть хорошо Ну

02:03:07

вроде как всё настроено интересно

02:03:11

проверим ещё раз

02:03:14

[музыка]

02:03:17

так тоже ещё ра

02:03:23

смотрим происходит А всё в ЧМ проблема

02:03:27

всё очень просто проблема в том что там

02:03:29

должен был быть чёрный фон да И эти

02:03:31

элементы должны тоже быть присвоены

02:03:34

сейчас покажу то есть я же не всё

02:03:36

настроил надо было и с фоном разобраться

02:03:38

надо было сказать что этот фон у нас

02:03:40

тоже является переменной сейчас

02:03:45

[музыка]

02:03:47

у есть

02:03:51

смотрите

02:03:53

видите

02:03:57

поменялось Ну опять-таки логически

02:03:59

размышляя Ну не такая уж и частая задача

02:04:01

когда приходится это делать Это прямо

02:04:04

какой-то настройка пафосная назовём А

02:04:07

вот говорим сейчас про условия там можно

02:04:09

вообще двинуть кони пока разберёшься

02:04:13

смотрите это режим промы его е пройм в

02:04:16

режиме проти ког некие связи я попробую

02:04:20

Даже Удалить это Например я хочу что-то

02:04:23

будет делаться нажимая на это что-то

02:04:24

открывается здесь и в настройках часто

02:04:27

есть стандартные вещи Вот они А есть то

02:04:29

что новенького завезли нам и это

02:04:32

находится вот тут новенькое вй версии

02:04:35

только работает кондишен переменные и

02:04:38

всё кондишн то что я говорю смотрите что

02:04:40

это разработка Да если то я допустим

02:04:43

хочу сказать

02:04:46

если будет сложно у меня он с размерами

02:04:50

сейчас

02:04:51

говорит Да конечно нехорошо

02:04:54

будет если Ну тут странно будет если

02:04:57

размеры у нас

02:05:00

24 и они равняются или не равняются

02:05:04

тратата то сделай вот это я например

02:05:09

хочу делать Даже переменную то сделай

02:05:11

вот эту переменную покрасить чёрный цвет

02:05:14

это условие То есть тут условия можно

02:05:15

настраивать э штука непростая выглядит

02:05:17

Вот такая Да развит не идёт условие илса

02:05:21

Угу Ну и переменная как я нажал на один

02:05:26

элемент можно было просто переменную где

02:05:29

она тут с это переменная и он говорит

02:05:31

что-то будет происходить То есть когда я

02:05:33

сейчас посмотрим Подождите Он

02:05:36

Ага При когда я Клик на элемент он

02:05:39

должен стать оранжевым что конкретно

02:05:41

должно стать оранжевым сложно сейчас

02:05:43

предсказать Но посмотрим Не знаю что ча

02:05:46

для

02:05:47

не

02:05:49

мне кажется ничего не должно произойти

02:05:51

Интересно что просто заменять

02:05:53

будет так сейчас мы его

02:05:55

[музыка]

02:05:57

выберем понял вот он Ну давайте нажмём

02:06:00

Ну ясно ничего не работает пото что

02:06:02

неправильно настро поэтому говорю что

02:06:04

непонятно что он хочет сказать при клике

02:06:07

меняется на этот

02:06:12

цвет понятно дело потому

02:06:15

Поня Дава Поу клейки Ну он тоже он не

02:06:21

покрасит у него сейчас странные условия

02:06:23

то есть Почему Что весь чёрный элемент

02:06:25

должен стать он скоре ничего нене что

02:06:30

поменяло очень странно мы будем потом в

02:06:33

дальнейшем это более подробно Вот это

02:06:35

всё не будем это во-первых это в Премиум

02:06:37

аккаунте во-вторых это та штука которая

02:06:40

даже если вы не знаете вообще никак не

02:06:43

затронет вам и разбираться в этом

02:06:45

слишком копаться не вижу никакого смысла

02:06:47

всех коче проекты который работаю Это

02:06:49

тоже не имеет смысла это больше

02:06:51

выпендрёж в виде сейчас я сделаю условие

02:06:54

нажмём что-то будет меняться в

02:06:55

реальности клиенту вообще вать хотелось

02:06:57

разработчику эта информация будет просто

02:06:59

полностью бесполезна ему нужно всё равно

02:07:01

это записать эта штука скажем это ней

02:07:04

некий

02:07:05

уровень крупных энтерпрайз компаний вот

02:07:08

это там бы пригодилось сейчас что вам

02:07:10

нужно только знать это переменные что

02:07:12

можно присваивать числовые значения

02:07:15

можно присваивать цвет всё остальное это

02:07:17

в прямом аккаунтах и я не просил даже

02:07:20

курс на эту штуку и то что вот светлые

02:07:23

тона Тема и тёмные тоже не будем да вот

02:07:25

это более по тоже всё в Премиум да да

02:07:29

Дада то есть Оно во-первых даже имеет

02:07:31

смысла Смотри даже если бы мы сейчас это

02:07:33

сказали в реальности бы всё равно

02:07:35

перекрашивать потому что нам не нужно

02:07:37

Давайте представим что разработчик будет

02:07:39

сейчас как дурачок сидеть вот эту штуку

02:07:41

переносить сюда Зачем он что будет

02:07:44

копаться в коде смотреть как мы там

02:07:46

усложнили чтобы всё равно потом

02:07:47

переписать с нуля ту же Да такого не

02:07:49

будет даже получатся мы по стандарту

02:07:52

будем всё равно если там будет созда

02:07:54

орно фон мы всё равно заново всё будем

02:07:56

создавать да да да да это больше всего

02:07:59

сделали Наверное я предполагаю А есть

02:08:02

какой-то сложный функционально

02:08:03

накрученный продукт и вот есть клиент

02:08:05

такой дотошный Дила который говорит

02:08:07

Покажи мне как это всё работает ну О'КЕЙ

02:08:10

в сложных проектах больших огромных

02:08:12

Может в этом есть какой-то смысл но вот

02:08:14

это же баловство это просто для

02:08:16

Инстаграма контент получается перенести

02:08:18

из одного покрасить другой цвет в

02:08:20

реальности будет сделан макет белый

02:08:22

будет макет сделан чёрный и в итоге если

02:08:25

какие-то будут нюансы они вот только так

02:08:27

будет заметка Угу получается так на

02:08:31

бесплатном мы не можем Да вот типа вот

02:08:33

как да да просто так надо будет всё

02:08:35

вручную делать всё равно да А ещё вопрос

02:08:40

можно как-то вот созданные стили можно

02:08:43

их вот как какими-то клавиши сразу же

02:08:46

переделать в эту переменную

02:08:48

перенести вот как со фреймом и с Груп

02:08:50

познавать из одного во второй да типа я

02:08:52

такого не встречал Я предполагаю

02:08:55

Возможно есть плагины но как сама

02:08:57

клавиша Я не видел что такой было

02:09:00

вообще хорошо раз мы затронули стили

02:09:03

Давайте тогда вот это углубленное

02:09:05

посмотрим интересно вот библиотека стили

02:09:07

как она используется Давайте представим

02:09:09

что так только не отсюда буду

02:09:12

прыгать вот отсюда да А хорошо и тогда

02:09:15

аккаунт выберу этот А мы сейчас

02:09:18

попробуем связать библиотеку тоже

02:09:20

посмотрите как это бы выглядело как бы

02:09:23

это всё работало в принципе если вы

02:09:25

создадите свою команду Ну вот этот

02:09:28

проект типа папочку там обычно создано

02:09:30

два файла один файл с цветом там идёт по

02:09:33

сути это есть стили которые за нас уже

02:09:36

спроектировали Сейчас объясню то есть Я

02:09:38

создаю новый дизайн файл Окей дизайн

02:09:42

файле Я создаю некие цветовые

02:09:45

решения это чтоб нам просто было

02:09:48

я решил их покрасить в разные

02:09:52

[музыка]

02:09:53

цвета ужасными цветами

02:09:58

покрасим Давайте жёлтенькие чтобы было

02:10:00

термоядерна готово После этого мы

02:10:03

создали с вами ой после это Мы создали с

02:10:06

вами стили стиль допустим красный он так

02:10:10

и будет называться Я не хочу сильно

02:10:11

сейчас опять думать о названии всё это я

02:10:15

создал стилем просто название у него как

02:10:17

цвет кодах

02:10:18

[музыка]

02:10:20

готов есть значит всё Это на файле

02:10:23

сейчас хранится и э если мы его

02:10:27

опубликуем то в принципе мы можем его

02:10:30

связать с нашим другим файлом

02:10:32

публиковать его нажать нужно на название

02:10:34

файлов выпадающую стрелочку и называется

02:10:36

publish

02:10:37

Library понятно ясно да забыл уже в

02:10:41

старых версиях фильмы это была

02:10:43

бесплатная функция В новых версиях

02:10:45

библиотеки и компоненты это всё стало

02:10:47

платным ве Хорошо давайте хотя бы

02:10:50

посмотрим как это было бы ой зададим в

02:10:53

другом месте ВС равно тся на тот аккаунт

02:10:55

прыгать Давайте

02:10:57

[музыка]

02:11:00

ничего так файл этот создам новый здесь

02:11:03

файл неважно Давайте даже попробуем

02:11:06

перенести вот эти стили Вот они у нас

02:11:08

есть взял шифтом выделил правой клавишей

02:11:10

и сделал закинул

02:11:17

сюда но я бы хотел чтобы просто

02:11:19

визуально Они у насс были Мы понимали

02:11:20

что у нас ту есть значит возьмём один

02:11:26

красный

02:11:27

жёлтый блюзовый и зелёный есть вот

02:11:32

теперь мы его нажимаем опубликовать

02:11:35

publish Library смотрите что он говорит

02:11:37

он говорит Сейчас вы хотите опубликовать

02:11:40

цвета есть ещё компоненты которые я хочу

02:11:43

чтобы мы чуть-чуть сегодня коснулись я

02:11:45

пока покажу что-то

02:11:48

моря некая карточка я сделаю из него

02:11:52

компонент помните как я немножко показал

02:11:54

вам что когда создаётся компонент вас

02:11:56

появляется элемент можно его сюда

02:11:58

доставать так вот эти компоненты тоже

02:12:00

можно публиковать если нажму публиковать

02:12:04

появляются ещё и компоненты и вроде всё

02:12:06

понятно Можно даже назвать Что это верши

02:12:08

О какой-нибудь

02:12:10

что опубликовали зачем версион сейчас

02:12:12

скоро поймёте Я публиковал ждём время он

02:12:15

переменный публикует в стиле компонента

02:12:18

опубликовал вроде ничего не изменилось

02:12:19

на самом деле изменилось теперь есть в

02:12:22

книжечки у нас этого файла А давайте его

02:12:25

назовём например

02:12:27

стайл вот у нас есть библиотека этого

02:12:30

стайла Если я сейчас открою какой-нибудь

02:12:33

проект внутри например вот мы сейчас на

02:12:36

на на таком были где переносили карточки

02:12:40

вот такого

02:12:44

понятно что

02:12:47

произошла

02:12:48

Мне не нравится когда такие штуки

02:12:50

колбасы рисуются всё вернул назад

02:12:53

поехали сюда так вот я хочу сейчас

02:12:56

связать с этой библиотекой куда можно

02:12:58

нажать можно нажать конечно

02:13:00

же на стили со стиле там есть Папочка

02:13:04

тоже связка идёт здесь мы по-моему

02:13:07

ничего не сможем сделать Да здесь мы

02:13:09

ничего не сможем но допустим я вот

02:13:11

перейду сюда вот мы что-то уже

02:13:14

накладывали вот он нас есть пропадай

02:13:16

быстрее Ну ала значит я хочу взять

02:13:19

четыре точки и вот он говорит есть уже

02:13:22

библиотеки все но это которые на этом

02:13:25

файле есть другие не подвязать

02:13:28

А блин раньше по-моему был тоже

02:13:30

интерфейс хорошо второй вариант есть

02:13:32

через

02:13:34

ассеты книжечку нажимаем вот тут

02:13:37

Аты книжечка и вот у нас есть

02:13:40

опубликовать этот файл мы его не

02:13:42

публикуем Но вот то что мы до этого

02:13:43

стиля опубликовали вот оно один

02:13:45

компонент 400 нажимаем Add to F

02:13:49

галочка есть смотрите момент следующий

02:13:50

теперь когда я выбираю элементы опять

02:13:52

переж на четыре точки появляется вот

02:13:55

локальные цвета которые на файле мы

02:13:57

делали ста тот фай который мы сейчас

02:14:00

прикрепили он так называется Я его

02:14:01

назвал И вот он чуть ниже после

02:14:03

разделителя появляется поэтому мы можем

02:14:05

по сути отсюда брать интересно дальше

02:14:08

вообще зачем нужны библиотеки для работы

02:14:09

в больших командах не в маленьких

02:14:11

маленьких

02:14:16

там

02:14:20

прекрасный день сказали нужно сделать

02:14:21

небольшой динг и наш красный цвет должен

02:14:24

стать немножко

02:14:26

оранжевы когда мы зайдём на наш файл

02:14:29

ничего не изменится потому что он

02:14:31

сейчас изменени не

02:14:34

перенёс возможно Да Дума может будет

02:14:36

здесь сказано ничего не было сказано но

02:14:38

если мы перейдём на сам файл и нажмём

02:14:41

опубликовать видим вот

02:14:46

об сейчас

02:14:49

па все макеты связаны с этим

02:14:52

элементом должны стать оранжевые Ну

02:14:56

может мы сейчас обновим возможно просто

02:14:57

в обнов видите А появилась появился

02:15:00

значок обновления что-то хочется

02:15:01

обновить апдейт нажали все связанные

02:15:05

элементы покрасили свой цель и смотрите

02:15:08

как же классно что мы можем даже

02:15:09

компонент забрать Представьте в объёме

02:15:12

что мы если создали хедеры кнопки инпуты

02:15:15

чекбоксы радио всес Фуна Эмен создали бы

02:15:19

на одном файле сделали компоненты

02:15:20

сделали стили различные Разно тно цвета

02:15:24

разных размеров текст этоже стили

02:15:26

помните и потом мы связываем с любым

02:15:28

проектом Можно потом это всё брать очень

02:15:30

удобно но видите платно опять версии я

02:15:32

ли показал что вот так выглядит

02:15:34

библиотека можно где-то переносить

02:15:36

компоненты можно их ломать создавать

02:15:38

новы на файлах но хотелось бы работать

02:15:40

конечно в

02:15:46

команде идём и уже будем продолжать наш

02:15:50

проект только уже скажем не то что новый

02:15:53

но начнём изучать следующую часть это

02:15:55

часть самая сложная часть называется

02:15:57

компоненты и потом

02:15:58

будет заходите пожалуйста опять на макет

02:16:01

Если вы сейчас отсюда

02:16:09

Вышлите будем говорить о компонентах

02:16:11

начнём пока что С примитивов простых

02:16:13

элементов как Что такое компонент зачем

02:16:15

это нужно как это всё работает Окей

02:16:19

для начала нам нужно что-то банально

02:16:20

простое и небольшое Я предлагаю пока что

02:16:23

просто создать прямоугольник в виде

02:16:26

картинки и допустим создадим отдельно

02:16:30

текст что угодно напишите напишите

02:16:33

например

02:16:40

заголовок

02:16:42

достаточно ну если хотите Давайте ещё

02:16:45

добавим справа а тут напишем цена

02:16:54

первая проблема пока сейчас не делайте

02:16:56

Посмотрите послушайте Если бы я сейчас

02:16:58

создал эту карточку многократно а потом

02:17:01

бы пришёл клиент и сказал нет Слушай

02:17:03

можно ли цену сделать под заголовком нам

02:17:05

бы пришлось заниматься вот этой ерундой

02:17:07

Да нормально ли Нет конечно не нормально

02:17:10

но если мы с вами изучим Что такое

02:17:12

компонент то мы даже вопросы закроем в

02:17:15

нашем предыдущем

02:17:16

проекте Что сделать нужно значит вот мы

02:17:20

взяли нашу наш элементы

02:17:22

выделили нам нужно превратить его в

02:17:25

компонент компонент находится у нас

02:17:27

сверху посередине Найдите там есть

02:17:30

четыре ромбика это есть компонент можно

02:17:34

нажать на стрелочку выпадающих написано

02:17:36

Create component Ctrl Alt K K

02:17:39

компонент есть ещё несколько свойств мы

02:17:42

их все изучим пока что достаточно Create

02:17:44

компонент или нажать на

02:17:46

иконку

02:17:49

что вы должны сразу видеть первый

02:17:53

момент рамочка стала

02:17:55

фиолетовые То есть все были элементы

02:17:58

синие но компонент стал фиолетовым

02:18:01

второе ромбика чере

02:18:04

покрашенных названием идт дальше Всё что

02:18:08

внутри слоях тоже

02:18:11

фиолетовое это

02:18:14

компонент хо как работат компонент Если

02:18:18

вы сделаете копию компонента удерживая а

02:18:21

левой клавишей

02:18:23

мыши Сделайте

02:18:28

копию вы создали

02:18:31

ин Что такое ин и что такое ещё раз

02:18:34

компот компонент - это Альфа это

02:18:37

родитель Если станет так легче а ин

02:18:41

этоний Эмен он связан с компонентом но

02:18:46

комне главной ещё раз ромбик закрашенный

02:18:50

и в слоях и сверху А instance - это

02:18:54

отдельный ромбик с пустотой

02:18:57

внутри Возьмите сейчас главный компонент

02:19:00

и например

02:19:08

плашечный запомните пробуйте всё не

02:19:10

сидите видите Как меняется потому что он

02:19:14

связан для примера э

02:19:18

Давайте возьмём правую часть и попросите

02:19:21

её покрасить Ну прямо картиночка тоже

02:19:24

наша покрасите В другой цвет вы увидите

02:19:27

что она самостоятельная

02:19:30

стала потом вернитесь назад Ctrl Z то

02:19:32

есть откатить чтобы он был опять связан

02:19:35

с нашим

02:19:36

телом та же самая история с компонентом

02:19:38

с переносом Если вы можете переместить

02:19:40

элементы справа тоже будет

02:19:43

переноситься да Но если вы перебор Он

02:19:47

может выйти за пределы компонента и он

02:19:50

пропадает Почему он вышел за пределы

02:19:52

компонента Посмотрите в слоях я его

02:19:55

настолько далеко вёл что он с этой

02:19:57

оболочки красивый аккуратный Вот она он

02:20:00

вышел за пределы и посчитал что это

02:20:02

отдельный текст я его опять сюда

02:20:04

размещаю и появляется элемент справа

02:20:08

у

02:20:10

Ладно продолжаем

02:20:13

копаться сес Просто думаю С чего бы мы

02:20:16

начали

02:20:17

[музыка]

02:20:19

много всего

02:20:20

интересного Значит мы сказали что можно

02:20:23

изменить параметры любые Изменить можно

02:20:26

размер и второй элемент меняется

02:20:27

изменить скругление второй меняется

02:20:30

заменить на текст и второй меняется

02:20:32

подвинуть Эмен и второй тоже

02:20:35

меняется Если вы скопируйте ещё раз

02:20:38

компонент

02:20:41

ам или скопируйте дочерний

02:20:46

Эмен

02:20:48

связа с

02:20:50

глав вот так ВС

02:20:53

устроено то есть чтобы вы сейчас не

02:20:55

скопировали они всегда будут инстанса но

02:20:57

компонент всегда будет только

02:20:59

один Может ли инстанс существовать без

02:21:03

компонента может но тогда будет ругаться

02:21:07

сам инстанс и говорить А зачем ты удалил

02:21:09

компонент дурак что

02:21:16

ли

02:21:18

заме Давайте их теперь возьмём Возьмите

02:21:22

свою карточку

02:21:25

одну вынесите за пределы то есть

02:21:28

Выключите

02:21:30

её Отмените Да скопируйте в любом

02:21:35

месте вот наша

02:21:37

карточка правильно построена да возможно

02:21:40

мы не ВС при

02:21:46

не серый элемент в виде обводки Ну

02:21:49

наверное зря мы его сделали можно это

02:21:52

если хотите подправить сейчас это

02:21:53

неважно Я даже возьму всё в один

02:21:55

какой-нибудь цвет покрашу важно другое

02:21:58

что четыре одинаковых элемента - это

02:22:02

оптимизация шесть Даже их а не четыре

02:22:04

Даже

02:22:05

восемь Так давайте то же самое провер

02:22:08

выбрали

02:22:09

карточку сверху на панели нажали

02:22:12

компонент Create конен Ctrl Alt

02:22:16

K

02:22:18

Сделайте копию через Ну вынесите

02:22:22

например куда-нибудь в бок чтобы не

02:22:31

потеряли Как всё получается А тут все

02:22:34

копирования будут работать и ctr C и

02:22:37

Ctrl D или

02:22:39

только будет работать но там есть один

02:22:42

момент я боюсь что случайно на него не

02:22:44

попали может ском второй Вот это я боюсь

02:22:48

чтобы у вас не было А всё поняла

02:22:51

получается чтобы создать вот этот

02:22:53

подчинённый только альтом надо всегда

02:22:56

нет мо Ну смотри хорошо я взял Сейчас

02:22:58

Ctrl C выбрал другое место Ctrl V и он у

02:23:02

меня тоже стал всё нормально Он точно

02:23:04

такой же и работает Ctrl Ctrl V Ctrl D

02:23:08

он тоже будет работать но бывают условия

02:23:12

когда компонент может спирова второй раз

02:23:17

это условие дам сечас не смогу сказать

02:23:20

из-за каких проблем происходит возможно

02:23:25

изза переноса с одного файла Не ну нет

02:23:30

фай В общем просто держите в уме Что

02:23:33

компонент он всегда один И у него есть

02:23:35

вот эти четыре ромбика если он

02:23:37

становится при копировании опять с

02:23:40

четырьмя ромбиками пло

02:23:46

это ка угодно Ctrl C Ctrl D оно всё

02:23:49

работает

02:23:51

Просто смотрите внимательно это всё и

02:23:54

чается проблема самой фигмы это всё так

02:23:56

рандомно и мы это как бы не сможем

02:23:59

контролировать Да ну от наших действий

02:24:01

это не зави сказать Нет там не Рандом

02:24:03

просто Есть условия которые Ну случайным

02:24:05

образом получается нужно их вычленить я

02:24:08

не вспомню

02:24:09

даже Возможно мы сейчас все вместе

02:24:11

встретим когда мы возьмём элемент

02:24:13

захотим его наверно а всё я вспомнил

02:24:15

проблему пому внутри обекта возм кусочек

02:24:19

и по-моему если мы его сделаем ctr V

02:24:22

что-то из этого будет Он у него может

02:24:24

произойти ситуация что он может стать

02:24:25

отдельным компонентом в этом какая-то

02:24:28

штука возможно из оболочек внутри Если

02:24:30

слишком много оболочек например типа

02:24:32

что-то из этого сейчас попробую Ctrl GTR

02:24:36

ctr повезло Нет ну где-то что-то из этой

02:24:40

истории было

02:24:42

ничего бам

02:24:45

неки э насколько я

02:24:48

помню бывает история с отображением

02:24:51

фотографий Если вы вдруг открыли макет А

02:24:53

ваши фотки не загрузились нужно

02:24:55

подождать а Бывает даже она не всё равно

02:24:57

не загрузится единственный вариант

02:24:59

решения закрыть макет и ещё раз открыть

02:25:01

багов мало просто бывает здесь какие-то

02:25:03

условия Вот например как я сказал

02:25:05

помните скопировать properties что-то не

02:25:07

всегда работает потому что там была

02:25:09

проблема И до сих пор она есть с

02:25:11

раскладкой клавиатуры там есть язычной

02:25:14

английская клавиатура и американская и

02:25:16

они что-то там напортачили и уже ну

02:25:18

несколько лет эта штука не работает

02:25:21

исправить Не знаю

02:25:24

когда всё очень плохо для русского

02:25:26

просто населения такая ту произошла

02:25:28

Давайте вернёмся мы сделали компонент мы

02:25:30

сделали дубликаты два они сейчас связаны

02:25:33

Наша задача посмотреть что хоть сейчас

02:25:36

два элемента связаны с одним и чтобы вы

02:25:38

сейчас не меняли второй элемент Точно

02:25:40

также

02:25:45

будет

02:25:47

цвет просто можете по понять что ВС у

02:25:49

вас работает вс хорошо но начинается

02:25:52

дальше

02:25:53

интересно давайте сделаем такие

02:25:55

изменения То есть я верну его опять как

02:25:57

и было можете сломать Если хотите все

02:26:01

разломать все стили которые были созданы

02:26:03

до этого Хотя мы понимаем что это очень

02:26:05

удобно мы сделали с вами очень логично и

02:26:07

правильно Ну как есть так есть внутри на

02:26:11

второй карточке кото вы сделали копию

02:26:14

Возьмите сейчас изменение Какое

02:26:17

покрасьте цвет Royal package в любой

02:26:20

цвет который

02:26:21

хотите

02:26:23

Угу

02:26:25

а Октябрь четвёртое Давайте с вами

02:26:29

гарнитуру сделаем

02:26:35

жирной

02:26:37

11250 давайте мы с вами сделаем

02:26:40

выравниваем по Нет сейчас подождите

02:26:43

Давай ему

02:26:45

обводку

02:26:49

и наверное Давайте вместо 11 250 сделаем

02:26:55

150 а последний эллипс нажмём удалить

02:27:02

его если хотите можете ещё выбрать на

02:27:05

какую-то аватарку

02:27:09

удалить

02:27:12

хорошо Ну то есть мы внесли какие-то

02:27:14

коррективы первое что вы увидели Октябрь

02:27:17

четвёртый улетел можете его как-то

02:27:20

растянуть Нет мы говорим про дачер не

02:27:23

можете вы как-то передвинуть элемент

02:27:27

нет Можете ли

02:27:29

вы не

02:27:31

знаю Ну например увеличить размер то мы

02:27:34

можем Но Можем ли мы добавить ещё один

02:27:36

элемент Давайте типа попробуем я как

02:27:38

будто рисую Шарик и вроде бы кажется что

02:27:40

он добавлен но посмотрите в слоях шарик

02:27:44

запихнуть в дочерний элемент невозможно

02:27:48

как бы я не пытался То есть он сверху

02:27:51

[музыка]

02:27:53

находится сейчас расскажу сейчас мы

02:27:55

поймём этот принцип

02:27:57

интересный пример из реальной жизни У

02:28:00

нас есть папа и Давайте хорошо мама и

02:28:03

есть дочка у мамы есть голова руки

02:28:09

ноги волосы и так далее и у дочки есть

02:28:13

тоже самое Октябрь 4 голова Royal

02:28:16

package тело ноги 150 долларов элементы

02:28:21

остались элементы как в слоях всё точно

02:28:24

так же он не может это

02:28:27

убавить хорошо раз но дочка может

02:28:30

чуть-чуть отличаться от мамы Да может

02:28:34

она может покрасить волосы в другой цвет

02:28:36

она может набить татуху себе то есть

02:28:39

вместо 11250 150 получилось Она может

02:28:43

меняться но когда дочка меняется

02:28:47

то теперь мама при

02:28:51

[музыка]

02:28:52

изменении если мы покрасили дочке волосы

02:28:56

и если сейчас мама покрасит волосы в

02:28:58

другой цвет дочка уже не перекрасить Вы

02:29:00

только что внесли

02:29:02

изменения Сейчас вы это поймёте Значит

02:29:04

мы сейчас для Октябрь чет Возьмите

02:29:07

компонент Октябрь мы сделали внизу

02:29:11

жирными

02:29:15

октябрь супер

02:29:18

жирный или супертонкий заметьте теперь

02:29:23

наша вторая карточка не работает

02:29:26

жирность но в треть всё

02:29:29

работает Если вы Замените не жирность А

02:29:34

размер Напишите больше размер изменится

02:29:38

везде на всех трёх карточках Если

02:29:42

вы Если вы не меняли но так как мы в

02:29:45

октябре тоже что-то поменяли написали 13

02:29:48

тон тоже перестал работать но если вы

02:29:51

Замените на другую

02:29:55

гарнитуру Подождите а что ж он так это

02:29:57

он не должен был так делать Сейчас я его

02:29:59

сброшу ещё

02:30:02

раз так я

02:30:05

понял так интересненько то есть ну это

02:30:08

какой-то баг видимо произошёл и что-то

02:30:10

натворил то есть идея в том что вы

02:30:12

меняете то теперь нельзя будет изменить

02:30:15

У нашего черне элемента сейчас я сделаю

02:30:17

опять что-то более простое робота

02:30:19

написал Вот робота но тут я сделал

02:30:22

робота жирным Если я сейчас робота

02:30:25

заменю на что-то

02:30:28

другое интересно что он всё равно не

02:30:31

хочет менять возможно из-за жирности Ну

02:30:34

блин ладно хорошо давайте пром 60 видите

02:30:38

размер меняется возможно жирность

02:30:40

связана с гарнитурой это ладно может

02:30:43

быть но все остальные изменения которые

02:30:45

вы вводите закреплены за обе то есть

02:30:48

иначе говоря если мы Давайте вернёмся

02:30:50

назад я вот даже кстати могу в

02:30:52

компоненте подвинуть с вами решили да

02:30:54

там можно двигать в инстанса двигать

02:30:56

нельзя Но вот например Хорошо

02:30:59

возм Мы покрасили цвет Если вы будете

02:31:02

красить Цвет будет меняться только

02:31:05

связанные

02:31:07

карточки потому что во второй карточке

02:31:09

мы внес

02:31:15

измене мы не трогали Если вы добавите

02:31:19

обводку то везде добавится обводка то

02:31:22

есть только там где вы вносите изменения

02:31:24

только они перестают работать то есть в

02:31:26

150 мы добавили обводку Всё обводка

02:31:29

теперь только такая 150 мы изменили

02:31:31

текст теперь текст только такой но

02:31:35

вопрос возникает хорошо А если бы не

02:31:37

хотелось этого хотелось бы вернуться

02:31:39

назад Можно ли это как-то сделать

02:31:42

можно значит самое банально самое

02:31:45

простое Если вы нажмёте на всю карточку

02:31:48

ин нажать на кнопочку сверху называется

02:31:52

res All CH видите стрелочка назад

02:31:54

посередине в

02:31:56

центре он сбрасывает всё что вы делали

02:31:59

возвращает назад

02:32:01

сюда верну назад но не всегда нужно

02:32:05

сбрасывать Всё возможно всё было

02:32:07

прекрасно например этот цвет Давайте

02:32:12

ВОМ

02:32:15

было 150 долларов хорошо но обводка не

02:32:19

нужна кликните именно на тот элемент

02:32:21

который вы меняли Я кликнул на 150

02:32:24

долларов и рассказываю момент значит

02:32:28

чтобы вносить сброс отдельных элементов

02:32:30

Вы конечно можете его кликнуть и теперь

02:32:32

Если вы нажмёте на кнопку сбросить он

02:32:35

сбросит все изменения выбранного

02:32:37

элемента может быть но если вы хотите

02:32:40

сами точечно подсказать что хотелось бы

02:32:43

убрать например обводка лишняя была

02:32:46

это Справа справа в новом блоке с блоком

02:32:50

погодите сейчас мы это пройдём когда мы

02:32:53

создали компонент справа в свойствах

02:32:56

добавился блок компонента где слева

02:32:59

показан значок компонента справа

02:33:02

написано название компонента А третья

02:33:04

настройка которой вы можете написать Что

02:33:07

означает этот компонент и даже логику

02:33:09

для разработчика и даже ссылку можно на

02:33:12

некую документацию

02:33:15

сделать

02:33:16

можно ещё тут написано упростить

02:33:19

настройку

02:33:20

инстан честно это что-то из нового Не

02:33:23

знаю на что оно будет влиять наверное

02:33:25

что-то

02:33:26

скроет смотрим

02:33:28

сейчас Ну да что-то сокращает свойства

02:33:32

не убирайте пожалуйста эта штука нам

02:33:35

пригодится мы сейчас сказали кликнув на

02:33:37

компонент по сути настройка изменить его

02:33:39

имя и даже присвоить ссылку чтобы можно

02:33:42

было ознакомиться с документацией

02:33:44

но кте теперь на дочерний элемент

02:33:48

инстанс вы увидите похожую историю но

02:33:51

немножко другое Первое он говорит это

02:33:53

название нашего инстанса рек один

02:33:57

а с которым

02:33:59

оп подождите не не неправильно вам

02:34:01

сейчас забиваю с толку не то не название

02:34:04

название в слоях мы сейчас другое

02:34:06

затрагивая он говорит с кем он связан

02:34:10

подсказка идёт то сейчас говорит что

02:34:12

этот прямоугольник его родителе является

02:34:15

рек один

02:34:19

да да На всякий случай усомнился может

02:34:21

ВС же как название нере если мы нажмём

02:34:23

компонент 4 например вот то что мы

02:34:25

создавали он поменяется на этот

02:34:27

компонент получается мы можем менять

02:34:31

родителей немножко сложно погодите мы

02:34:34

лишь сказали это вот здесь находится мы

02:34:36

ещё посмотрим мы ещё сами отом правый

02:34:40

элемен видите Ромби сразу

02:34:45

ком страни далеко

02:34:48

спрятался третья три точки вот что мы

02:34:51

хотели сказать как сделать изменени там

02:34:53

есть свойства дополнительные первое

02:34:56

можно сломать

02:34:57

инс сделать его обычной группой чтобы он

02:35:01

не был связан с нашим компонентом

02:35:03

instance быстрая клавиша Ctrl Alt B вот

02:35:06

эту клавишу запомнить стоит если Ctrl

02:35:09

Alt ещё более-менее как-то то ча зада

02:35:13

приходится где-то ломать дальше интерес

02:35:18

момен допустим вы сделали дизайн

02:35:20

настолько хорошо что хотелось бы чтобы

02:35:23

компонент стал таким же дизайном и все

02:35:25

остальные элементы стали такого же

02:35:27

дизайна нажму на пуш это отправляется

02:35:30

сюда а это теперь все остальные элементы

02:35:32

перекрашивать верну назад но последний

02:35:36

элемент сбросить все изменения Почему мы

02:35:38

выбрали весь

02:35:44

и вы меняли и у него будет тоже три

02:35:48

точки и тут он будет говорить что вы

02:35:51

можете сбросить сбросить всё сбросить

02:35:54

только обводку которую вы настраивали

02:35:56

или сбросить текст который вы написали

02:35:58

другой Я хочу сбросить обводку всё

02:36:01

осталось как есть видите можно порционно

02:36:04

что-то пробовать например октябрь я

02:36:06

напортачил нажимаю три точки я хочу

02:36:09

сбросить ему всё всё Октябрь вернулся в

02:36:12

изначальное положение а всё остальное я

02:36:14

оставлю был Ещё один нюанс интересный

02:36:17

вот здесь Но это связано с компонентами

02:36:19

мы дойдём до этой штуки там Ой это из

02:36:23

истории тоже самое с переменными и с

02:36:26

условиями примерно та же самая ситуация

02:36:29

тут мы пройдём тут всё

02:36:31

бесплатно хорошо

02:36:37

сложней вещь и мы начнём с

02:36:40

малого значит Мы создали сейчас

02:36:43

компонент янет уже тал в виде гарнитуру

02:36:47

заменил вот у нас было что-то создано Ну

02:36:50

так давайте вернём это у нас например

02:36:52

был H4 Ну возьмём в поиске найдём на H4

02:36:57

Окей если вдруг произошла проблема с

02:37:00

текстом начал переноситься как его

02:37:03

зафиксировать Ну либо вы делаете вручную

02:37:05

так фиксируете помните Да перенос где-то

02:37:08

Либо мы делаем его на ширину так как у

02:37:11

нас сейчас здесь моменты произошли она

02:37:13

спрятана вот на

02:37:14

ширину можете его поджать тут энтеро

02:37:17

было умышленно перенесено поэтому можно

02:37:19

было поджать по ширине Мы немножко

02:37:22

настраиваем та же самая история что мы

02:37:24

пытаемся сделать чтобы всё было

02:37:25

аккуратно всё было правильно

02:37:27

логично пока ставили как есть по сути

02:37:31

чтобы повторить наши эти элементы всё

02:37:34

уже

02:37:35

есть Давайте вместе с вами наверное Что

02:37:40

будем

02:37:43

делать соте думаю

02:37:47

Ладно давайте допустим возьмём ещё одну

02:37:49

карточку сверху тоже не очень хочу чтобы

02:37:51

мы сейчас сидели тели меняли

02:37:53

цвета вот наш компонент вот у наш

02:37:56

карточка которая должна ещё получиться

02:37:58

ещё одна и вот мы сделали дубликат Да

02:38:01

вот

02:38:03

дубликат даже Ту старую можно удалить Ну

02:38:06

было и

02:38:07

было что нам нужно сделать Дава

02:38:14

спереть

02:38:16

уже сза это возможно если у нас создан

02:38:18

стиль рный мы можем его применить и все

02:38:21

остальные элементы готовы нам нужно

02:38:22

изменить текст в компоненте можно менять

02:38:25

текст в компоненте всё тоже самое можно

02:38:29

изменить

02:38:32

цену будет тоже работать нужно заменить

02:38:35

иконку А вот тут нюанс Что такое иконка

02:38:44

этом но мы можем его добавить в

02:38:48

компонент Давайте посмотрим то есть по

02:38:51

сути мы можем Добавить сюда

02:38:53

компонент и даже его

02:38:56

скрыть а потом где нужно его включить мы

02:38:59

можем немножко сложно но я просто говорю

02:39:01

чтобы добавить элемент нужно запихнуть

02:39:04

его в компонент А как уже дальше

02:39:05

работать Мы это посмотрим но заметьте мы

02:39:09

сделали верно почему мы сделали

02:39:12

правильно Если клиент придёт и скажет

02:39:14

нет Давайте арки ближе к

02:39:17

ценнику понимаете момент да потом Клиент

02:39:21

говорит Нет давайте поменяем местами всё

02:39:23

же хотелось бы чтобы текст был плотнее

02:39:26

сюда ценник поднялся Вверх а это

02:39:29

опустилось

02:39:30

вниз представляете А что если эти

02:39:33

карточки не только их шесть тут есть а

02:39:36

что если они ещё на других страницах да

02:39:38

это же Боль просто без компонентов

02:39:40

Работать это очень долго а сейчас они

02:39:43

все

02:39:44

связаны так проверю вопросы есть

02:39:47

какие-то нет никаких вопросов но не

02:39:49

будут будете строить о не будут у меня

02:39:52

есть вопрос я упустила или как а а вот

02:39:56

смотри если созданные вот карточки можно

02:39:59

сделать один компонент и его привязать к

02:40:01

уже созданным вот допустим вот этим

02:40:03

карточкам или его нужно через Аль

02:40:06

перетягивать создавать новые всегда как

02:40:09

А я Я наверное понял что я понял что ты

02:40:11

хоче сейчас давайте это тоже Посмотрим

02:40:13

это хорошая штука ну это я не упустила

02:40:15

да Нет не упустила тут очень много эта

02:40:18

тема большая мы продолжим ещё на

02:40:19

следующем занятии я сейчас хотел бы

02:40:21

чтобы вы увидели Вот почему посмотрели

02:40:23

стили Почему посмотрели переменные

02:40:25

сейчас смотрим на компонент Посмотрите

02:40:27

сейчас под другим углом на этот проект

02:40:28

он совсем по-другому стал Да мы

02:40:30

чувствовали Вот это рутина добавить

02:40:32

здесь иконку Да это ж всё так долго

02:40:34

посмотрите как можно здесь всё

02:40:36

оптимизировать что если мы оптимизируем

02:40:38

отдельную иконку Можно ли компонентом

02:40:40

сделать Да можно ли сделать карточку

02:40:43

компонентом да здесь с делать карточку

02:40:46

компонента Да сколько здесь компонентов

02:40:49

Вот ещё компонент вам сама по себе

02:40:51

иконка опять компонентна Да тут можно

02:40:54

всё оптимизировать и меняем в одном

02:40:56

месте всё меняется красота Ну ладно

02:40:58

давайте посмотрим смотрите нюанси

02:40:59

интересный раз мы сейчас затрагивая даже

02:41:02

микроэлементы это лучше подойдёт нам

02:41:04

давайте возьмём

02:41:07

иконочный её отдельно просто вынесите

02:41:12

отдельно она уже не в компоненте она

02:41:13

отдельно вынесена и сделайте её

02:41:16

[музыка]

02:41:21

компонентом

02:41:22

хорошо Значит теперь если мы скопирую

02:41:26

компонент сделаем его

02:41:29

инстан мы можем его разместить в другой

02:41:33

компонент ещё раз если вы сделали копию

02:41:36

ин Вы можете положить в другой компонент

02:41:40

но вы не можете компонент разместить

02:41:44

комне самостоятельный элемент зачем мы

02:41:48

это сделали оптимизация Клиент говорит

02:41:50

Замени иконку заменилась иконка

02:41:54

везде что продолжим дальше Потому что

02:41:58

тут есть интересная штука все инстансы

02:42:02

неважно какие они от карточки от иконки

02:42:06

как мы сказали дочерние от этой карточки

02:42:09

всё это одно и

02:42:12

тоже это некий дочерний элемент связа

02:42:15

компонентов у них у всех есть родители

02:42:18

кликнул на карточку этот родитель

02:42:20

rectangle 1 у этого родителя ЭПС 1 у

02:42:25

этого родитель компонент четыре любую

02:42:28

любой инстанс вы можете сменить родителя

02:42:31

теперь Наша красная карточка станет кнл

02:42:35

1 теперь наш шарик

02:42:37

станет компонентом 4 А этот элемент

02:42:41

может стать эллипсом То есть это всё

02:42:43

одно и тоже просто мы меняем родителей

02:42:46

Следовательно элемент становится от

02:42:48

родителя Ну

02:42:49

[музыка]

02:42:50

схожим это к истории что Не обязательно

02:42:55

искать этот компонент где-то там его

02:42:57

забирать с этой точки Но то что я бы

02:42:59

хотел вас как можно раньше научить для

02:43:02

вас компоненты - это Альфа и Омега его

02:43:04

терять нельзя его можно удалить его

02:43:07

можно восстановить даже если вы Удалите

02:43:09

Но лучше всего размещайте все такие

02:43:11

объекты на отдельной секции Так вы

02:43:14

сможете хранить сохранять от разных

02:43:18

изменений потому что компонент - это

02:43:21

отдельно А инстанс на макете компонент

02:43:25

всегда будет где-то там рядом для

02:43:27

разработчика как некая помощь А все

02:43:30

инстансы всегда на макете

02:43:31

[музыка]

02:43:33

будут

02:43:35

Хорошо Давайте ещё немножечко рассмотрим

02:43:38

потому что ту тут очень

02:43:40

много

02:43:44

с контент цвет перекрасить текст

02:43:47

заменить это контент несложный как

02:43:49

только мы что-то меняем связь начинает

02:43:52

ломаться и мы сказали что можно её

02:43:53

сбросить Ок Но помните мы удалили меня А

02:43:57

можно я спрошу Давай спроси А вот то что

02:44:00

мы создаём отдельную секцию с этими

02:44:02

компонентами получается неправильно

02:44:04

создавать Вот как сейчас карточку целую

02:44:06

Да компонентам делать делать компоненты

02:44:09

каждый вот этот элемент отдельно текст

02:44:11

отдельная иконка там аватарки просто вот

02:44:14

собира

02:44:16

из вот этих инв собирать эти

02:44:21

карточки се философски такой вопрос

02:44:23

задаёшь

02:44:24

Нужно ли это делать Обязательно нет

02:44:28

можно группу Правильно ли делать

02:44:32

компонентом и карточка будет работать

02:44:35

как надо но всегда помните вот есть

02:44:37

клиент У него есть какие-то там странные

02:44:39

свои замашки И сегодня у вас аватарки

02:44:41

шарики а завтра квадратики вот Подумайте

02:44:45

мы можем это не сделать но возможно нам

02:44:46

придётся больше править А если мы хотим

02:44:49

упростить себе жизнь то в идеале нужно

02:44:51

всё что возможно оптимизировать шарики

02:44:54

аватарок компонент иконка компонент

02:44:57

понимаем что смотрите Вопрос хороший

02:44:59

Нужно ли делать компонент

02:45:02

тексту зачем а стайл Что такое йл же то

02:45:06

же самое и делает Зачем нам делать из

02:45:08

него компонент исключение только когда

02:45:10

вы говорите о структуре например

02:45:12

структура из трёх элементов это может

02:45:14

быть компонент пому текста вот допустим

02:45:16

А ну тоже ширина автошина это тоже это

02:45:19

тоже можно да да да всё тоже

02:45:23

самое мы так усложняем оди настоящий

02:45:26

объект как компонент - это странный

02:45:28

элемент он вообще считайте любой

02:45:30

компонент это есть фрейм он с этой

02:45:33

оболочкой он начинает где-то изза этого

02:45:35

выходить боком то есть только если э

02:45:38

оболочка

02:45:44

совме самая большая и классная

02:45:46

оптимизация которую мы сделаем в этом

02:45:48

макете все иконки одинаковых размеров на

02:45:51

самом деле и по сути Нам нужно только

02:45:53

создать несколько вариаций иконок

02:45:55

вариант С Серым фоном вариант с обводкой

02:45:57

а вариант там не знаю какой-то ещё был с

02:46:01

заливкой А это оно и есть да два

02:46:03

варианта три вот третий вариант без фона

02:46:05

Но это тот же самый шарик просто мы его

02:46:07

не видим и ещё по-моему какой А и Чёрный

02:46:09

ка четыре Первая Большая оптимизация и

02:46:13

мы ещё просто с вами не прошли вариант

02:46:15

есть в компонентах несколько вариаций

02:46:17

можно создавать

02:46:19

второе логотип сейчас на этой странице

02:46:22

он один но он же всегда на всех

02:46:24

страницах будет многократно

02:46:26

использоваться и возможно в будущем

02:46:28

логотип изменится Да даже спокойно

02:46:30

компонент це что насчёт верхней панели

02:46:34

Нужно ли каждый отдельный элемент делать

02:46:36

компонентом здесь немножко нет компонент

02:46:41

мы говорим как структура если мы сейчас

02:46:44

при своим сти

02:46:45

то это будет размер текста гарнитура всё

02:46:48

как надо но весь элемент компонента

02:46:52

можно создать потому что он будет на

02:46:54

остальных страницах использоваться А ещё

02:46:56

мы скажем Кнопка будет повторяться 100%

02:46:59

где-то будет окрашиваться Мы же можем

02:47:01

поменять на другой текст это будет

02:47:03

компонентом и эта

02:47:10

плашек если дизайн изменится то

02:47:13

изменится Просто из этого мы понимаем

02:47:15

конки мы уже оптимизировали возможно вы

02:47:17

создадите вот этот элемент как компонент

02:47:19

это нормальная практика Но потом всё вот

02:47:21

этот компонент нужно завернуть это

02:47:23

цельная структура Нужно ли делать этот

02:47:26

элемент всем элементам компонент ну вряд

02:47:29

ли на других страницах скорее всего не

02:47:31

будет а нужно ли этот элемент со

02:47:34

стрелочкой объединить компонент Неплохая

02:47:36

идея скорее всего нам придётся

02:47:38

возвращаться по этой стрелочки много

02:47:40

нужно ли всю пше делать компонент ну

02:47:43

ното нужно сделать компонентом и сделать

02:47:46

её столько сколько нужно раз с иконками

02:47:48

мы уже разобрались с карточками

02:47:50

разобрались Верхняя структура - это

02:47:53

компонент вторая структура Ну можно

02:47:57

сделать компонентом если мы думаем что

02:47:59

этот календарь будет каким-то образом

02:48:01

меняться Когда вы сделали вот этот

02:48:03

заголовок посмотрите это же Одно и тоже

02:48:06

этот заголовок и даже этот одинаковый

02:48:08

заголовок и этот заголовок вот поэтому

02:48:10

мы его оптимизировали а вот здесь тоже

02:48:12

тот самый заголовок просто иконки

02:48:15

смотрите на структуру функционально Она

02:48:18

же точно такая же да А если она

02:48:19

изменилась по ширине это же можно

02:48:21

подкорректировать изменилась иконка это

02:48:24

можно подкорректировать заменил текст

02:48:26

Это корректируется здесь просто вот

02:48:28

такое членение здесь та же самая история

02:48:31

можно всем элементам компонент и с

02:48:33

правой иконка тоже компонент и слево

02:48:35

иконка компонент А вот это делать как

02:48:37

компонент Ну тоже не имеет

02:48:41

сго

02:48:43

сде поменять в одном месте и

02:48:48

готово так разобрались теперь момент

02:48:51

странный мы сказали можно добавить

02:48:53

элемент но вы же видели Я удалил элемент

02:48:56

нажал

02:48:57

Del поймите удалить невозможно удалить

02:49:00

можно только в компоненте в инстанс

02:49:02

элемент скрывается Посмотрите в

02:49:04

слоях этого элемента есть глазик вот он

02:49:07

вы его никогда не можете ударить Вы

02:49:09

можете только скрыть Вот пому я м

02:49:11

показал что вот у на две

02:49:13

и

02:49:16

а на инстанс Ну если вы ничего не делали

02:49:18

видите у понажимал Вы можете показать

02:49:20

тот элемент который

02:49:22

нужен интересно Это не единственный

02:49:25

подход для таких отображений но чтобы вы

02:49:27

понимали запихнуть ничего

02:49:30

нельзя Ничего Удалить Нельзя кроме как с

02:49:32

глазика А вот в компоненте можно

02:49:35

добавить в компоненте можно тоже удалить

02:49:37

и в

02:49:43

компоненте через глазик опять открыть

02:49:46

тоже такая ситуация хорошо эта тема

02:49:50

долгая эта тема сложная мы её ещё будем

02:49:52

по чуть-чуть мы будем пробовать с

02:49:54

карточек потом немножко

02:50:13

позапозапрошлом

02:50:15

а с другой стороны я хотел бы чтобы вы

02:50:17

увидели вот этот Прогресс и сразу же

02:50:19

разобрались что помните начало вот самый

02:50:21

первый проект мы Ну так вот Разместили

02:50:24

какие-то элементы мы не знали все

02:50:26

инструменты как и что делать на второй

02:50:28

стадии мы разобрались что как из чего

02:50:31

создаётся как это сделать оптимизировано

02:50:34

как можно сгруппировать чтобы не

02:50:35

потеряться на третье мы сказали что есть

02:50:38

векторные Эмен можем делать им вставлять

02:50:41

илм создавать свои декоратив э че уроке

02:50:45

мы сечас увидели мы делали очень сложную

02:50:48

работу мы повторяли элементы с нуля

02:50:51

добавив стиль вы уже можете легко

02:50:53

контролировать если Мак Скажет не тот

02:50:56

оттенок серого Вы можете его переправить

02:50:58

а добавляя ещё компоненты которые только

02:51:00

только мы затронули мы можем Всё

02:51:04

оптимизировать оптимизировать все

02:51:06

элементы будут связаны и это прекрасно

02:51:09

без этого дизайнер не может быть

02:51:11

дизайнером если о знает что тако

02:51:13

компонент плюс ещ переменные вы сейчас

02:51:16

прошли то что многие дизайнеры даже не

02:51:17

знают чтобы вы понимали по что этой

02:51:20

функции год ровно год чтобы знали что за

02:51:24

целый год ещё не все дизайнеры знают и

02:51:26

ко мне приходили тоже говорили Мак Что

02:51:27

такое переменные вы знаете уже и я

02:51:30

рассказал когда что нужно использовать

02:51:32

домашка надо домашка ваша задача через

02:51:37

переменные

02:51:43

через добавить что как мы прошли с вами

02:51:46

без компонентов компоненты не надо

02:51:48

компоненты ещё не дошли до этого Хорошо

02:51:52

Окей какие-то вопросы ещё остались Да у

02:51:55

меня есть а можно как-то быстренько Я

02:51:58

знаю что стили можно через слш в группу

02:52:01

сразу же добавлять там

02:52:05

прописывает этого стиля да А можно

02:52:07

как-то в

02:52:09

перемен там СШ работает Я просто сказала

02:52:12

что не работает честно скажу со стайм Я

02:52:15

даже сам не знал ну бывает видишь кто-то

02:52:18

где-то скажет статью напишет И хорошо

02:52:20

что ты сейчас мне подсказала буду об

02:52:22

этом думать с переменными может быть та

02:52:24

же самая история я тебе к сожалению не

02:52:27

подскажу те не подскажу Ну наверное есть

02:52:31

где искать эту информацию наверное

02:52:33

быстрее было бы только через интернет

02:52:36

через документацию замана комбинацию

02:52:39

точно найдём остальное Нет единственное

02:52:42

что я могу вам предложить интересную

02:52:44

такую штуку с Хотя я ссылочку всё равно

02:52:47

приложу сюда но отдельно создали файл

02:52:50

посвящённый и переменным и стайм и даже

02:52:54

компонентом Я сейчас вам его покажу где

02:52:56

если даже сами Если захотите найти Если

02:52:58

вы нажмёте на планет комьюнити вот здесь

02:53:02

откроется Вот такая страничка и ваша

02:53:05

задача найти автора

02:53:07

гма Напишите просто в поиске

02:53:10

гма так да Дальше нажимаем на автора гма

02:53:13

вот

02:53:15

и появляются все файлы которые они

02:53:17

создавали не создавали обучающие файлы

02:53:19

они развали Может быть там тоже есть

02:53:21

значит нужно разделять переменные тоже

02:53:24

мы сказали вариативные шрифты переменные

02:53:27

шрифты А есть переменные которые сегодня

02:53:28

мы прошли вот эти переменные вот занятие

02:53:32

тут оно скину Я вам ссылочку чтобы Вы

02:53:35

могли отдельно тоже посмотреть что там в

02:53:38

принципе

02:53:43

вре там сказано как это всё работает я

02:53:47

просто

02:53:52

приближная рассказывают и может быть

02:53:55

может быть есть какая-то здесь

02:53:56

вероятность на самом деле есть разные

02:53:58

клавиши комбинации Я тоже не хотел вам

02:54:01

некоторые моменты с выделением

02:54:03

рассказывать не вижу в этом никакого

02:54:04

смысла Должно всё постепенно Да вот

02:54:07

проходится Вот видите говорят

02:54:09

переключение тёмный темы спасибо на этом

02:54:12

Вот ещё переменные тут где-то есть

02:54:15

то есть Может быть где-то тут и будет

02:54:16

написано быстрые клавиши бывают

02:54:18

подсказки та же самая история это мы

02:54:20

сейчас перешли на переменные если ниже

02:54:23

пролистайте вы найдёте

02:54:25

компоненты где-нибудь Ну это в самом

02:54:28

низу вот вариативные шрифты которые мы

02:54:30

смотрели интерактивные компоненты есть

02:54:32

просто здесь есть много шаблонов А есть

02:54:34

обучающие

02:54:36

файлы нужно то чтобы посидеть только

02:54:39

поискать было где-то здесь компоненты а

02:54:42

если нет то у меня она всё равно есть

02:54:44

Может они объединили Кстати может быть в

02:54:45

интерактивных компонентах вместе сделали

02:54:47

анимацию СН

02:54:49

завозили компоненты про Ну вот это вот

02:54:52

это тоже кстати вот это она скорее всего

02:54:54

есть они его объединили потом можете

02:54:57

посмотреть но компоненты Мы ещё

02:54:58

рассматриваем жуём всё

02:55:01

будет

02:55:02

хорошо

02:55:05

шо А подскажи пожалуйста Смотри вот если

02:55:08

создавать

02:55:10

переменные то они будут приме только к

02:55:14

данной странице или они будут Прям

02:55:17

вообще ко всем страницам вот которые

02:55:20

создаются ко всем страницам стайл и

02:55:22

переменно ко всем страницам но в этом

02:55:25

файле Где вы

02:55:28

работаете Ну то есть если я создам новую

02:55:31

страницу например то мне надо будет к

02:55:33

новому проекту грубо говоря опять

02:55:35

создавать новые новые переменные Подожди

02:55:38

Смотри Вот у меня проек мы нам работаем

02:55:43

есть ди переменные сти они есть но если

02:55:47

ты создашь новый файл да то здесь не

02:55:51

будет этого Поэтому мы сказали есть

02:55:54

командные библиотеки которая это и

02:55:56

Решала бы в платной версии или как Я

02:55:59

немножко показал Вы можете взять все

02:56:01

стили правой клавишей можете их вырезать

02:56:04

если надо и потом сюда вставить

02:56:13

Коста можно так вырезать переменный не

02:56:17

вырезать Вот это нет их только создавать

02:56:20

Угу Да да да допустим Давайте попробуем

02:56:23

взять тут момент будет неприятный сейчас

02:56:25

увидите вот мы что-то наложили смотрим

02:56:28

Ага вот есть у нас что-то а текст Есть

02:56:31

есть прекрасно я беру вот этот элемент

02:56:33

компонент причём смотрите беру на другом

02:56:35

файле

02:56:37

Вставляю что вы первое увидели компонент

02:56:39

сделался компонентом дочернего нету он

02:56:43

создался новый

02:56:44

это может быть беда Ну погодите дальше у

02:56:47

него были стили внутри стиль нету видите

02:56:50

стиля нету вынул стиль сломался но В

02:56:55

некоторых случаях Я не знаю наверно Вот

02:56:57

давайте дочерний элемент сейчас дочерний

02:56:59

взял скопировал вставил сюда дочерний

02:57:02

элемент связан с тем с макетом Как это

02:57:05

понять Посмотрите написано рек оди и тут

02:57:07

такая стрелочка если я нажму он типа

02:57:10

хочет отправиться на тот файл Если у вас

02:57:12

есть доступ он его откроет То есть

02:57:14

получается компонент может работать за

02:57:16

пределами файлов Но это такая практика

02:57:18

очень опасная потому что непонятно С чем

02:57:20

он связан непонятно Сможете ли вы его

02:57:22

отредактировать и лучший вариант прийти

02:57:24

на новый свой файл создать новый

02:57:26

компонент сделать новые связи Просто

02:57:29

нужно заменить родители помните мы

02:57:30

сказали ну родитель новый стал Вот

02:57:33

был там на макете А сейчас рек 2 беру

02:57:36

нажимаю на него и говорю ре2 теперь есть

02:57:39

только нужно понимать Где мы работаем 4

02:57:41

вот 2 поня теперь он связан с ним

02:57:45

доказательства

02:57:47

вот а вот стили придётся вот так мучить

02:57:51

Ну так есть можете создать отдельный

02:57:54

файл запихивать туда все отдельные

02:57:56

элементы кнопочки создать там множество

02:57:58

разных цветов Потом отсюда забирать на

02:58:01

свои макеты кидать

02:58:03

либо создать командный проект сделать

02:58:08

его Учебной версии и там становится у

02:58:11

вас доступ на библиотеку Но скажу по

02:58:14

своему а опыту

02:58:16

э с конечно с библиотекой удобно

02:58:19

работать если вы заранее это всё сделали

02:58:21

Если вы заранее всё подготовили в

02:58:24

реальности мне больше эффективнее брать

02:58:27

существующий проект делать его дубликат

02:58:30

и на основании этого дубликата Ну

02:58:33

создавать дизайн какие-то элементы брать

02:58:35

из других проектов Ну то есть можно

02:58:37

создать Кит выложить все элементы А

02:58:39

можно э кусочками забирать эти элементы

02:58:42

Ну сами Выбирайте что вам ближе что вам

02:58:44

по духу тут уже Дело каждого Ну

02:58:47

библиотека конечно круче с библиотекой

02:58:49

удобнее Но это всё надо настраивать

02:58:51

хорошо Так здесь Всё мы сказали тут я

02:58:54

всё по сделал по закл вопрос мо тея

02:58:56

попросить показать Ну на твоём

02:58:59

каком-нибудь рабочем проекте как вообще

02:59:01

выглядит вот эта страница с с

02:59:03

компонентами хорошо Сейчас я вам к

02:59:06

сожалению не покажу мы Когда пойдём

02:59:09

давай так анастасие договоримся на

02:59:10

следующем занятии Ты мне напомнишь ещё

02:59:12

раз я не забыл Как называется Кит киты

02:59:15

или как вот

02:59:16

UI страница компонентов Ну а страницу

02:59:20

где стили все обычно говорят просто

02:59:22

страница стилей отдельно создают файл

02:59:25

Там все элементы размещают Т - это ну

02:59:28

тоже можно отнести Кит это элементы

02:59:31

собранные из интерфейсов бывает Кит

02:59:33

иконок только можно в каком-то роде

02:59:36

сказать что тоже Кит Ага хорошо спасибо

02:59:42

пожалуйста хотела Да насчёт стиля ещё

02:59:46

спросить подскажи пожалуйста а есть есть

02:59:49

какая-то возможность Фима посмотреть

02:59:52

наоборот например выбрать стиль и

02:59:54

посмотреть каким объектом назначен Этот

02:59:58

стиль А ну можно мы же помните нажимали

03:00:03

на скажем что-то общее большое У нас

03:00:07

есть все цвета которые представлены там

03:00:09

тоже самый стиль есть и при наведении

03:00:12

появляется снайперский прицел

03:00:14

вот он А вот оно что Да оно так и сделал

03:00:17

раньше его тоже не было

03:00:21

пожалуйста ладно Значит сегодня мы много

03:00:24

всего прошли Я знаю компонент штука

03:00:27

сложна его нужно переварить Остановитесь

03:00:29

пока на стилях стили перемены

03:00:31

покопайтесь понажимал

03:00:36

никаких вопросов что это податливый

03:00:39

элемент не получится Так что случайно

03:00:41

нажали ой катастрофа Как мне дальше

03:00:43

делать Нет вы должны всё это понажимал

03:00:48

однако я вам мы как договорились на

03:00:51

следующем занятии покажу свои проекты вы

03:00:54

увидите что мы сейчас говорим заметьте

03:00:56

идеальный случай идеальный случай когда

03:00:59

всё проработано вот вам пример сегодня

03:01:01

ночью нужно было закрыть

03:01:04

заказ Какой ещё компонент Извините меня

03:01:07

какой ещё стиль сегодня ночью вот сейчас

03:01:10

нужно закрыть элемент хедера там с Хиро

03:01:14

блоком верхний элемент Какие ещё

03:01:16

переменные Какие ещё интерактивные

03:01:18

прототипы никто этого делать в жизни не

03:01:20

будет никаких исследования нужно закрыть

03:01:23

быстрее заказ вот в других случаях время

03:01:27

у вас полгода Ну конечно Вы будете

03:01:29

делать и переменные стили А в других

03:01:31

случаях опять день просто мы понимаем

03:01:34

что где-то это рационально в больших

03:01:35

объёмах конечно же а где-то мы просто

03:01:38

потратим много времени на ломая

03:01:40

компоненты задавая новые связи там потом

03:01:44

изучим увидите там свои проблемы есть

03:01:47

смот Где ситуаци Будьте гибким

03:01:49

дизайнером вот мы прошли с вами

03:01:51

специально чтобы вы увидели вот как есть

03:01:53

вот это делается так Но можно было бы

03:01:56

получше сделать Да мы могли сейчас с

03:01:58

вами скать компоненты и без них вообще

03:01:59

всё строить и стили без них строить но

03:02:01

было бы удобнее зна компоненты и теперь

03:02:04

вы знаете как можно где-то ограничить

03:02:06

где-то сделать скругление можно

03:02:12

заня ясна делаем Всем спасибо за занятие

03:02:15

и всем пока-пока

03:02:19

отдыхайте отдыхайте пока-пока

03:02:28

пожалуйста