🔥 Figma с нуля - основы работы с Фигмой для веб-разработчика, верстальщика и дизайнера. Полный обзор

Рет қаралды 132,753

Тони Емельянов | Продуктовый дизайнер (UX UI)

Күн бұрын

Трансляция по основам Фигмы для курса JS / FRONT-END школы Rolling Scopes School где я расскажу основы работы с Фигмой для веб-разработчиков, а также поотвечаю на вопросы на тему Фигмы, дизайна интерфейсов (UX/UI) и взаимодействия разработчиков с дизайнерами. Присоединяйтесь, будет жарко 😉
Добавляйтесь ко мне в:
🔹 Инстаграм: / tony.yem
🔹 Facebook: / tony.yemelyanov
🔹 Vk: tony.yemelyanov
🔹 Behance: behance.net/tony_yemelyanov
Сайт школы RSS: rs.school/
Сайт моего курса по UX UI дизайну: academy.yem.digital/
#Figma #Основы #RSS
00:00 - Вступление
01:42 - Figma Hotkeys
03:22 - План стрима
07:30 - Что такое Figma
09:45 - Веб версия vs установленная
10:45 - Локальные шрифты в веб версии
12:25 - Навигация по Фигме
13:12 - Drafts (скопировать проект к себе в аккаунт)
14:45 - Панель слоев (группы, фреймы)
23:10 - Бургер
26:42 - Привязка к пиксельной сетке
29:44 - Скрытое меню
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:27 - Комментарии, Общение, Ответы на вопросы
3:28:00 - Финиш
Спасибо @Vladimir Lesnichiy за временные метки

Пікірлер: 125

@vladimirlesnichiy5711 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 Чтение комментариев, ответы на вопросы, итоги

@smoothsen 3 жыл бұрын

Спасибо

@yemdigital 3 жыл бұрын

Вау, спасибо! 🤩

@user-xo1qm5lg2t 3 жыл бұрын

Большое спасибо!

@yuliaakhmetova5202 2 жыл бұрын

Супер! Спасибо!

@amon-ranine_ten1886 2 жыл бұрын

отличная работа 👍👍

@balanceIT 3 жыл бұрын

Если бы хоть один препод в универе сказал "я понимаю, потому что с этим работаю кучу лет и для меня это просто, а вам сложно" я бы ему премию дал прямо из своего кармана. Спасибо большое!

@user-vg7to7sv4f 3 жыл бұрын

автору дай

@AbstractGaze 3 жыл бұрын

Сходи в школу, там есть Трудовик)

@phoebesan4687 3 жыл бұрын

смотрела в записи. огромное спасибо за видео! очень понятно все ))

@straw128 3 жыл бұрын

Очень приятно и легко слушается стрим! огромное спасибо за такой замечательный подход к делу 👍

@furi_kiri 3 жыл бұрын

Лекция просто огонь!! Прекрасное преподнесение информации, нескучно и познавательно)) Большое спасибо!

@demiang928 3 жыл бұрын

Спасибо очень крутая лекция! Не устаю слушать

@annaiustus9445 3 жыл бұрын

Очень круто, спасибо за стрим, сегодня посмотрела в записи и прям очень понравилось =) и подача - веселая, позитивная, нормальная по быстроте, и качество (видео, звук - всё круто!), и, конечно, сам материал. Мне очень понравилось, буду смотреть ещё ваши стримы и видео =)

@alionazimaby 3 жыл бұрын

Спасибо, очень круто! Смотрела на одном дыхании!

@user-qn7ti7tx4i 3 жыл бұрын

Стрим замечательный, и благодаря харизматичному спикеру было легко воспринимать информацию!! Спасибо!)

@user-xs1hs7cf8s 3 жыл бұрын

Спасибо за стрим. Просто потрясающая подача материала. По звуку все огонь. Твоя бодрость прям заряжает. Четкий план, и очень круто, что ты мониторишь аудиторию в процессе стрима. Лайк и подписка))

@Asleep_here 3 жыл бұрын

Крутая лекция, крутой лектор! Спасибо)

@vero08092012 3 жыл бұрын

Вы очень круто преподносите информаию!!! Все понятно буквально, заходит на ондном дыхании. Спасибо, буду вас рекомендовать.

@nastassia16 3 жыл бұрын

Очень крутой стрим! Информации много, но надо самому все поделать и разобраться. Все очень здорово изложено. Вообщем, лайк и подписка на канал... в лучших традициях ютуба=)

@meerimasanbekova8586 2 жыл бұрын

Харизма зашкаливает!!! Спасибо за подробное обьяснение

