По ходу стрима делал пометки, думаю, пригодятся: 1:42 Figma Hotkeys 3:22 План стрима 7:30 Что такое Figma 09:45 Веб версия vs установленная 10:45 Локальные шрифты в веб версии 12:25 Навигация по Фигме 13:12 Drafts (скопировать проект к себе в аккаунт) Интерфейс 14:45 Панель слоев (группы, фреймы) 23:10 Бургер 26:42 Привязка к пиксельной сетке (Бургер -> Preferences -> Snap to Pixel Grid) 29:44 Скрытое меню (Масштаб, Rulers, направляющие) и др Базовые инструменты 35:02 Панель инструментов - фреймы 38:00 Панель инструментов - фреймы - обрезка контента фрейма (Clip content) 39:50 Панель инструментов - фигуры (rectangle, line, ellipse) 49:40 Панель инструментов - текст 50:32 Замер расстояний между элементами 53:35 Панель инструментов - текст - размер текстового контейнера 57:19 Измерение padding 58:33 Панель инструментов - текст - вкладка Code (css свойства в Figma) 1:00:30 Панель инструментов - рука 1:00:45 Комментарии в Figma Атрибуты слоев 1:07:22 Атрибуты слоев 1:11:25 Панель атрибутов 1:12:18 Как поместить элемент внутрь фрейма 1:13:55 Панель атрибутов - выравнивание относительно фрейма 1:15:00 Панель атрибутов - Constraints (параметры привязки контента в фрейме) 1:20:00 Панель атрибутов - Layer (полупрозрачность) 1:22:50 Панель атрибутов - Fill (заливка цветом, градиенты, пипетка и т.п.) 1:31:40 Панель атрибутов - Fill - добавить изображение (image) 1:36:00 Ещё один способ добавить изображение 1:36:55 Экспорт изображений из макета (jpg, png, svg) 1:46:12 Панель атрибутов - Stroke 1:50:27 Панель атрибутов - Effects 1:53:30 Поместить фото в фрейм, Resize to Fit 1:54:30 Практика работы с фреймом (добавление прямоугольника-фона по размеру фрейма) 1:56:27 Панель атрибутов - Effects (продолжение) - Layer Blur 1:57:57 Типографика (свойства текста) 2:03:47 Типографика - Paragraph spacing 2:05:40 Типографика - выравнивание текста 2:08:00 Типографика - дополнительные параметры (uppercase, lowercase, capitalize и т.п.) Многократные объекты (компоненты и стили) 2:11:20 Что такое многократные объекты (компоненты), Instance 2:17:40 Состояния компонентов (hover, active и т.д.), параметры Instance 2:20:57 Создание компонента 2:22:10 Изменение параметров отдельных Instance, возврат к основным параметрам компонента 2:24:57 Ограничения по изменению Instance 2:26:01 Стили и отличия в интерфейсе 2:28:11 Создание нового стиля (create style) 2:28:45 Об именовании переменных, фреймов и пр. 2:31:17 Изменение стиля 2:33:04 Применение стиля 2:34:33 Именование стиля 2:35:25 О заголовках HTML Прототипирование 2:41:15 Прототипирование (Prototype) 2:42:30 Прототипирование на примере 2:53:40 Как делиться макетом 2:57:10 Лайфхаки 2:58:39 Сетка 3:07:30 Чтение комментариев, ответы на вопросы, итоги
Если бы хоть один препод в универе сказал "я понимаю, потому что с этим работаю кучу лет и для меня это просто, а вам сложно" я бы ему премию дал прямо из своего кармана. Спасибо большое!
Спасибо за стрим. Просто потрясающая подача материала. По звуку все огонь. Твоя бодрость прям заряжает. Четкий план, и очень круто, что ты мониторишь аудиторию в процессе стрима. Лайк и подписка))
Очень круто, спасибо за стрим, сегодня посмотрела в записи и прям очень понравилось =) и подача - веселая, позитивная, нормальная по быстроте, и качество (видео, звук - всё круто!), и, конечно, сам материал. Мне очень понравилось, буду смотреть ещё ваши стримы и видео =)
Благодарю!!! Понятное донесение информации. Поздравляю с завершением курса) Успеха вам. Было бы интересно послушать вас по дизайну (как,зачем, для чего) использовалось
Спасибо большое, так подробно рассказали про то что лучше работать в установленной версии, а не в браузерной. Я в настоящее время учусь на платных курсах веб-дизайна и не наставник, не преподаватель об этом не сказали, что лучше работать в будущем в установленной версии. Не слова о том, что в браузере не все шрифты загружаются нам на обучение не сказали.
Салам из Казахстана Тони. Досмотрел твой видеокурс по фигме сегодня. Инфу про этот видеокурс получил на потоке RS2022Q1 в описании к само изучению. Честно скептически относился к этой лекции. Думал очередной нудный и длинный гайд. Но реально не пожалел, что просмотрел все видео. Ты много фишек и мелких нюансов открыл между дел по ходу стрима(дьявол в деталях, например с градиентом совет понравился, если вдруг в макете дизайнер шкалу цвета задерет выше, чем нужно и т.д. и т.п.). Которые обычно многие знающие люди стараются не делится и не раскрывают. Видно, что ты с душой подошел к данному видео. Был 100% открыт. Поэтому рахмет тебе большой. Благодарен тебе за этот гайд. Многое он мне открыл в фигме.
Спасибо за отличные видео! Особенно по фигме. Меняю курс с фото дизайнера на веб и ваши уроки очень помогли особенно это видео и курс - мыслить как веб дизайнер. Собрала с Вами шаблон! Все получилось все работает- ЗДОРОВО! Попробую теперь дальше сама. Жду новых выпусков.
Очень крутой стрим! Информации много, но надо самому все поделать и разобраться. Все очень здорово изложено. Вообщем, лайк и подписка на канал... в лучших традициях ютуба=)
Спасибо большое за видео) стало более приятней пользоваться фигмой)) хочется так же спросить нет ли плагина который бы проанализировал бы все старницы вытащил бы все цвета, создал бы стелевые переменные (name-1, name-2...) и связал бы их с этими name-1, name-2 и тд, вроде как не сложно это все сделать т.к. по идеи в фигме идет дерево а нужно всего-лишь то пройтись по всему деревоу сохранить все значения colors а после произвести привязку, я попытался найти что-то подобное но так и не смог( или может быть есть плагин который бы вытаскивал текст в json формате)
Почему свечение и градиент - это мусор? Мне очень даже нравится обилие градиента и свечения в одном из проектов Тони на behance - BIG-DATA-Monetization-Blockchain
Очень хороший урок. Осталось пару вопросов по поводу импорта картинок. Как различить при конвертации векторная иконка или svg? Несколько раз видел как дизайнер вместо векторной графики вставлял png, и получается что при импорте png просто оборачивалась в svg теги. Как отличать такую графику в макете? И второй вопрос по поводу извлечения графики если она находится в фрейме. Если в шаблоне попадается круглая картинка. Я так понимаю что скругление нужно делать в верстке, а не вставлять заранее скругленные картинки. Как достать такую графику в исходном размере?
Подскажите: В панеле слоев, у каждого слоя есть иконка блокировки и видимости. В моем проекте этих иконок нет и слои заблокированы, как починить? заранее спасибо
друзья, всем привет.. группа новичков веб разработчиков ищет дизайнера, для совместного создания крутого сервиса.. работаем за идею, но также обещаем опыт, скил работы в команде, и проект в портфолио..
На полную высоту чего в разных мониторах разная высота 1280 1920 пиксеоей че какая высота то?!!? 01:09:05 как отцентрировать что то относительно или внутри чего о че зажать ?
спасибо за инфу, ты реально крутой спикер))) пытаюсь перейти на "Сайт моего курса по UX UI дизайну: @t" и не грузится, то ли он такой тяжелый, то ли из сафари не грузится, прямо пытка.
Зачем 3 часа рассказывать про кнопки? Полная пустота! Такие вещи начинают объяснять с верстки простого проекта и далее уже в процессе верстки показывать какие функции для чего необходимы.
По ходу стрима делал пометки, думаю, пригодятся:
1:42 Figma Hotkeys
3:22 План стрима
7:30 Что такое Figma
09:45 Веб версия vs установленная
10:45 Локальные шрифты в веб версии
12:25 Навигация по Фигме
13:12 Drafts (скопировать проект к себе в аккаунт)
Интерфейс
14:45 Панель слоев (группы, фреймы)
23:10 Бургер
26:42 Привязка к пиксельной сетке (Бургер -> Preferences -> Snap to Pixel Grid)
29:44 Скрытое меню (Масштаб, Rulers, направляющие)
и др
Базовые инструменты
35:02 Панель инструментов - фреймы
38:00 Панель инструментов - фреймы - обрезка контента фрейма (Clip content)
39:50 Панель инструментов - фигуры (rectangle, line, ellipse)
49:40 Панель инструментов - текст
50:32 Замер расстояний между элементами
53:35 Панель инструментов - текст - размер текстового контейнера
57:19 Измерение padding
58:33 Панель инструментов - текст - вкладка Code (css свойства в Figma)
1:00:30 Панель инструментов - рука
1:00:45 Комментарии в Figma
Атрибуты слоев
1:07:22 Атрибуты слоев
1:11:25 Панель атрибутов
1:12:18 Как поместить элемент внутрь фрейма
1:13:55 Панель атрибутов - выравнивание относительно фрейма
1:15:00 Панель атрибутов - Constraints (параметры привязки контента в фрейме)
1:20:00 Панель атрибутов - Layer (полупрозрачность)
1:22:50 Панель атрибутов - Fill (заливка цветом, градиенты, пипетка и т.п.)
1:31:40 Панель атрибутов - Fill - добавить изображение (image)
1:36:00 Ещё один способ добавить изображение
1:36:55 Экспорт изображений из макета (jpg, png, svg)
1:46:12 Панель атрибутов - Stroke
1:50:27 Панель атрибутов - Effects
1:53:30 Поместить фото в фрейм, Resize to Fit
1:54:30 Практика работы с фреймом (добавление прямоугольника-фона по размеру фрейма)
1:56:27 Панель атрибутов - Effects (продолжение) - Layer Blur
1:57:57 Типографика (свойства текста)
2:03:47 Типографика - Paragraph spacing
2:05:40 Типографика - выравнивание текста
2:08:00 Типографика - дополнительные параметры (uppercase, lowercase, capitalize и т.п.)
Многократные объекты (компоненты и стили)
2:11:20 Что такое многократные объекты (компоненты), Instance
2:17:40 Состояния компонентов (hover, active и т.д.), параметры Instance
2:20:57 Создание компонента
2:22:10 Изменение параметров отдельных Instance, возврат к основным параметрам компонента
2:24:57 Ограничения по изменению Instance
2:26:01 Стили и отличия в интерфейсе
2:28:11 Создание нового стиля (create style)
2:28:45 Об именовании переменных, фреймов и пр.
2:31:17 Изменение стиля
2:33:04 Применение стиля
2:34:33 Именование стиля
2:35:25 О заголовках HTML
Прототипирование
2:41:15 Прототипирование (Prototype)
2:42:30 Прототипирование на примере
2:53:40 Как делиться макетом
2:57:10 Лайфхаки
2:58:39 Сетка
3:07:30 Чтение комментариев, ответы на вопросы, итоги
Спасибо
Вау, спасибо! 🤩
Большое спасибо!
Супер! Спасибо!
отличная работа 👍👍
Если бы хоть один препод в универе сказал "я понимаю, потому что с этим работаю кучу лет и для меня это просто, а вам сложно" я бы ему премию дал прямо из своего кармана. Спасибо большое!
автору дай
Сходи в школу, там есть Трудовик)
Вы очень круто преподносите информаию!!! Все понятно буквально, заходит на ондном дыхании. Спасибо, буду вас рекомендовать.
Лектор бесподобен, стрим шикарен, огромная благодарность)))
насколько это проще чем фотошоп! спасибо за урок! смотрю в записи, ура! классно и понятно! просто! господи храни Figma!)))
Спасибо за стрим. Просто потрясающая подача материала. По звуку все огонь. Твоя бодрость прям заряжает. Четкий план, и очень круто, что ты мониторишь аудиторию в процессе стрима. Лайк и подписка))
ой. забыла. Вы очень крутой лектор, очень хорошо преподносите информацию.
прочитал комменты и тут понял что нужно досмотреть эту видео если реально хочется изучать фигму!!!!!!!!
всё супер-круто! СЛЫШНО и ПОНЯТНО! побольше бы Ваших эфиров!
посмотрела с большим интересом, бегу пробовать все лайфхаки! :)
Спасииибо огромное за Ваш труд, просто луууучший, Бог дизайна!!!!!!!
смотрела в записи. огромное спасибо за видео! очень понятно все ))
Учитель от Бога. Так доступно излагать нужен талант.
Очень хорошее видео! Тони заряжает своим драйвом, спасибо!
Спасибо! Для верстальщика - одно из лучших обучающих видео по работе с Figma
Люблю тебя, брат!
Структурировано, просто и наглядно :)
Шикарное видео! Круто структурирована и великолепно подана информация. Большое спасибо! Даже с нескольких аккаунтов лайк поставил)
Харизма зашкаливает!!! Спасибо за подробное обьяснение
Очень приятно и легко слушается стрим! огромное спасибо за такой замечательный подход к делу 👍
Очень много инсайдов, я новичек и прям кайфую. Спасибо за труд!
Отдельное огромное спасибо за Таймлайн!
Спасибо очень крутая лекция! Не устаю слушать
Лекция просто огонь!! Прекрасное преподнесение информации, нескучно и познавательно)) Большое спасибо!
Чел! Ты крутой! Спасибо тебе! Очень душевно!
дай бог те здоровья за такую лекцию)
Спасибо, очень круто! Смотрела на одном дыхании!
Очень круто, спасибо за стрим, сегодня посмотрела в записи и прям очень понравилось =) и подача - веселая, позитивная, нормальная по быстроте, и качество (видео, звук - всё круто!), и, конечно, сам материал. Мне очень понравилось, буду смотреть ещё ваши стримы и видео =)
Спасибо! Очень полезно, не думала, что досмотрю, потому что не могу длинные видео смотреть. Но просмотрела взахлеб))))) Надеюсь, мне поможет.
Самое интересное обучающее видео, 3 часа пролетели как 10 минут! Спасибо!
Крутая лекция, крутой лектор! Спасибо)
👍👍Отличный стрим удачи тебе в делах и в эфирах дальнейших..Все четко понятной речью обьяснил
Благодарю!!! Понятное донесение информации. Поздравляю с завершением курса) Успеха вам. Было бы интересно послушать вас по дизайну (как,зачем, для чего) использовалось
Идеальное видео, спасибо)
Крутая содержательная лекция!! понять фигму и научиться использовать стандартные инструменты в вёрстке макета за день))
Спасибо огромное! Очень классно изложено, скажу как препод. Профессионально и интересно. Успехов Вам и вдохновения!
Очень интересная и доступная подача материала! Большое спасибо!
Спасибо большое, так подробно рассказали про то что лучше работать в установленной версии, а не в браузерной. Я в настоящее время учусь на платных курсах веб-дизайна и не наставник, не преподаватель об этом не сказали, что лучше работать в будущем в установленной версии. Не слова о том, что в браузере не все шрифты загружаются нам на обучение не сказали.
Салам из Казахстана Тони.
Досмотрел твой видеокурс по фигме сегодня. Инфу про этот видеокурс получил на потоке RS2022Q1 в описании к само изучению. Честно скептически относился к этой лекции. Думал очередной нудный и длинный гайд. Но реально не пожалел, что просмотрел все видео. Ты много фишек и мелких нюансов открыл между дел по ходу стрима(дьявол в деталях, например с градиентом совет понравился, если вдруг в макете дизайнер шкалу цвета задерет выше, чем нужно и т.д. и т.п.). Которые обычно многие знающие люди стараются не делится и не раскрывают. Видно, что ты с душой подошел к данному видео. Был 100% открыт.
Поэтому рахмет тебе большой. Благодарен тебе за этот гайд. Многое он мне открыл в фигме.
Стрим замечательный, и благодаря харизматичному спикеру было легко воспринимать информацию!! Спасибо!)
Спасибо за отличные видео! Особенно по фигме. Меняю курс с фото дизайнера на веб и ваши уроки очень помогли особенно это видео и курс - мыслить как веб дизайнер. Собрала с Вами шаблон! Все получилось все работает- ЗДОРОВО! Попробую теперь дальше сама. Жду новых выпусков.
Спасибо! Отличная лекция. Много полезного для себя отметила, хотя уже работала с Фигмой
Очень крутой стрим! Информации много, но надо самому все поделать и разобраться. Все очень здорово изложено. Вообщем, лайк и подписка на канал... в лучших традициях ютуба=)
Спасибо за такую подробную и понятную информацию.
Спасибо за урок!
Очень круто рассказываешь
Спасибо большое!
Огромное спасибо за такую лекцию!
Спасибо! Все понятно и доходчиво.
Спасибо огромное ❤️ очень доступно, понятно, лёгко усвоить и запомнить
Очень крутая лекция, спасибо!
"Интсрумент Перо оно вам нафиг не упало" угарнул. Классный стрим, вы очень хорошо подаёте информацию :-)
Просто огонь!!!!!!!
блин, это было очень познавательно и интересно !) спасибо)
Спасибо большое, все круто
Отличная лекция, большое спасибо.
Очень позитивный. Спасибо!
Очень-очень полезно и интересно, спасибо большое!
Спасибо за отличную информацию.
Лекция супер, спасибо
просто супер лекция! спасибо!:))))
Спасибо за лекцию !
1:42:18 - ну мы обычно квадратное фото накрываем круглой дивкой с over-flow: hidden )
ну ты псих)) 3 часа, за то доходчиво, не спеша и красиво))) спасибо
Спасибо, теперь я знаю Фигму😊
Дякую, дуже допомогло )))
Будут ещё такие выпуски более углублённые? Хорошо объясняешь!
Автор видео крутой контент у вас большое спасибо
Спасибо! Лайк и подписка.
Спасибо большое за видео) стало более приятней пользоваться фигмой)) хочется так же спросить нет ли плагина который бы проанализировал бы все старницы вытащил бы все цвета, создал бы стелевые переменные (name-1, name-2...) и связал бы их с этими name-1, name-2 и тд, вроде как не сложно это все сделать т.к. по идеи в фигме идет дерево а нужно всего-лишь то пройтись по всему деревоу сохранить все значения colors а после произвести привязку, я попытался найти что-то подобное но так и не смог( или может быть есть плагин который бы вытаскивал текст в json формате)
очень крутое видео
Почему свечение и градиент - это мусор? Мне очень даже нравится обилие градиента и свечения в одном из проектов Тони на behance - BIG-DATA-Monetization-Blockchain
Очень хороший урок. Осталось пару вопросов по поводу импорта картинок. Как различить при конвертации векторная иконка или svg? Несколько раз видел как дизайнер вместо векторной графики вставлял png, и получается что при импорте png просто оборачивалась в svg теги. Как отличать такую графику в макете? И второй вопрос по поводу извлечения графики если она находится в фрейме. Если в шаблоне попадается круглая картинка. Я так понимаю что скругление нужно делать в верстке, а не вставлять заранее скругленные картинки. Как достать такую графику в исходном размере?
3:07:40 +-, по кружке воды понял какого цвета у автора хромакей👋😂
Добрый вечер, научи как быть в тренде? Кто задает тренд?
Спасибо большое, но уже градиент не посмотреть так(
спасибище!
Ты крут, но посмотрю видос только по приезду😌 я за сыном уехал🥰
дуже цікаво спасибі!
Не показывает расстояние между объектами через Alt. Объекты в одной frame. Что делать ?
Подскажите: В панеле слоев, у каждого слоя есть иконка блокировки и
видимости. В моем проекте этих иконок нет и слои заблокированы, как
починить? заранее спасибо
друзья, всем привет.. группа новичков веб разработчиков ищет дизайнера, для совместного создания крутого сервиса.. работаем за идею, но также обещаем опыт, скил работы в команде, и проект в портфолио..
У вас есть уроки по Типографике и верстке?
для убунту в веб версию получается вообще без вариантов шрифты сторонние добавить?
Спасибо у меня не вставляется изображение Ctrl+V не реагирует и нет цифровых линеек по краям что не так подскажите для особоодаренных
Как отключить альфа-канал в фигме ?
На полную высоту чего в разных мониторах разная высота 1280 1920 пиксеоей че какая высота то?!!?
01:09:05 как отцентрировать что то относительно или внутри чего о че зажать ?
01:16 типов как бы инструкция по отцентровфванию. Это для сайтов под мобильные планшет и телек сгодится да?
А чем констрейнс от т алайн отличается в плане последовательность и ситуации использования? 01:14:40
не дашь свой config на русский?)
Awesome
2:54:26
горячие клавиши
подскажите где фигму скачать на русском языке ? спасибо
топ
👍
спасибо за инфу, ты реально крутой спикер))) пытаюсь перейти на "Сайт моего курса по UX UI дизайну: @t" и не грузится, то ли он такой тяжелый, то ли из сафари не грузится, прямо пытка.
Открылась галактика....
а весь макет сохранить все слои как
Весь макет автоматически сохраняется в ходе работы и всегда доступен по ссылке которую можно получить нажав на кнопку Share.
@@yemdigital Спасибо
Лайфхак как это исправить : "Нанять толкового дизайнера!!!" ;)
В начале нужно его найти, а это не проще чем найти толкового разработчика и вот в итоге, когда одни находят других - это уже 80% проекта 😄
Кузя вебдизайнер
Много воды..
Зачем 3 часа рассказывать про кнопки? Полная пустота! Такие вещи начинают объяснять с верстки простого проекта и далее уже в процессе верстки показывать какие функции для чего необходимы.
устал пока смотрел, не представляю каково было говорить три с половиной часа)
А кто такой веб верстальщик?
всё отлично, но на протяжении 3 часов слышать кабы кабы, откровенно надоело.
Бла бла бла. Белый шум...