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

Тема: Основы интерфейсного дизайна в Figma. Создание макета мобильного приложения

Цели работы:

Освоить базовые инструменты Figma и принципы работы с векторной графикой
Научиться создавать прототип мобильного интерфейса с учетом современных стандартов UX/UI
Использовать шрифты, сетку и автолэйаут для создания адаптивного дизайна
Изучить основы типографики и цветовой теории в контексте мобильного дизайна
Освоить принципы прототипирования и создания интерактивных макетов

Теоретическая часть

Основные концепции Figma

Фреймы (Frames)

Определение: Фрейм — это контейнер, который определяет границы и свойства группы элементов
Назначение: Используется для создания экранов, компонентов и организации контента
Особенности:
- Имеет фиксированные размеры
- Может содержать другие фреймы (вложенность)
- Поддерживает различные типы (Desktop, Mobile, Tablet, Custom)
- Автоматически обрезает содержимое за своими границами

Группы (Groups)

Определение: Группа — это временное объединение элементов для удобства работы
Назначение: Упрощает манипуляции с несколькими объектами одновременно
Ограничения:
- Не имеет собственных свойств (размеры, стили)
- Не может содержать другие группы
- Применяется только для организации элементов

Автолэйаут (Auto Layout)

Принцип работы: Автоматически изменяет размеры контейнера в зависимости от содержимого
Преимущества:
- Адаптивность при изменении текста
- Автоматическое выравнивание элементов
- Упрощение создания responsive дизайна
- Сокращение времени на правки

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

1. Регистрация и подготовка рабочего пространства

Шаги выполнения:

Регистрация в Figma
- Перейти на figma.com
- Создать аккаунт (рекомендуется использовать учебную почту)
- Подтвердить email-адрес
Создание проекта
- Нажать “New file” в главном меню
- Выбрать “Design file”
- Переименовать файл: Фамилия_Имя_КомпГрафика_Практика1
Настройка рабочего пространства
- Очистить стандартный фрейм
- Настроить единицы измерения: пиксели (px)
- Включить направляющие (View → Layout Grids)

2. Создание мобильного фрейма

Параметры фрейма:

Тип: iPhone 13 (375×812 px) или аналогичный
Ориентация: Портретная
Layout Grid:
- Тип: Columns
- Количество: 4 колонки
- Отступы: 16px слева и справа
- Gutter: 8px между колонками

Дополнительные настройки:

Safe Area: Учесть вырез (notch) и нижнюю панель
Status Bar: 44px высота
Content Area: 812px - 44px - 34px = 734px

3. Дизайн экрана «Авторизация»

Структура экрана:

3.1 Логотип

Размер: 80×80px (центрирован)
Отступы: 60px сверху от Safe Area
Стиль:
- Может быть создан из примитивов (круги, прямоугольники)
- Или импортирован как изображение
- Рекомендуется использовать простые геометрические формы

3.2 Поле ввода Email

Размеры: 343×48px (с учетом отступов)
Отступы: 40px сверху от логотипа
Стили:
- Фон: #F8F9FA
- Граница: 1px solid #E9ECEF
- Радиус: 8px
- Placeholder: “Введите email”
- Шрифт: 16px Regular

3.3 Поле ввода Пароля

Размеры: 343×48px
Отступы: 16px сверху от поля Email
Стили:
- Аналогично полю Email
- Placeholder: “Введите пароль”
- Тип: password (скрытый текст)

3.4 Кнопка «Войти»

Размеры: 343×48px
Отступы: 32px сверху от поля пароля
Стили:
- Фон: #007AFF (синий)
- Текст: белый, 16px Medium
- Радиус: 8px
- Тень: 0px 2px 8px rgba(0, 122, 255, 0.3)

3.5 Ссылка «Зарегистрироваться»

Позиция: Центрирована под кнопкой
Отступы: 24px сверху от кнопки
Стили:
- Цвет: #007AFF
- Шрифт: 14px Regular
- Подчеркивание: отсутствует

Настройка автолэйаута:

Выделить все поля ввода и кнопку
Применить Auto Layout (Shift + A)
Настроить:
- Direction: Vertical
- Spacing: 16px
- Padding: 0px
- Alignment: Center

4. Создание стилей и компонентов

4.1 Цветовая палитра

Создать Color Styles:

Primary: #007AFF (основной синий)
Secondary: #5856D6 (фиолетовый акцент)
Background: #FFFFFF (белый фон)
Surface: #F8F9FA (светло-серый)
Text Primary: #1C1C1E (темно-серый)
Text Secondary: #8E8E93 (светло-серый)
Border: #E9ECEF (границы)
Error: #FF3B30 (красный для ошибок)

4.2 Текстовые стили

Создать Text Styles:

Heading/Large: 24px, Bold
Heading/Medium: 20px, SemiBold
Body/Large: 16px, Regular
Body/Medium: 14px, Regular
Caption: 12px, Regular
Button: 16px, Medium

