Figma_UXUI_zadanie_RU (2)

1.

ГРАФИЧЕСКИЙ ДИЗАЙН · ПРАКТИЧЕСКОЕ ЗАДАНИЕ
UX/UI дизайн мобильного
приложения
Повторите в Figma по образцу 3 экрана приложения для
заказа кофе
Figma · Задание по UX/UI дизайну мобильного приложения
1 / 15

2.

ЗАДАНИЕ
Создайте дизайн приложения по образцу
01
02
03
Изучите образец
Повторите в Figma
Сдайте работу
На следующем слайде показаны 3
экрана: вход, главная и страница
товара. Обратите внимание на
цвета, отступы и формы.
Каждый экран делайте в отдельном
Frame размером 390 × 844.
Пошаговая инструкция дана на
слайдах.
Отправьте ссылку на Figma и PNGкартинки трёх экранов. Критерии
оценки — на последних слайдах.
Время: 1 пара (80 минут) · Программа: Figma · Размер экрана: 390 × 844 px
Figma · Задание по UX/UI дизайну мобильного приложения
2 / 15

3.

ОБРАЗЕЦ
Вы повторяете
этот дизайн
«BrewGo» — приложение для заказа
кофе. Три экрана: вход, главная
страница и страница товара.
Цель: размеры, цвета и тексты
должны совпасть с образцом как
можно точнее.
Figma · Задание по UX/UI дизайну мобильного приложения
3 / 15

4.

ДИЗАЙН-СИСТЕМА
Цвета, шрифт и размеры
Фон
Основной
Акцент
Тёмный
Фон карточки
Серый
Белый
#F6F1EA
#6F4E37
#D98E4A
#2B1D14
#EBD9C3
#8C7B6E
#FFFFFF
Шрифт: Inter
Размеры текста
Радиус скругления
Regular 400, SemiBold 600, Bold 700.
В Figma Inter — шрифт по
умолчанию.
30 · 28 · 24 · 18 · 16 · 15 · 14 · 12 px.
Заголовки — Bold.
12 · 16 · 18 · 24 · 28 px. Кнопки —
полностью скруглённые.
Figma · Задание по UX/UI дизайну мобильного приложения
4 / 15

5.

ПОДГОТОВКА
Настройка рабочей области в Figma
Шаг 1
Шаг 2
Создайте файл
Создайте Frame
Зайдите на figma.com → Drafts → New design file. Назовите
файл «Фамилия_Имя_BrewGo».
Нажмите F → в правой панели Phone → выберите iPhone 14.
Или введите W = 390, H = 844.
Шаг 3
Шаг 4
Фон и название
3 экрана
В поле Fill введите #F6F1EA. Дважды щёлкните по названию
Frame и переименуйте в «Onboarding».
Скопируйте Frame два раза через Ctrl + D. Названия:
Onboarding, Home, Detail. Расстояние между ними 40 px.
Совет: чтобы ровно выставлять поля, добавьте Layout grid → «+» → Columns: 4, Margin: 24, Gutter: 16.
Figma · Задание по UX/UI дизайну мобильного приложения
5 / 15

6.

