Тема 1. Что такое Figma: возможности и принципы работы. Создание аккаунта.

Преимущества Figma перед другими программами.

Принципы работы: облачное хранение файлов, многопользовательский режим редактирования, условная бесплатность. Системные требования и начало работы в Figma.

Тема 2. Освоение основ работы с интерфейсов.

Составляющие рабочей области. Сетка и её свойства. Направляющие.

Настройка аккаунта. Редактор и менеджер файлов Figma.

Создание и редактирование проектов: Recent, Draft.

Настройки профиля, команды, тарифы и удаление аккаунта. Проекты, страницы, фрэймы. Основные окна, панели и команды. Установка шрифтов. Форматы сеток: Grid, Columns, Rows. Свойства сетки: Type, Color, Size, Count, Gutter, Margin. Создание и использование направляющих.

Тема 3. Инструменты Figma и панель свойств. Плагины и комьюнити.

Панель инструментов: Move (V), Scale (K), Frame (A или F), Rectangle (R), Line (L), Arrow (Shift + L), Ellipse (O), Place Image (Shift + Ctrl + K), Pen (P), Text (T), Hand (SPACE). Панель слоёв (Layers Panel): обозначение фреймов, групп и объектов.

Библиотека шаблонов для фреймов. Динамическая панель свойств. Использование маски для фото/картинок. Работа с Figma Community. Использование и сохранение плагинов.

Тема 4. Понятие Аuto Layout и его свойства. Привязки.

Основы Auto Layout: концепция, строение, применение. Параметры Auto Layout на панели настроек. Поведение контейнера: axis, distribution, alignment, spacing. Анатомия Constraint. Создание Auto Layout и его составляющих: Stack, Align, Pin, Resolve Tools.

Тема 5. Аuto Layout resizing: hug, fixed, fill container. Создание адаптивных карточек.

Адаптивный дизайн в Figma. Когда использовать «hug contents», а когда — «fill container». Комбинирование различных вариантов выравнивания или автоматическое размещение (auto layout) вместе. Абсолютное позиционирование элементов (absolute position).

Тема 6. Интерактивные прототипы в Figma. FigJam.

Вкладки: Design, Prototype, Code (Inspect). Интерактивные прототипы в Figma. Создание связей между фреймами.

Скроллинг внутри фрейма (прокрутка). Figma Триггеры взаимодействия: On Click/On Tap, On Drag, While Hovering, Keyboard and Gamepad Shortcuts), Mouse Enter/Leave, Mouse Down (Touch Down), Mouse Up (Touch Up), After Delay. Анимация прототипа: Instant, Fade in, Smart animate, Move In / Move Out, Push, Slide In / Slide Out. Виды взаимодействия: Navigate, Scroll To, Swap With, Open URL. Использование Overlays при создании интерфейса. FigJam - интерактивные доски для дизайнеров от Figma.

Тема 7. Atomic Design. Мастер компоненты и экземпляры. Варианты.

Основные принципы атомарного веб-дизайна. Понятия атом, молекула, организм, шаблон, страница.

Преимущества Atomic Design. Назначение, создание и свойства компонентов. Библиотека компонентов (Assets). Подготовка компонентов. Создание вариантов компонентов и их практическое применение.

Тема 8. Библиотеки стилей и компонентов. UI kit, как коллекция компонентов проекта. Гайдлайны. Figma Community.

Создание библиотеки стилей: цвет, текст, эффект, сетка.

Отличие UI-kit от концепции атомарного дизайна.

Особенности дизайна мобильных систем Android и IOS: гайдлайны. UI elements, дизайн-система, asset-management. Принципы использование Figma Community для работы в Figma.

Тема 9. Передача проекта разработчикам. Составление резюме и портфолио UI/UX дизайнера.

Характеристики проекта для передачи проекта в разработку: используйте дробные числа, размеры текстовых блоков и модулей, наименование слоев и компонентов, заметки и прочее. Структура резюме UI/UX дизайнера и варианты размещения портфолио. Площадки: Behance, Dribble, Pinterest и прочее.

Тема10. Тренды UX/UI-дизайна. Аналоги Figma.

Современные тренды и направления UX/UI-дизайна на примере работ дизайнеров. Обзор программ аналогов Figma для создания дизайна приложений и сайтов. Плюсы и минусы аналогов.

Тема11. Выпускная работа

Оформление кейса Behance/ Dribble.