1.Знакомство с Figma
– Что такое Figma и зачем она нужна
– Регистрация, интерфейс, структура проектов
– Совместная работа в реальном времени
2.Обзор интерфейса и меню
– Панель инструментов
– Настройки свойств
– Слои, холсты, сетки
3.Слои и иерархия
– Работа с объектами и слоями
– Группировка, порядок наложения
– Упорядочивание сложных интерфейсов
4.Фреймы и группы
– Что такое фреймы, зачем они нужны
– Различие между группой и фреймом
– Принципы модульного проектирования
5.Констрейнты (Constraints)
– Адаптивная верстка и поведение элементов
– Как сохраняется пропорция и отступы
– Респонсив-дизайн: основы
6.Прямоугольник и базовые фигуры
– Примитивы: прямоугольник, линия, круг
– Заливка, обводка, скругление
– Работа с направляющими и сетками
7.Экспорт
– Экспорт изображений и макетов
– Подготовка дизайна для передачи разработчику
– Форматы: PNG, JPG, SVG, PDF
8.Эллипс, треугольник и работа с изображениями
– Дополнительные формы
– Вставка и обрезка изображений
– Маски, обводки, заливки
9.Перо и векторные элементы
– Инструмент "Перо" и Bezier-кривые
– Создание и редактирование иконок
– Контуры, соединения, кривые
10.Текст и типографика
– Шрифты, начертания, кегли
– Иерархия текста, выравнивание
– Практика: заголовки, абзацы, подписи
11.Маски и буллет-формы (boolean operations)
– Пересечение, объединение, вычитание фигур
– Использование масок в макетах
– Создание сложных форм
12.Рисуем первый экран сайта
– Работа с референсами
– Структура лендинга: хедер, баннер, кнопки
– Композиция, цвет, типографика
– Итоговая работа: экран сайта в Figma