1. Figma с нуля | UX UI Дизайнер: «Возрождение» | Бесплатный курс веб-дизайна - первый урок
HTML-код
- Опубликовано: 27 июл 2024
- UX UI Дизайнер: «Возрождение», первый урок. Домашние задания в телеграм канале t.me/yemdigital/5
Figma - очевидный лидер среди инструментов для создания UX UI дизайна. Ведь она позволяет не только создавать дизайн интерфейсов любой сложности, но и делать их интерактивными. Сегодня мы будем изучать основной функционал и принципы работы с этим приложением.
Подписывайтесь в сетях:
Instagram: / tony.yem
LinkedIn: / tonyem
#Дизайн #Фигма #Курс
Спасибо Ирине Хачатрян за помощь с таймингами:
0:00 - Интро
5:02 - Фигма: с чего начать
12:24 - Важные концепции (Frame, Component, instance)
34:30 - Зачем использовать фреймы
42:48 - Интерфейс Figma
58:40 - Базовые инструменты Фигмы
01:10:58 - Примитивы в Фигме
01:11:56 - Перо в Фигме
01:12:15 - Текст в Фигме
01:17:00 - Комментарии в Фигме
01:19:56 - Работа с текстом и подключение шрифтов
01:30:50 - Заливка фигур/слоев цветом и изображениями
01:48:00 - Работа с линией
01:53:55 - Полигон в Фигме
01:56:00 - Работа с пером
02:02:30 - Маски и булевы функции
02:13:00 - Направляющие и сетки
02:18:55 - Стили в Фигме
02:27:50 - Задание и ответы на вопросы
02:54:00 - Горячие клавиши
Если не сложно, по ходу просмотра урока запишите тайминги видео с описанием тем и оставьте их в комменте - я добавлю к видео, чтобы всем кто будет пересматривать было легко найти где какая тема в трех-часовом уроке. Поможете тысячам зрителей, а я в благодарность, добавлю ваш ник в описание 😉 (как уже сделано во-втором уроке курса)
Тони, как обещала)) как-то так получилось - сильно мельчить не стала
5:02 - как начать использовать Фигму (браузерная или комп версия, про передачу ссылок на проекты, про шрифты)
12:24 - важные понятия в Фигме (фрейм, компонент, инстанция)
34:30 - почему лучше использовать фрейм, а не прямоугольник
42:48 - панель инструментов, панель слоев, панель атрибутов
58:40 - базовые инструменты: бургер меню, фреймы
01:11:00 - формы
01:12:00 - перо
01:12:15 - текст
01:17:00 - комментарии
01:20:00 - работа с текстом и подключение шрифтов
01:30:50 - формы: прямоугольник, работа с изображением
01:48:00 - линии
01:53:55 - полигон
01:56:00 - перо (подробнее)
02:02:30 - маски
02:13:00 - направляющие и сетки
02:18:55 - создание стилей
02:28:00 - ДЗ, ответы на вопросы
02:54:00 - горячие клавиши
Я проходил несколько курсов и главная проблема для меня это нудные спикеры. Вы очень легко и доступно передаёте материал, легко усваивать. Огромное спасибо за такую возможность!
Бесплатный курс намного лучше чем большинство платных, огромное спасибо автору за такой подгон.
Ты хоть попробовал что говориш
Смотрю и не верю, что мне так повезло найти ваш курс! Огромная работа, столько труда! Большое вам спасибо!
Случайно наткнулся на этот канал, большое спасибо за такую ценную информацию!
Вы - это самое лучшее, что мне приходилось слышать и видеть в инфо поле. Боже спасибо вам огромное ❤️❤️❤️🙏🙏🙏🙏
Спасибо Тони, ты лучший! Нравится твоя подача материала
Привет! Очень рада попасть на этот курс! Благодарю за знания, уроки и время!
Начало положено!!! отличный урок, спасибо!
Спасибо большое за урок! Все прекрасно объясняется, живая и энергичная подача материала от вас очень нравится!
Вот что нужно от видео, полезная информация без воды, харизма. Спасибо вам огромное за уроки. Так рад, что нашёл ваш канал.
Какое сокровище! Благодарю за курс!
Так круто подан материал 🔥 а курс, в целом, просто находка - закрывает сразу три моих запроса. Большое спасибо 👍🏻
Спасибо вам огромное, вы лучший учитель! 😀
Вы так логично и структурированно рассказываете, что сложные вещи выглядят простейшими🤯Браво!!!
Просмотрел первый урок... круто сделано! Большое спасибо за твой труд! Ставлю лайк и иду смотреть второй урок)
Приятная подача материала, структурно и интересно, радует, что без лирических отступлений и всё по делу! Приятно учиться у профессионалов))
Spasibo Alexey Bychkovy za recomendaziy, spasibo Tony, ya nakonez ponyala, chto takoe componenty))) Podacha super!!!
Спасибо большое за этот курс. Кайфую от подачи - все до мельчайших подробностей рассказано. Комментарии пишу редко, но этот урок - исключение)
Тони, не перестаю благодарить вас! Спасибо за позитив и погружение в дизайн! ВЫ просто находка для меня - начинающего дизайнера. Первые заработанные деньги от первого проекта отправлю вам!
Благодарю за этот курс. Приступила к изучению.
Огромная благодарность за такую полезную информацию! Максимально концетрированно, мегатонны полезностей) 🥰🥰🥰🥰🥰😃
Бесплатный курс от Вас - лучшая новость за эти пару месяцев)
Теперь я просто обязана стать крутым дизайнером))
Благодарю❤
Как успехи в дизайне?
@@wenderx6561 после курсов Тони прошла ещё одни, на данный момент работаю на две компании дизайнером)
@@wenderx6561а у тебя как успехи?)
Стали дизайнером, сильно помог курс?
@@slyde96 после этого закончила еще один курс, уже год работаю дизайнером)
Благодарю за материал и доступную подачу!
Приветствую Вас, Учитель!
Спасибо большое за старания, за курс!
Ты молодец, очень легко с тобой учить figma и все понятно
Спасибо большое за такой грандиозный подарок! Очень понятно, интересно и вдохновляюще! Война выбила из жизни и из работы полностью на эти два месяца и сейчас, в относительной безопасности, невероятно вовремя такой курс, что бы вернуться к любимому делу и повысить свои знания и навыки. Спасибо большое!
Все отлично! Спасибо большое
Круто! Спасибо !)
Спасибо за курс! Такой добродушный создатель ) Очень приятно Вас слушать! :)
Всем желающим освоить веб-дизайн повезло
Тони сделал супер курс
Осталось пройти его
Спасибо
Спасибо за такой подарок! Я в процессе освоения профессии frontend developer, мне обычно yotube всякие полезности рекомендует, думаю лишним не будет и ваш курс пройти хоть и дизайнером не планирую быть
Ууу дождался , буду смотреть))))
мне, как опытному пользователю фигмы, было очень интересно послушать, спасибо)
Когда я нашла ваш курс, я поняла, что это просто подарок небес! В мире случаются чудеса и их делают люди! Вы просто волшебник! Спасибо, что вы дали такую возможность изучить этот курс и поучиться быть настоящим профессионалом.
вы просто бомба! Спасибо огромное!!!
Отличное видео 👍 Спасибо
Спасибо большое! Я не web-дизайнер, но даже мне стало интересно и кое-что понятно!
Изначально я даже не могла представить, что вы выкладываете курс по доброте душевной, думала замануха! просто кармой вам вернется в стократ больше добра! СПАСИБО огромное!!!!!
Тони, привет! Огромное спасибо за твою работу, рекомендую, кто хочет научиться работать с Figma, смотрите и наслаждайтесь, в идеале, что нить конспектируйте, более доходчивых примеров и подачи информации я не встречал на всех русскоязычны ресурсах ютуба!!!
Спасибо большое за вашу работу,вы дейстивтельно помогли многим разобраться🙏🙏🙏
Ваши видео рекомендуют. Это плюс.
Спасибо Тони Большое!
респект бро,доходчиво,курс супер я уже мог нарисовать всякую жуть тестовую,а то других смотрел чуть не уснул
Спасибо за тайминги!
Правильно, даже в уже знакомой теме, можно узнать что-то новое
спасибо за ваш труд, ролик потрясающий!!!
спасибо большое, самый лучший курс
УРААААА СПАСИБО
Уточнения:
1. Ничего не вырезал - как трансляция была записана, так и оставил для сохранения атмосферы.
2. Когда говорю «в завтрашнем видео» и и.п. - имеется ввиду в следующем видео курса, оно выйдет через несколько дней, чтобы было время на выполнение задания.
3. Первое занятие и домашнее задание о котором говорю в видео, было ознакомительным. Вместо него можете просто написать что ни-будь о себе в комментариях (если есть желание). А само видео (первый урок) я публиковал в качестве тизера к курсу еще когда курс был платным (вот ссылка: [ruclips.net/video/XFKiaElHlmU/видео.html](ruclips.net/video/XFKiaElHlmU/видео.html))
4. Постараюсь на выходных провести трансляцию с разбором ваших домашних заданий, как их отправлять сообщу позже, следите за анонсами в телеграм канале t.me/yemdigital
Похвально! Спасибо!
Тони, подскажи, пожалуйста, какой модели макбук лучше брать, хочу перейти на мак, но боюсь ошибиться и выкинуть деньги. Буду весьма благодарна тебе. 🙂☺
@@user-mm1ik2iy3r Извини, не эксперт по макам, хотя думаю что особой разницы нет. Что карман позволяет, то и надо брать. Смотри по рекомендуемым требованиям софта который планируешь использовать.
отличное подробное видео
Дякую за детальний та змістовний курс. Дуже інформативно та практично))
Крутое домашнее задание)
Спасибо большое)
Спасибо за урок)
Кажется я знаю как буду проводить майские выходные)
Очень много полезного узнала)
Спасибо, интересно, но пока в голове сложно укладывается! Много информации))
Никогда не понимал прелести компонентов, и стилей, для меня фрейм - был лишь 1440xN - никогда не использовал фреймы и использовал обычные прямоугольники, блпгодаря Вам я смог осознать всю мощь работы с оптимизацией, больше никакой путаницы в стиле текста, очень доступно объяснили - огромное спасибо. когда я проходил курс от wayup там было разжевано - но о преимуществах использования тех или иных элементов не сказано было не слова - мол, делаете так и все будет хорошо, вы раскрыли для меня способ экономии 1-2 часов своего времени, благодарю за столь приятную и удобную формулировку)))
Интересно какой именно курс от wayup вы проходили, взрывной старт или полноценный?
Тони, огромное спасибо, буду проходить курс. Узнала несколько неизвестных фишек, хотя работаю в Фигме год и очень её люблю 😃. Вы отличный препод! ⚘
Верный ход!!
Спасибо!
Дуже дякую за ваш труд!
Спасибо большое!
Ура! Объясняешь понятно, связанно и со структурой, отдельное за это спасибо :) но очень не хватает тайм-кодов
Спасибо! Согласен - таймкоды бы были очень кстати. Вот бы кто-то пока смотрит уроки их записывал, а я бы потом добавлял 😉
Знаю фигму как свои шесть пальцев, но всё равно посмотрел все три часа, что-то даже освежил в памяти)
Спасибо , друг
Ты круче Тони Старка))). Спасибо!
Похоже ещё один крутой канал нашёл, пожалуй подпишусь.
Доступно, логично.
Невероятное удовольствие слушать вас, 3 часа пролетели как 3 минуты. Спасибо огромное за бесплатный курс! Тони you are the BEST!
привет давай проходить курс вместе
@@Dean9423 привет, давай 👍🏻
Tile может пригодится, когда фон требует какого-то повторяющегося паттерна, который надо повторить с уменьшением. Или для бесшовной текстуры, которую нужно уменьшить и он легко повторит ее на фоне. Короче очень удобная вещь для определенных ситуаций. Или скажем у вас есть кусочек фона, который весит совсем немного, и чтобы не создавать огромный фон из сотен этих косочков - Tile позволит продублировать его - так часто делают на сайтах фон, чтобы он и весил немного, и легко массштабировался.
Хорошо обьясняешь, слишком хорошо) и потому долго, и много раз вокруг да около. Мог бы ужать содержимое, оставив только два повторения о функциональности инструмента: 1 как с помощью панели на интерфейсе и 2 с горячей клавиши. Спасибо за бесплатный урок если что!
Крутяк.!!!!
Thank you so much😍
Спасибо огромное за ваш бесплатный курс! Начинаю изучать ux/ui и ваши уроки - просто находка для меня как для новичка! Проходила еще один курс,но вы очень хорошо объясняете подробно информацию! Спасибо! Единственное,не могу найти ваши презентации в описании..
Прошли курс?
2:59:23 забавно, что сейчас уже можно выбрать нужные слои и нажать command+R и выбрать нумерацию) за 3 секунды
ты лучший
Не могла не заметить, что на 46-й минуте появились Генри и Балу! Это не имеет отношения к курсу, но Это такая душевная история... Собачка к сожалению на этот момент заболел и умер( Но такая приятная отсылка.
спасибо за уроки! болею,смотрю ваш курс, хочу из школы уйти в айти) не знаю,насколько это в нынешних реалиях возможно, но буду стараться) сегодня приступаю к дз. Жаль,что я такой слоупок и уже нет возможности отправить дз на проверку😄 буду делать для души))))
кстати,узнала о вас из тиктока) добрые люди посоветовали вас!
🔥🔥🔥
Спасибо большое за видео! самое лкчшее что я находила на ютубе, подскажите почему забросили канал? будут ли еще видео?
Благодарю! Прикрепи донаты, пожалуйста. Тем, кто захочет тебя отблагодарить, смогут это сделать через донаты. Может не сразу, может через несколько месяцев или лет, когда станут профи в UX. Это будет плюсом в карму))
Привет, спасибо за ролики) Подскажи а что за канал в телеграме, где можно вопросы по фигме задавать?
Получше платных смотрю чисто для интереса))
Уважаемый Тони, а у вас есть продолжение курса? Неважно, платное или бесплатное - в природе существует? Если да, то где можно найти или купить?
С tile удобно делать защитный паттерн
Решил переквалифицироваться из таксиста в дезигнеры, пытаюсь осилить фигму с вашими роликами. Спасибо за курс. В целом все понятно, я про интерфейс. Пока боюсь, что могу застрять на том, что на маке все программы (After Effects и encoder) платные, а я безработный.
Еще не понял куда сбрасывать готовые ДЗ, я видимо опоздал на начало курса (в телеге я есть, но куда скидывать так и не нашел), с эссе и тестом cantunsee та же беда (тест прошел на 7930)
Подача материала годная! здесь прям "мое уважение" так сказать...
этот курс был платным, тогда проверялись ДЗ. Сейчас он бесплатный и без обратной связи
@@MARUnihongo понял, спасибо!
Обратная связь все-же есть хотя - как кому повезет :), ссылки на отправку заданий на проверку я публикую у нас в телеграме, а проверки стараюсь проводить по пятницам в прямом эфире.
как ваши успехи?
👍👍👍
Здравствуйте, подскажите пожалуйста, а где можно презенташку вашу скачать?)
Тони Добрый день , подскажите, первый урок только смотрю. Вы еще проверяете работы ?
Дякую Вам за можливість в такий час не складати руки!...
Есть ли у кого-то ссылка в чат , где отвечают друг другу на вопросы ? Особенно чайникам )) Спасибо
Где взять презентацию?
Здравствуйте! не работает Alt, чтобы посмотреть расстояние между элементами. Есть ли другая комбинация?
Перейдите во вкладку inspect, справа вверху
Тогда видны расстояния между блоками 😉
Можно ли работать в фигме через телефор(айфон)?
чи можна після проходження курсу починати брати закази і створювати портфоліо?
Здравствуйте ! Тони . В смысле сообщество .
Подскажите, пожалуйста, Тони. В Фигме при регистрации что лучше отмечать: " для работы" или "для персонального использования", без разницы? Ну, чтобы денег потом не сняли))))
они не снимут деньги, если ты не купишь платную версию. Им это нужно, наверное, для сбора данных, чтобы улучшить продукт, ну или какая-то статистика...