Анастасия Верещагина
гайд

Пошагово делаем мокапы в Figma


1
Мокап мобильного устройства

Простой мокап

‣ Создаем два прямоугольника
‣ Выставляем настройки заливки, прозрачности, обводки и теней для первого.
‣ Выставляем настройки заливки и теней для второго.
‣ Делаем отступ нижнего прямоугольника:
x: 70px, y: 70px.
‣ Готово.

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

Изометрический мокап

‣ Берем мокап из предыдущего примера.
‣ Объединяем фигуры в группу.
‣ Поворачиваем на 45%.
‣ Группируем еще раз.
‣ Изменяем настройки height на 57%.
‣ Поиграем с отбрасыванием тени (переместим нижний прямоугольник)
‣ Готово.

3
Мокап мобильного устройства Clean

МОКАП МОБИЛЬНОГО УСТРОЙСТВА CLEAN

‣ Два прямоугольника: больше и меньше.
‣ Скругляем углы на 60 у обоих.
‣ У меньшего прописываем параметры. Обратите внимание, Linear относится к параметру STROKE.
‣ Прописываем параметры у большего, обратите внимание, теней здесь три.
‣ Выравниваем.
‣ Готово.

4
Мокап планшета

МОКАП ПЛАНШЕТА (ЦВЕТ НАСТРАИВАЕТСЯ)

‣ Два прямоугольника: больше и меньше.
‣ У большего скругляем углы 30.
‣ У меньшего эффект Linear накладывается на параметр FILL.
‣ У большего эффект Linear накладывается на FILL, не забудьте про обводку.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.

5
Мокап Mackbook

МОКАП МАКБУКА

‣ Экран – планшет из примера выше.
‣ Два прямоугольника: больше и меньше.
‣ У большего скругляем углы 4.
‣ У меньшего скругляем углы: 1 1 9 9.
‣ У большего эффект Linear накладывается на параметр FILL и обладает 6 якорями.
‣ У меньшего эффект Linear обладает 4 якорями.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.

6
Мокап Айфон X

МОКАП АЙФОН X

‣ Три прямоугольника: корпус, рамка, экран.
‣ Корпус: FILL и EFFECTS, скругление углов: 62.
‣ Рамка: FILL, скругление углов: 48.
‣ Экран: FILL, скругление углов: 40.
‣ Делаем челку экрану: четыре точки пером, отсуп вниз.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #F0F4FA.
‣ Готово.

7
Мокап Watch

МОКАП WATCH

‣ Два прямоугольника: корпус, экран.
‣ Корпус: FILL и EFFECTS, скругление углов: 100.
‣ Экран: FILL, скругление углов: 70, заливаем фотографией.
‣ Ремешок: прямоугольник, скругление: 6 6 40 40.
‣ На ремешке ставим две точки пером и обрабатываем.
‣ Дублируем и отражаем по вертикали (правая кнопка мыши).
‣ Настраиваем параметры ремешка.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #9BAFCC.
‣ Готово.
Все примеры мокапов в готовом виде можно скачать по ссылке.
Подписаться на рассылку обновлений
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и соглашаетесь с политикой конфиденциальности.