Анастасия Верещагина
гайд
Пошагово делаем мокапы в Figma
1
Мокап мобильного устройства
Простой мокап
‣ Создаем два прямоугольника
‣ Выставляем настройки заливки, прозрачности, обводки и теней для первого.
‣ Выставляем настройки заливки и теней для второго.
‣ Делаем отступ нижнего прямоугольника:
x: 70px, y: 70px.
‣ Готово.
‣ Выставляем настройки заливки, прозрачности, обводки и теней для первого.
‣ Выставляем настройки заливки и теней для второго.
‣ Делаем отступ нижнего прямоугольника:
x: 70px, y: 70px.
‣ Готово.
2
изометрический мокап мобильного устройства
Изометрический мокап
‣ Берем мокап из предыдущего примера.
‣ Объединяем фигуры в группу.
‣ Поворачиваем на 45%.
‣ Группируем еще раз.
‣ Изменяем настройки height на 57%.
‣ Поиграем с отбрасыванием тени (переместим нижний прямоугольник)
‣ Готово.
‣ Объединяем фигуры в группу.
‣ Поворачиваем на 45%.
‣ Группируем еще раз.
‣ Изменяем настройки height на 57%.
‣ Поиграем с отбрасыванием тени (переместим нижний прямоугольник)
‣ Готово.
3
Мокап мобильного устройства Clean
МОКАП МОБИЛЬНОГО УСТРОЙСТВА CLEAN
‣ Два прямоугольника: больше и меньше.
‣ Скругляем углы на 60 у обоих.
‣ У меньшего прописываем параметры. Обратите внимание, Linear относится к параметру STROKE.
‣ Прописываем параметры у большего, обратите внимание, теней здесь три.
‣ Выравниваем.
‣ Готово.
‣ Скругляем углы на 60 у обоих.
‣ У меньшего прописываем параметры. Обратите внимание, Linear относится к параметру STROKE.
‣ Прописываем параметры у большего, обратите внимание, теней здесь три.
‣ Выравниваем.
‣ Готово.
4
Мокап планшета
МОКАП ПЛАНШЕТА (ЦВЕТ НАСТРАИВАЕТСЯ)
‣ Два прямоугольника: больше и меньше.
‣ У большего скругляем углы 30.
‣ У меньшего эффект Linear накладывается на параметр FILL.
‣ У большего эффект Linear накладывается на FILL, не забудьте про обводку.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.
‣ У большего скругляем углы 30.
‣ У меньшего эффект Linear накладывается на параметр FILL.
‣ У большего эффект Linear накладывается на FILL, не забудьте про обводку.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.
5
Мокап Mackbook
МОКАП МАКБУКА
‣ Экран – планшет из примера выше.
‣ Два прямоугольника: больше и меньше.
‣ У большего скругляем углы 4.
‣ У меньшего скругляем углы: 1 1 9 9.
‣ У большего эффект Linear накладывается на параметр FILL и обладает 6 якорями.
‣ У меньшего эффект Linear обладает 4 якорями.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.
‣ Два прямоугольника: больше и меньше.
‣ У большего скругляем углы 4.
‣ У меньшего скругляем углы: 1 1 9 9.
‣ У большего эффект Linear накладывается на параметр FILL и обладает 6 якорями.
‣ У меньшего эффект Linear обладает 4 якорями.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #181818.
‣ Готово.
6
Мокап Айфон X
МОКАП АЙФОН X
‣ Три прямоугольника: корпус, рамка, экран.
‣ Корпус: FILL и EFFECTS, скругление углов: 62.
‣ Рамка: FILL, скругление углов: 48.
‣ Экран: FILL, скругление углов: 40.
‣ Делаем челку экрану: четыре точки пером, отсуп вниз.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #F0F4FA.
‣ Готово.
‣ Корпус: FILL и EFFECTS, скругление углов: 62.
‣ Рамка: FILL, скругление углов: 48.
‣ Экран: FILL, скругление углов: 40.
‣ Делаем челку экрану: четыре точки пером, отсуп вниз.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #F0F4FA.
‣ Готово.
7
Мокап Watch
МОКАП WATCH
‣ Два прямоугольника: корпус, экран.
‣ Корпус: FILL и EFFECTS, скругление углов: 100.
‣ Экран: FILL, скругление углов: 70, заливаем фотографией.
‣ Ремешок: прямоугольник, скругление: 6 6 40 40.
‣ На ремешке ставим две точки пером и обрабатываем.
‣ Дублируем и отражаем по вертикали (правая кнопка мыши).
‣ Настраиваем параметры ремешка.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #9BAFCC.
‣ Готово.
‣ Корпус: FILL и EFFECTS, скругление углов: 100.
‣ Экран: FILL, скругление углов: 70, заливаем фотографией.
‣ Ремешок: прямоугольник, скругление: 6 6 40 40.
‣ На ремешке ставим две точки пером и обрабатываем.
‣ Дублируем и отражаем по вертикали (правая кнопка мыши).
‣ Настраиваем параметры ремешка.
‣ Объединяем.
‣ Выравниваем, заменяем цвет фона монтажной области на #9BAFCC.
‣ Готово.
Все примеры мокапов в готовом виде можно скачать по ссылке.
Подписаться на рассылку обновлений