Практическая работа №5

Создание UI-kit веб-приложения в Figma

Цель работы:

• понять назначение UI-kit в проектировании веб-интерфейсов;
• создать набор базовых визуальных стилей и компонентов в Figma;
• подготовить единые элементы интерфейса для будущих макетов;
• оформить состояния кнопок, форм, карточек, таблиц и статусов;
• обеспечить единообразие будущей верстки.

---

Основные теоретические положения

UI-kit

UI-kit — это набор повторно используемых элементов интерфейса: цветов, шрифтов, кнопок, полей ввода, карточек, таблиц, статусов и уведомлений.

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

Минимальный набор UI-kit:

Элемент	Примеры
Цвета	primary, background, text, error, success
Типографика	H1, H2, body, small
Кнопки	primary, secondary, danger, disabled
Формы	input, textarea, select, error
Карточки	услуга, товар, курс, мероприятие
Таблицы	административная панель
Статусы	новая, в обработке, подтверждена

---

Производственная ситуация

На предыдущем этапе вы выбрали визуальное направление. Теперь нужно оформить набор компонентов, из которых будут собираться все страницы проекта.

---

Основные требования к практической работе

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

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

---

Задания для выполнения

1. Создайте страницу UI Kit в Figma.
2. Оформите цветовую систему.
3. Оформите типографику.
4. Создайте компоненты кнопок и их состояния.
5. Создайте элементы форм.
6. Создайте карточку основной контентной сущности.
7. Создайте визуальные статусы.
8. Создайте пример таблицы административной панели.
9. Создайте варианты уведомлений.
10. Выполните коммит add ui kit components.

---

Требования к результату

К завершению практической работы должны быть подготовлены:

• страница UI Kit в Figma
• цветовая система
• типографика
• кнопки и состояния
• элементы форм
• карточка объекта
• статусы
• таблица админ-панели
• коммит в Git

---

Контрольные вопросы

1. Какова основная цель данной практической работы?
2. Какие результаты должны быть получены после выполнения этапа?
3. Как данный этап связан с предыдущими этапами проекта?
4. Какие решения были приняты в рамках работы и почему?
5. Какие файлы были добавлены или изменены в Git-репозитории?
6. Как результаты работы будут использоваться в следующих практических работах?

---

Рекомендуемые материалы

1. Стартовая страница учебной практики.
2. Банк предметных областей.
3. Требования к итоговому проекту.
4. Материалы текущего раздела курса.
5. Собственный Git-репозиторий проекта.