Herunterladen "🔥 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://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 за временные метки