@Xexendra 3 жыл бұрын

всё супер-круто! СЛЫШНО и ПОНЯТНО! побольше бы Ваших эфиров! посмотрела с большим интересом, бегу пробовать все лайфхаки! :)

@user-ly7ms8yb6r 3 жыл бұрын

Благодарю!!! Понятное донесение информации. Поздравляю с завершением курса) Успеха вам. Было бы интересно послушать вас по дизайну (как,зачем, для чего) использовалось

@natakarachevtseva9800 2 жыл бұрын

Спасибо огромное! Очень классно изложено, скажу как препод. Профессионально и интересно. Успехов Вам и вдохновения!

@natalliatkachova5002 2 жыл бұрын

Лектор бесподобен, стрим шикарен, огромная благодарность)))

@user-kl5vj8bk7j 2 жыл бұрын

Очень интересная и доступная подача материала! Большое спасибо!

@DANTEVOLKBOOTH 3 жыл бұрын

Шикарное видео! Круто структурирована и великолепно подана информация. Большое спасибо! Даже с нескольких аккаунтов лайк поставил)

@dolb9sha 2 жыл бұрын

Спасибо! Отличная лекция. Много полезного для себя отметила, хотя уже работала с Фигмой

@amon-ranine_ten1886 2 жыл бұрын

👍👍Отличный стрим удачи тебе в делах и в эфирах дальнейших..Все четко понятной речью обьяснил

@user-gv4jq7xy6h 3 жыл бұрын

Спасибо за отличные видео! Особенно по фигме. Меняю курс с фото дизайнера на веб и ваши уроки очень помогли особенно это видео и курс - мыслить как веб дизайнер. Собрала с Вами шаблон! Все получилось все работает- ЗДОРОВО! Попробую теперь дальше сама. Жду новых выпусков.

@yuliyashh5745 3 жыл бұрын

насколько это проще чем фотошоп! спасибо за урок! смотрю в записи, ура! классно и понятно! просто! господи храни Figma!)))

@ldiche7935 2 жыл бұрын

Спасибо огромное ❤️ очень доступно, понятно, лёгко усвоить и запомнить

@svetlanamakridina3680 3 жыл бұрын

Спасибо! Очень полезно, не думала, что досмотрю, потому что не могу длинные видео смотреть. Но просмотрела взахлеб))))) Надеюсь, мне поможет.

@andrew3937 3 жыл бұрын

дай бог те здоровья за такую лекцию)

@952a259 Жыл бұрын

Очень хорошее видео! Тони заряжает своим драйвом, спасибо!

@alinasuvorova2704 3 жыл бұрын

Спасииибо огромное за Ваш труд, просто луууучший, Бог дизайна!!!!!!!

@Yantarss 2 жыл бұрын

Люблю тебя, брат! Структурировано, просто и наглядно :)

@happy_uliana5134 3 жыл бұрын

Отдельное огромное спасибо за Таймлайн!

@giga_mo 2 жыл бұрын

блин, это было очень познавательно и интересно !) спасибо)

@user-cy2td3lg8t 2 жыл бұрын

Спасибо! Для верстальщика - одно из лучших обучающих видео по работе с Figma

@user-cu4cy2tv9l 2 жыл бұрын

Крутая содержательная лекция!! понять фигму и научиться использовать стандартные инструменты в вёрстке макета за день))

@fildevil3300 3 жыл бұрын

"Интсрумент Перо оно вам нафиг не упало" угарнул. Классный стрим, вы очень хорошо подаёте информацию :-)

@svetlanamakridina3680 3 жыл бұрын

ой. забыла. Вы очень крутой лектор, очень хорошо преподносите информацию.

@user-ex5ts2cz5o 2 жыл бұрын

Огромное спасибо за такую лекцию!

@ShatovAleksej 2 жыл бұрын

Самое интересное обучающее видео, 3 часа пролетели как 10 минут! Спасибо!

@mikewazowski7526 3 жыл бұрын

Очень-очень полезно и интересно, спасибо большое!

@lemdjem 3 жыл бұрын

Очень много инсайдов, я новичек и прям кайфую. Спасибо за труд!

@user-fx3hp4fi1u 2 жыл бұрын

Чел! Ты крутой! Спасибо тебе! Очень душевно!

@annatanisheva3627 2 жыл бұрын

Очень крутая лекция, спасибо!

@nazgultemirbayeva2076 3 жыл бұрын

Спасибо! Все понятно и доходчиво.

@user-jn5gl3js7g 3 жыл бұрын

просто супер лекция! спасибо!:))))

