Figma Pro

Программа курса

Основы работы в Figma

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

Работа с объектами и векторами

Далее переходят к созданию и редактированию объектов. Ученики учатся группировать элементы, объединять фигуры, создавать линии и использовать маски. Отдельно рассматривают векторные инструменты - Pen и Pencil, обучаются создавать и редактировать векторные объекты.

Фреймы и Auto Layout

Здесь объясняют работу с фреймами - как выбирать тип, настраивать сам фрейм и объекты внутри него. Рассматривают constraints и скейлинг. Потом переходят к Auto Layout - от базовых настроек до создания кнопок и карточек. Отдельно изучают обновление Auto Layout 2023 года.

Дизайн системы и компоненты

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

Эффекты, сетки и плагины

В этой части курса рассматривают создание и настройку эффектов, включая стили эффектов. Потом переходят к сеткам - создание 12-колоночной сетки, настройка для разных устройств, работа с направляющими. Отдельно изучают плагины - для работы с цветом, текстом, изображениями и иконками.

Сложные элементы интерфейса

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

Переменные и прототипирование

Этот модуль посвящен Local Variables. Сначала рассматривают основные типы - цветовые, числовые, текстовые и булевы переменные. Потом переходят к практическому применению Boolean в макетах. Далее изучают продвинутое прототипирование с использованием переменных, включая автоматическое подсчет сумм в корзине.

Работа с графикой и макетами

Здесь ученики учатся работать с графикой - вставлять и редактировать изображения, обрезать их, оптимизировать. Потом переходят к объединению элементов - создание навигации, меню, карточек. Рассматривают прототипирование взаимодействий между элементами.

Подготовка и наполнение макетов

Перед созданием макетов ученики изучают особенности UI-Kit и основы работы в FigJam. Потом переходят к непосредственному наполнению макетов - создание страниц и добавление элементов интерфейса.

Анимация и превью

В этом блоке рассматривают работу с превью. Ученики учатся собирать блоки в лендинг, использовать Smart Animate для создания анимационных переходов. Также изучают фиксацию элементов при скролле, подбор мокапов и плагины для просмотра макетов.

Завершение работы

На завершение курса рассматривают передачу макетов в разработку - экспорт элементов в разных форматах, сохранение в PDF, особенности коммуникации с разработчиками. После этого ученики выполняют дипломный проект, где применяют все полученные навыки.

Дополнительные возможности

Курс включает проверку домашних заданий преподавателем, что помогает лучше усвоить материал и получить обратную связь.