Лабораторная работа №4: Визуальная стилистика и UI Kit (Design System)

Курс: Веб-дизайн и проектирование интерфейсов
Модуль: UI Design & Systems
Трудоемкость: 8 академических часов (2 занятия)
Оценка: Максимум 8 баллов
Тип задания: Индивидуальный сквозной проект (Этап 4)

1. Цель работы

Разработать библиотеку компонентов (UI Kit) и применить визуальный стиль к ранее созданным каркасам.

2. Теоретическая справка: Атомарный дизайн

Методология Atomic Design (автор Брэд Фрост) идеально ложится на техническое мышление. Интерфейс состоит из уровней:

1. Атомы: Неделимые элементы (Шрифт, Цвет, Иконка, Кнопка, Input).
2. Молекулы: Группы атомов (Поле поиска = Input + Button).
3. Организмы: Сложные блоки (Хедер, Карточка товара).
4. Шаблоны (Templates): Страница без контента (Каркас).
5. Страницы (Pages): Финальный макет с реальными данными.

В этой лабораторной мы создаем Атомы и Молекулы, собирая их в UI Kit.

3. Задание (Алгоритм выполнения)

Шаг 1: Создание страницы UI Kit

В вашем файле Figma создайте новую страницу (Page) с названием 🎨 UI Kit. Здесь будет храниться ваша библиотека.

Шаг 2: Фиксация Стилей (Design Tokens)

Настройте Local Styles (правая панель, если ничего не выделено).

1. Typography: Создайте стили H1, H2, H3, Body, Caption.
2. Colors: Создайте стили Primary, Secondary, Background, Surface (цвет карточек), Text/Main, Text/Muted, Error.

Шаг 3: Создание Компонентов (Variants)

Это самая техническая часть. Вы должны создать «умные» компоненты.

1. Нарисуйте кнопку, сразу включив Auto Layout (Shift + A).
2. Превратите объект во фрейм-компонент (Ctrl + Alt + K).
3. Добавьте Variants (на панели Component properties справа):
   • Property 1 (State): Default, Hover (наведение), Disabled (неактивна).
   • Property 2 (Size): Large, Small.
   • Property 3 (Type): Primary (залитая), Secondary (контурная).
4. Используйте Boolean Property для иконки: добавьте иконку внутрь, привяжите её видимость к переключателю Has Icon.

1. Создайте текстовый лейбл и само пустое поле (объединив их в Auto Layout).
2. Создайте варианты компонента:
   • Default
   • Focus (с акцентной обводкой)
   • Error (с красной семантической обводкой и текстом ошибки).

Шаг 4: Рефакторинг (The Great Migration)

Вернитесь на страницу с вашими Wireframes (выполненная Лаб 3).

1. Замените черно-белые прямоугольники на ваши новые компоненты из UI Kit (копируйте инстансы мастеров).
2. Примените текстовые и цветовые стили ко всем элементам.
3. Добавьте фотографии и смысловую графику.

4. Технические требования (Figma Engineering)

Мы оцениваем качество сборки компонентов:

1. Component Properties: В кнопках и инпутах должны использоваться свойства.
   • Плохо: Создавать отдельный вариант кнопки для текста “Купить” и текста “Заказать”.
   • Хорошо: Использовать Text Property, чтобы менять текст в инстансе через меню свойств (справа).
2. Instance Swap: Иконки внутри кнопок должны меняться через свойство Instance Swap.
3. Constraints: Все компоненты должны быть резиновыми. Кнопка растягивается при увеличении текста. Карточка растягивается при увеличении контента.
4. Accessibility: Текст на кнопках должен быть читаемым (используйте плагины WCAG).

5. Definition of Done (Критерии оценки)

Штрафы (Вычет баллов):

• Detach Instance (Минус 2 балла за экземпляр): Если вы вставили компонент, а потом сделали ему Detach (разломали связь с мастером) — это грубейшая ошибка поддержки.
• Отсутствие состояний (Минус 1 балл): У кнопок и полей ввода нет состояний Hover/Focus.

6. Типичные ошибки

• Хаос в названиях Variants: Варианты названы Property 1, Default, Variant 3. Сделайте: State = Hover, Size = Large.
• Разные отступы: В одной кнопке Padding 16px, в другой 15px. Используйте 8-пиксельную сетку!
• Слишком много стилей: 50 оттенков серого в библиотеке. Сократите до 3-4 (Text/Main, Text/Muted, Light Background).

7. Практический совет (Lifehack)

8. Домашнее задание (Подготовка к Лаб №5 и 6)

Ваш макет уже выглядит красиво, но он статичен.

1. Найдите качественные изображения товаров (высокое разрешение, единый стиль).
2. Подготовьте реальные тексты для всех страниц (если еще осталась “Рыба”, Lorem Ipsum).
3. Подумайте над анимацией: как будет появляться меню? Как будет нажиматься кнопка? (Это нужно к Прототипированию в Лаб 6).

---

Проверь себя!

Что означает операция 'Detach Instance' и почему за нее снимают баллы?

Удаление объекта с холстаДобавление нового свойства (Property) к компонентуГруппировка объектов через Ctrl+GРазрыв связи копии с мастер-компонентом. Это ломает всю объектную архитектуру макета.

Проверить ответ