4.3 Создание компонентов

Input Field Component:
- Создать из поля ввода Email
- Настроить варианты (с ошибкой, отключенное)
- Добавить иконки (глаз для пароля)
Button Component:
- Создать из кнопки “Войти”
- Настроить варианты (Primary, Secondary, Disabled)
- Добавить состояния (Hover, Pressed)

5. Создание экрана «Регистрация»

5.1 Дублирование фрейма

Скопировать фрейм авторизации
Переименовать в “Registration Screen”
Изменить заголовок на “Регистрация”

5.2 Дополнительные поля:

Имя: 343×48px, отступ 16px от логотипа
Фамилия: 343×48px, отступ 16px от поля имени
Подтверждение пароля: 343×48px, отступ 16px от поля пароля

5.3 Кнопки:

Назад: 24×24px, позиция top-left
Зарегистрироваться: 343×48px, стиль как у кнопки “Войти”

5.4 Дополнительные элементы:

Чекбокс согласия: 20×20px с текстом “Согласен с условиями”
Ссылка на условия: подчеркнутый текст

6. Настройка прототипирования

6.1 Создание связей:

Авторизация → Регистрация:
- Выделить ссылку “Зарегистрироваться”
- Нажать ”+” в панели Prototype
- Выбрать фрейм “Registration Screen”
- Настроить анимацию: Smart Animate, 300ms
Регистрация → Авторизация:
- Выделить кнопку “Назад”
- Создать связь с фреймом “Authorization Screen”
- Анимация: Smart Animate, 300ms

6.2 Тестирование прототипа:

Нажать “Present” для просмотра
Проверить все переходы
Убедиться в плавности анимаций

7. Экспорт и сохранение

7.1 Настройка экспорта:

Выделить фрейм “Authorization Screen”
В панели Export выбрать PNG, 2x
Повторить для “Registration Screen”

7.2 Создание папки:

Создать папку practice1 в рабочей директории
Сохранить PNG файлы с именами:
- authorization_screen.png
- registration_screen.png

7.3 Публикация проекта:

Нажать “Share” в правом верхнем углу
Выбрать “Copy link”
Сохранить ссылку для сдачи

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

Техническое выполнение (40%):

Корректное использование фреймов и автолэйаута
Правильная настройка сетки и отступов
Создание и применение стилей

Дизайн (30%):

Визуальная привлекательность
Соответствие принципам UI/UX
Гармоничная цветовая палитра

Прототипирование (20%):

Рабочие переходы между экранами
Плавные анимации
Логичная навигация

Организация (10%):

Структурированность файла
Использование компонентов
Чистота рабочего пространства

Вопросы для самопроверки

1. Чем отличается фрейм от группы в Figma?

Фрейм:

Имеет фиксированные размеры и свойства
Может содержать другие фреймы
Используется для создания экранов и компонентов
Поддерживает различные типы (Mobile, Desktop, etc.)
Автоматически обрезает содержимое

Группа:

Временное объединение элементов
Не имеет собственных свойств
Используется для удобства манипуляций
Не может содержать другие группы
Применяется только для организации

2. Что даёт использование автолэйаута?

Преимущества автолэйаута:

Адаптивность: Элементы автоматически изменяют размер при изменении содержимого
Экономия времени: Не нужно вручную подгонять размеры
Консистентность: Обеспечивает единообразные отступы
Responsive дизайн: Упрощает создание адаптивных макетов
Легкость правок: Изменения применяются автоматически

3. Для чего нужны стили текста и цвета?

Стили текста:

Консистентность: Единообразное оформление текста
Экономия времени: Быстрое применение стилей
Легкость правок: Изменение в одном месте влияет на все элементы
Масштабируемость: Простое добавление новых вариантов

Стили цвета:

Брендинг: Соблюдение корпоративных цветов
Доступность: Контроль контрастности
Управление: Централизованное изменение палитры
Профессионализм: Создание качественного дизайна

4. В чём преимущество прототипирования внутри Figma?

Преимущества:

Единая среда: Дизайн и прототипирование в одном инструменте
Реальное взаимодействие: Тестирование на реальных устройствах
Коллаборация: Совместная работа команды
Версионность: Отслеживание изменений
Экспорт: Генерация кода и ресурсов
Интеграция: Связь с другими инструментами разработки

Дополнительные ресурсы

Полезные ссылки:

Заключение

Данная практическая работа закладывает основы работы с Figma и создания мобильных интерфейсов. Освоение этих навыков критически важно для современного дизайнера, так как Figma является стандартом индустрии для UI/UX дизайна.

Ключевые навыки, полученные в ходе работы:

Работа с векторной графикой
Создание адаптивных макетов
Применение принципов типографики
Основы прототипирования
Организация дизайн-системы

Следующие шаги:

Изучение продвинутых возможностей Figma
Освоение создания дизайн-систем
Изучение принципов UX-исследований
Практика создания сложных прототипов