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

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

Темы:

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

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

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

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

Темы:

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

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

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

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

Темы:

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

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

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

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

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

Темы:

• Constraints

• Components

• Auto Layout

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

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

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

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

Темы:

• Варианты

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

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

Разберетесь с интерактивными прототипами и анимацией для демонстрации UX и взаимодействия с пользователями.

Темы:

• Прототипирование и анимация

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

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

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

Темы:

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

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

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

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

• Как правильно работать с цветами

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

Освоите основы типографики, классификацию шрифтов и влияние текста на восприятие интерфейса и UX.

Темы:

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

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

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

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

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

Темы:

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

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

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

• Сетка в Figma

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

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

Разберетесь, из чего состоит иконка, как создавать ее образ и историю использования иконографики.

Темы:

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

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

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

Поработаете с размерами иконок, освоите их организацию в проекте и методы упрощения работы с ними в Figma.

Темы:

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

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

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

Темы:

• Компоненты и стили (компонент Figma, токены и стили, атомарный дизайн)

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

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

Поймете назначение дизайн-систем, их составные части, преимущества и недостатки, а также роль команды в их создании и поддержке.

Темы:

• Дизайн-система: определение и значимость

• Основные составляющие дизайн-систем

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

• Частые ошибки при проектировании дизайн-систем

• Роль дизайнера и других специалистов в дизайн-системах

• Дизайн-системы в компаниях

Разберетесь, как передавать дизайн-систему разработчикам (handoff), управлять версиями и изменениями для упрощения работы команды.

Темы:

• Преимущества дизайн-системы с точки зрения разработчика

• Handoff — процесс передачи дизайн-системы команде разработчиков

• Работа с изменениями и версиями дизайн-системы