@dkb1018 2 жыл бұрын

Спасибо за такую подробную и понятную информацию.

@alexsuhobski5231 2 жыл бұрын

Отличная лекция, большое спасибо.

@katerynadotsenko1240 3 жыл бұрын

Лекция супер, спасибо

@sagingaliy.6126 2 жыл бұрын

Салам из Казахстана Тони. Досмотрел твой видеокурс по фигме сегодня. Инфу про этот видеокурс получил на потоке RS2022Q1 в описании к само изучению. Честно скептически относился к этой лекции. Думал очередной нудный и длинный гайд. Но реально не пожалел, что просмотрел все видео. Ты много фишек и мелких нюансов открыл между дел по ходу стрима(дьявол в деталях, например с градиентом совет понравился, если вдруг в макете дизайнер шкалу цвета задерет выше, чем нужно и т.д. и т.п.). Которые обычно многие знающие люди стараются не делится и не раскрывают. Видно, что ты с душой подошел к данному видео. Был 100% открыт. Поэтому рахмет тебе большой. Благодарен тебе за этот гайд. Многое он мне открыл в фигме.

@user-ts5zc4wt6k 3 жыл бұрын

Очень позитивный. Спасибо!

@kagtmp Жыл бұрын

Учитель от Бога. Так доступно излагать нужен талант.

@turk4296 Жыл бұрын

Идеальное видео, спасибо)

@utkirbekkhodjaev3693 3 жыл бұрын

прочитал комменты и тут понял что нужно досмотреть эту видео если реально хочется изучать фигму!!!!!!!!

@user-es3bj9em7k 2 жыл бұрын

Очень круто рассказываешь Спасибо большое!

@user-mm4cb6lw6b 2 жыл бұрын

Спасибо большое, так подробно рассказали про то что лучше работать в установленной версии, а не в браузерной. Я в настоящее время учусь на платных курсах веб-дизайна и не наставник, не преподаватель об этом не сказали, что лучше работать в будущем в установленной версии. Не слова о том, что в браузере не все шрифты загружаются нам на обучение не сказали.

@tanyar.3325 2 жыл бұрын

Спасибо за урок!

@user-vg7to7sv4f 3 жыл бұрын

ну ты псих)) 3 часа, за то доходчиво, не спеша и красиво))) спасибо

@user-gx8xj4ky4r 3 жыл бұрын

Спасибо большое, все круто

@nickolayarbuzov6149 3 жыл бұрын

Спасибо за лекцию ! 1:42:18 - ну мы обычно квадратное фото накрываем круглой дивкой с over-flow: hidden )

@user-mx8nb4qg9r 2 жыл бұрын

Спасибо за отличную информацию.

@Yaroslava196 2 жыл бұрын

Просто огонь!!!!!!!

@lenatikh2154 2 жыл бұрын

Спасибо, теперь я знаю Фигму😊

@justdoit8369 3 жыл бұрын

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

@user-hp5go2eg8s 3 жыл бұрын

Будут ещё такие выпуски более углублённые? Хорошо объясняешь!

@ALEKSEY_77737 Жыл бұрын

Спасибо! Лайк и подписка.

@vasylbriashchei9104 2 жыл бұрын

Дякую, дуже допомогло )))

@bogeyman000 3 жыл бұрын

Спасибо большое за видео) стало более приятней пользоваться фигмой)) хочется так же спросить нет ли плагина который бы проанализировал бы все старницы вытащил бы все цвета, создал бы стелевые переменные (name-1, name-2...) и связал бы их с этими name-1, name-2 и тд, вроде как не сложно это все сделать т.к. по идеи в фигме идет дерево а нужно всего-лишь то пройтись по всему деревоу сохранить все значения colors а после произвести привязку, я попытался найти что-то подобное но так и не смог( или может быть есть плагин который бы вытаскивал текст в json формате)

@dmitryprodan1434 2 жыл бұрын

очень крутое видео

@V-V-R 3 жыл бұрын

спасибище!

@user-vr9uv9ii3s 3 жыл бұрын

дуже цікаво спасибі!

@SergiiBoiko 3 жыл бұрын

Очень хороший урок. Осталось пару вопросов по поводу импорта картинок. Как различить при конвертации векторная иконка или svg? Несколько раз видел как дизайнер вместо векторной графики вставлял png, и получается что при импорте png просто оборачивалась в svg теги. Как отличать такую графику в макете? И второй вопрос по поводу извлечения графики если она находится в фрейме. Если в шаблоне попадается круглая картинка. Я так понимаю что скругление нужно делать в верстке, а не вставлять заранее скругленные картинки. Как достать такую графику в исходном размере?

