Тема 5. Разработка дизайна приложений

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

Лекция: UI Kit — разработка правил создания интерфейса

Воркшоп: Разработка компонентов в программе Figma

Задания:

1. Разработать UI Kit на основе компонентно-вариативной методологии в Figma
2. Собрать интерфейс приложения на основе компонентов

План лекции

1. Понятие дизайн-системы и UI-Kit
2. Компонентно-вариативная дизайн-система
3. Атомарный дизайн

В веб-разработке и разработке приложений под дизайн-системой понимают так называемый UI Kit.

UI Kit состоит из разноуровневых элементов приложения, которые вместе составляют его интерфейс.

Для разработки UI Kit используются функции по созданию компонентов и их вариантов в Figma.

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

Такая система предполагает наличие разных уровней элементов — атомов, молекул, организмов и даже супер-организмов.

Атомы представляют собой самые мелкие детали интерфейса — кнопки, аватарки, лейблы.

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

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

План воркшопа

1. Создание и редактирование компонентов
2. Изменение компонентов и их копий
3. Типы вариантов у компонентов
4. Свойства компонентов
5. Система контроля версий

Задачи

1. Разработать UI Kit на основе компонентно-вариативной методологии в Figma
2. Собрать интерфейс приложения на основе компонентов

Условия

1. Готовый UI Kit с использованием компонентно-вариативной системы и атомарного подхода
2. Собранные на дизайн-компонентах страницы приложения

Результат

1. Готовый UI Kit в Figma
2. Собранный на компонентах интерфейс в Figma