ЭКРАН 1 · ONBOARDING
Фон и чашка кофе
1
Большой круг
Ellipse (O) → 300 × 300, X = 45, Y = 110. Fill: #EBD9C3.
2
Внутренний круг
Ещё один Ellipse: 220 × 220, X = 85, Y = 150. Fill: #D98E4A, Opacity 35%.
3
Корпус чашки
Rectangle (R) → 100 × 116, X = 145, Y = 200. Fill: #6F4E37. Скругления задайте отдельно для каждого
угла: верхние 10, нижние 40.
4
Верх чашки и ручка
Сверху чашки — прямоугольник 100 × 20 (#D98E4A). Ручка: круг 44 × 44 без Fill, Stroke 10 (#6F4E37)
— уберите её за чашку через Ctrl + [.
Figma · Задание по UX/UI дизайну мобильного приложения
6 / 15

7.

ЭКРАН 1 · ONBOARDING
Текст и кнопка
1
Заголовок
Text (T): «Кофе для вашего настроения». Inter Bold, 30 px, Line height 38, цвет #2B1D14. X = 24, Y =
470.
2
Описание
Inter Regular, 15 px, Line height 23, цвет #8C7B6E, ширина 330 px, X = 24, Y = 556. Текст: «Выберите
любимый кофе и оформите заказ за пару секунд.»
3
Индикатор
Прямоугольник 28 × 8 (радиус 4, #6F4E37) и два круга 8 × 8 (#D9CBBB). Выделите все три, нажмите
Shift + A, Gap = 8. X = 24, Y = 664.
4
Кнопка
Rectangle 342 × 56, радиус 28, #6F4E37, X = 24, Y = 718. Внутри напишите «Начать» (Bold 16, белый).
Выделите оба слоя, Shift + A → выровняйте по центру.
Figma · Задание по UX/UI дизайну мобильного приложения
7 / 15

8.

ЭКРАН 2 · ГЛАВНАЯ
Заголовок, поиск и категории
1
Приветствие
«Доброе утро» — Regular 13, #8C7B6E, X = 24, Y = 68. Ниже «Что будем пить?» — Bold 24, Y = 90.
Справа круг 48 × 48 (#D98E4A), X = 318, Y = 70.
2
Поле поиска
Rectangle 342 × 52, радиус 26, Fill белый, X = 24, Y = 140. Внутри «Поиск кофе...» (Regular 14,
#A89A8E) и маленький значок — круг 16 × 16.
3
Кнопки категорий
Напишите текст → Shift + A → Padding: 0 / 18, высота 38, радиус 19. Первая — #6F4E37 с белым
текстом, остальные — белые. Выделите все, Shift + A, Gap = 10. Y = 212.
4
Заголовок раздела
«Популярное» — Bold 18, X = 24, Y = 270. У правого края «Все» — Bold 13, цвет #D98E4A.
Figma · Задание по UX/UI дизайну мобильного приложения
8 / 15

9.

ЭКРАН 2 · ГЛАВНАЯ
Карточки, баннер и меню
1
Карточка товара
Rectangle 165 × 230, радиус 24, Fill белый, X = 24, Y = 312. Effects → Drop shadow: X 0, Y 4, Blur 14,
#2B1D14, 8%. Внутри область картинки 145 × 120 (радиус 18, #EBD9C3) и чашка.
2
Тексты и кнопка «+»
«Капучино» Bold 14, подпись Regular 11 (#8C7B6E), цена Bold 16. Справа внизу квадрат 34 × 34,
радиус 12, #D98E4A, внутри белый «+».
3
Сделайте Component
Выделите карточку и нажмите Ctrl + Alt + K. Скопируйте её для второй карточки (X = 201) и
замените тексты на «Латте», «20 000».
4
Баннер и меню
Баннер: 342 × 120, радиус 24, #6F4E37, Y = 568. Меню: 350 × 68, радиус 34, #2B1D14, X = 20, Y = 752,
внутри 4 значка 26 × 26 (один — #D98E4A).
Figma · Задание по UX/UI дизайну мобильного приложения
9 / 15

10.

ЭКРАН 3 · ТОВАР
Картинка, название и описание
1
Кнопки «назад» и «избранное»
Два белых круга 44 × 44: слева X = 24, справа X = 322, оба Y = 64. В левый нарисуйте стрелку «<»
(Line, Stroke 3).
2
Большая картинка
Скопируйте круг и чашку с экрана 1 (Ctrl + C, V) в этот Frame. Круг 300 × 300, X = 45, Y = 130. Чашку
увеличьте до 110 × 128 (тяните с зажатым Shift).
3
Название и рейтинг
«Капучино» — Bold 28, X = 24, Y = 462. Ниже «★ 4.8 · 250 отзывов» — Regular 14, #8C7B6E, Y = 504.
4
Описание
Regular 14, Line height 22, цвет #6B5B4F, ширина 342, X = 24, Y = 538. Текст в 3 строки.
Figma · Задание по UX/UI дизайну мобильного приложения
10 / 15

11.

ЭКРАН 3 · ТОВАР
Размер, цена и кнопка
1
Подпись «РАЗМЕР»
«РАЗМЕР» — Bold 12, Letter spacing 1 px, #8C7B6E, X = 24, Y = 626.
2
Выбор S, M, L
Каждый — прямоугольник 96 × 52, радиус 16, внутри буква (Bold 15). M — фон #6F4E37 и белый
текст, S и L — белый фон. Выделите все три, Shift + A, Gap = 27. Y = 652.
3
Цена
«Цена» — Regular 12, Y = 730. Ниже «18 000» — Bold 24, Y = 748.
4
Кнопка «В корзину»
Rectangle 196 × 56, радиус 28, #6F4E37, X = 170, Y = 730. Текст «В корзину» — Bold 15, белый.
Выровняйте по центру через Shift + A.
Figma · Задание по UX/UI дизайну мобильного приложения
11 / 15

12.

ПРОФЕССИОНАЛЬНЫЙ ПРИЁМ
Auto Layout и Component
Auto Layout (Shift + A)
Component (Ctrl + Alt + K)
Выделите элементы и нажмите Shift + A: они
выстроятся в ряд или столбец, а отступы (Gap) и
внутренние поля (Padding) будут одинаковыми. Если
текст изменится, кнопка расширится сама.
Сделайте одинаковый элемент (карточку, кнопку,
значок меню) один раз и превратите в Component.
Копии связаны с оригиналом: изменили оригинал —
обновились все.
Правило: видите два и больше одинаковых элемента — делайте Component; видите ряд или столбец — Auto Layout.
Figma · Задание по UX/UI дизайну мобильного приложения
12 / 15

13.

ШПАРГАЛКА
Полезные горячие клавиши
Действие
Windows
Mac
Frame
F
F
Прямоугольник
R
R
Круг
O
O
Текст
T
T
Дублировать
Ctrl + D
Cmd + D
Сгруппировать
Ctrl + G
Cmd + G
Auto Layout
Shift + A
Shift + A
Создать Component
Ctrl + Alt + K
Cmd + Option + K
Отменить действие
Ctrl + Z
Cmd + Z
Figma · Задание по UX/UI дизайну мобильного приложения
13 / 15

14.

ОЦЕНИВАНИЕ
Критерии оценки
Критерий
Баллы
Сходство с образцом (3 экрана)
30
Точность цветов и шрифта
20
Выравнивание, отступы и поля (24 px)
20
Использование Auto Layout и Component
15
Названия и порядок Frame
10
Аккуратность файла
5
Итого
Figma · Задание по UX/UI дизайну мобильного приложения
100
14 / 15

15.

СДАЧА РАБОТЫ
Как сдать работу
1. Ссылка на Figma
Совет: клавиша Alt
Share → «Anyone with the link» → Can view. Скопируйте ссылку
и отправьте.
Выделите элемент, зажмите Alt и наведите на другой элемент
— появятся расстояния между ними.
2. PNG-картинки
Совет: начинайте с простого
Выделите каждый Frame → Export → PNG → 2x → Export. Три
картинки.
Сначала расставьте крупные формы, затем тексты, в конце —
детали.
3. Название файла
Бонус
Фамилия_Имя_BrewGo. Срок сдачи: [дата]
Для тех, кто закончил раньше: спроектируйте 4-й экран —
«Корзина».
Figma · Задание по UX/UI дизайну мобильного приложения
15 / 15