@nasmeshnikdesing9487 3 жыл бұрын

Ты крут, но посмотрю видос только по приезду😌 я за сыном уехал🥰

@user-od9sm2pl9f 3 жыл бұрын

Awesome

@alexanderalexander9814 3 жыл бұрын

Спасибо у меня не вставляется изображение Ctrl+V не реагирует и нет цифровых линеек по краям что не так подскажите для особоодаренных

@artemche.8201 2 жыл бұрын

Подскажите: В панеле слоев, у каждого слоя есть иконка блокировки и видимости. В моем проекте этих иконок нет и слои заблокированы, как починить? заранее спасибо

@user-ur1je6ct5e Жыл бұрын

топ

@user-tx6tn3zi2h 3 жыл бұрын

👍

@user-xv5bt2fy2z 2 жыл бұрын

для убунту в веб версию получается вообще без вариантов шрифты сторонние добавить?

@nastle518 2 жыл бұрын

Не показывает расстояние между объектами через Alt. Объекты в одной frame. Что делать ?

@olhasheremeta9223 3 жыл бұрын

Как отключить альфа-канал в фигме ?

@user-is3km4uf6h 2 жыл бұрын

У вас есть уроки по Типографике и верстке?

@catchongenjutsu1260 3 жыл бұрын

3:07:40 +-, по кружке воды понял какого цвета у автора хромакей👋😂

@user-qt9un1nb6v Жыл бұрын

Спасибо большое, но уже градиент не посмотреть так(

@art_video_design Жыл бұрын

На полную высоту чего в разных мониторах разная высота 1280 1920 пиксеоей че какая высота то?!!? 01:09:05 как отцентрировать что то относительно или внутри чего о че зажать ?

@art_video_design Жыл бұрын

01:16 типов как бы инструкция по отцентровфванию. Это для сайтов под мобильные планшет и телек сгодится да?

@art_video_design Жыл бұрын

А чем констрейнс от т алайн отличается в плане последовательность и ситуации использования? 01:14:40

@donbotdonbot2522 3 жыл бұрын

Добрый вечер, научи как быть в тренде? Кто задает тренд?

@N4745H428 3 жыл бұрын

Почему свечение и градиент - это мусор? Мне очень даже нравится обилие градиента и свечения в одном из проектов Тони на behance - BIG-DATA-Monetization-Blockchain

@petrplotnikov4307 2 жыл бұрын

друзья, всем привет.. группа новичков веб разработчиков ищет дизайнера, для совместного создания крутого сервиса.. работаем за идею, но также обещаем опыт, скил работы в команде, и проект в портфолио..

@mikewazowski7526 3 жыл бұрын

2:54:26 горячие клавиши

@user-im2cn7db2w 2 жыл бұрын

подскажите где фигму скачать на русском языке ? спасибо

@torri8384 2 жыл бұрын

спасибо за инфу, ты реально крутой спикер))) пытаюсь перейти на "Сайт моего курса по UX UI дизайну: @t" и не грузится, то ли он такой тяжелый, то ли из сафари не грузится, прямо пытка.

@alexanderalexander9814 3 жыл бұрын

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

@yemdigital 3 жыл бұрын

Весь макет автоматически сохраняется в ходе работы и всегда доступен по ссылке которую можно получить нажав на кнопку Share.

@alexanderalexander9814 3 жыл бұрын

@@yemdigital Спасибо

@user-ut2of6kb4d 2 жыл бұрын

Кузя вебдизайнер

@user-gm9me7el1w 2 жыл бұрын

не дашь свой config на русский?)

@andyrey840 3 жыл бұрын

Лайфхак как это исправить : "Нанять толкового дизайнера!!!" ;)

@yemdigital 3 жыл бұрын

В начале нужно его найти, а это не проще чем найти толкового разработчика и вот в итоге, когда одни находят других - это уже 80% проекта 😄

@oksanaivannikova1511 2 жыл бұрын

Открылась галактика....

@user-xy7hd3vu3q 3 жыл бұрын

Много воды..

@svetlanagavrilyuk5445 3 жыл бұрын

@mahatmaghandii Жыл бұрын

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

@user-cv4nn4re4x 3 жыл бұрын

А кто такой веб верстальщик?

@bestourtv1272 Жыл бұрын

Зачем 3 часа рассказывать про кнопки? Полная пустота! Такие вещи начинают объяснять с верстки простого проекта и далее уже в процессе верстки показывать какие функции для чего необходимы.