Перейти к содержимому
Лекции

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

Тема: Базовые компоненты и экран «Каталог» в Figma

Цели работы

  • Создать простые переиспользуемые компоненты (кнопка, поле ввода, карточка)
  • Собрать один экран «Каталог» на iPhone 13 с автолэйаутом
  • Настроить базовые стили цвета и текста
  • Сделать минимальный прототип (1–2 перехода)

Коротко о теории

  • Компонент — шаблон, от которого создаются экземпляры (инстансы)
  • Варианты можно не использовать; при желании сделайте 1 свойство disabled
  • Автолэйаут упрощает выравнивание и отступы: используйте gap и padding

Практическое задание

1. Подготовка

  1. Создайте файл: Фамилия_Имя_КомпГрафика_Практика2
  2. Добавьте одну страницу Screens (если удобно — вторую Library для компонентов)
  3. Фрейм: iPhone 13 (375×812). Grid: 4 колонки, margin 16, gutter 8

2. Базовые стили

  1. Цвета:
    • Primary: #007AFF
    • Surface: #FFFFFF, On Surface: #1C1C1E
    • Border: #E9ECEF, Error: #FF3B30
  2. Текст:
    • Title: 20/Semibold
    • Body: 16/Regular
    • Button: 16/Medium

3. Три компонента (простые)

  1. Button (Primary)
    • Автолэйаут: горизонтальный, gap 8, padding 12×16, радиус 8
    • Текст — свойство компонента (label)
    • Дополнительно (необязательно): вариант disabled
  2. Input (Text)
    • Высота 48, радиус 8, фон #F8F9FA, бордер #E9ECEF
    • Placeholder — текст серого цвета (#8E8E93)
  3. Product Card
    • Изображение 1:1 сверху (можно прямоугольник), ниже: название (до 2 строк) и цена
    • Кнопка Добавить — инстанс вашего Button

4. Экран «Каталог»

  1. Верхняя панель: заголовок «Каталог» (стиль Title) и поле поиска (инстанс Input)
  2. Список товаров: карточки в 2 колонки по сетке (ширина колонки ≈ 167 px)
  3. Отступы и иерархия:
    • Внутренние отступы 16, расстояние между элементами 8/16
    • Текст названия — стиль Body, цена — можно SemiBold
  4. Пустое состояние (необязательно): иконка/эмодзи, текст «Ничего не найдено», кнопка «Сбросить»

5. Мини‑прототип

Вариант А (самый простой):

  • Сдублируйте экран. На втором измените текст кнопки карточки на «В корзине»
  • Создайте переход: тап по кнопке → второй экран (Smart Animate 200–300ms)

Вариант Б (чуть сложнее):

  • Сделайте простой экран «Детали товара» (фото, название, цена, кнопка)
  • Переход: тап по карточке → «Детали товара» (Slide in)

6. Экспорт и сдача

  • Экспорт PNG (2x) экрана Catalog и (если делали) Product Details
  • Названия файлов: catalog.png, product_details.png
  • Поделитесь ссылкой Share → Anyone with the link

Критерии оценки

  • Техническое: корректные отступы, сетка, автолэйаут, аккуратные компоненты
  • Дизайн: читаемый текст, понятная иерархия, аккуратные карточки
  • Прототип: есть хотя бы один работающий переход
  • Организация: понятные имена слоев/фреймов, чистый файл

Самопроверка

  1. Все ли тексты используют созданные текст‑стили?
  2. Компоненты действительно переиспользуются, а не копируются как «сырой» фрейм?
  3. Карточки ровно встают по колонкам сетки (нет «поплывших» отступов)?
  4. Есть ли хотя бы один интерактивный переход?

Ресурсы

  • Figma Help: Components, Auto Layout
  • Material Guidelines: Cards, Lists (для визуальных подсказок)