Веб-дизайн в Figma

Научитесь работать в Figma, освоите интерфейс программы и узнаете, как пользоваться основными инструментами.

Темы:

• Особенности работы с Figma

• Начало работы в Figma

• Основные инструменты

Изучите инструменты Figma, разберетесь в их настройке и научитесь создавать визуальные эффекты, работать с фотографиями и кривыми.

Темы:

• Работа с инструментами Figma и их настройка

• Работа с визуальными эффектами и фото

• Работа с кривыми

Разберетесь в принципах дизайна интерфейсов, научитесь позиционировать элементы, работать со стилями и использовать плагины.

Темы:

• Основы дизайна интерфейсов

• Позиционирование элементов внутри фрейма

• Работа со стилями

• Работа с плагинами

Изучите адаптивный дизайн экранов, поймете, как создавать компоненты, автоматизировать позиционирование и отступы с помощью Auto Layout.

Темы:

• Constraints

• Components

• Auto Layout

• Создание адаптивного дизайна экранов

• Родительские и дочерние компоненты

• Автоматическое применение отступов и позиционирования объектов

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

Темы:

• Варианты

• Библиотеки компонентов

• Создание и использование дизайн-системы

Освоите прототипирование и анимацию, создадите интерактивные макеты и оживите интерфейс в Figma.

Темы:

• Прототипирование

• Анимация

• Интерактивные прототипы в Figma

• Анимация прототипа в Figma

Разберетесь, как использовать ресурсы Figma Community и публиковать свои проекты, изучите гайдлайны и освоите работу в FigJam.

Темы:

• Обзор Figma Community

• Гайдлайны iOS и Android в Figma

• Полезные файлы в Figma Community

• Публикация файлов в Community

• Работа с Figma Jam

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

Темы:

• Как организовывать макеты при работе в команде

• Подготовка дизайн-макетов к совместной работе

• Плагины для работы в команде

Изучите основы цвета, научитесь работать с цветовыми моделями и применять гармоничные палитры в интерфейсах.

Темы:

• Что такое цвет в дизайне

• Цветовые модели (Pantone, CMYK, RGB, HEX)

• Цветовой круг: круг: как выбирать, сочетать и смешивать цвета

• Тон, оттенок, тень и тональность

• Цвета в дизайн-системе и UI-kit

Разберетесь в принципах типографики и основных понятиях, поймете, как связана типографика с пользовательским опытом (UX).

Темы:

• Введение в типографику

• Типографическая классификация

• Основные понятия

• Типографика и пользовательский опыт (UX)

Изучите композицию, сетки и модульность, научитесь выстраивать визуальный порядок и выравнивать контент в макетах.

Темы:

• Основные элементы композиции

• Модульность

• Сетка: основы и история

• Сетка в Figma

• Подбор сетки под композицию

• Выравнивание контента по сетке

Разберетесь, из чего состоит иконка, как создать узнаваемый образ и использовать иконографику в интерфейсах.

Темы:

• История иконографики

• Как придумать образ иконки

• Из чего состоит иконка

Научитесь рисовать иконки в Figma, подбирать размеры, организовывать библиотеку и оптимизировать процессы.

Темы:

• Размеры иконок и их организация в Figma

• Упрощение работы над иконками