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

Трансляция по основам Фигмы для курса JS / FRONT-END школы Rolling Scopes School где я расскажу основы работы с Фигмой для веб-разработчиков, а также поотвечаю на вопросы на тему Фигмы, дизайна интерфейсов (UX/UI) и взаимодействия разработчиков с дизайнерами. Присоединяйтесь, будет жарко 😉

Добавляйтесь ко мне в:
🔹 Инстаграм: https://www.instagram.com/tony.yem/
🔹 Facebook: https://www.facebook.com/tony.yemelyanov
🔹 Vk: https://vk.com/tony.yemelyanov
🔹 Behance: https://behance.net/tony_yemelyanov
Сайт школы RSS: https://rs.school/
Сайт моего курса по UX UI дизайну: https://yem.digital/evolution/

#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 за временные метки

Видео 🔥 Figma с нуля — основы работы с Фигмой для веб-разработчика, верстальщика и дизайнера. Полный обзор канала YEM DIGITAL: Академия цифрового дизайна