Найти в Дзене
База дизайнера WB

Интересный плагин. Мокап в figme

Привет, сегодня я расскажу про очень полезный и легкий в применении инструмент – плагин для создания mockup'ов прямо внутри figma.

Mockup (англ. — макет) — это реалистичная модель предмета, которая помогает показать, как дизайн будет выглядеть в контексте: на экране телефона, футболке или на улицах города. С уже нанесенными тенями, бликами и текстурами.

Для начала нужно установить плагин Artboard Studio к себе в фигму(из библиотеки "Community"). Пройти не сложную регистрацию и добавить api-ключ в поле для ввода(пошаговая и наглядная инструкция будет показана при регистрации.

-2

Далее запускаем плагин и можно приступать к работе. В левом окошке выбираем "free items", чтобы artboard studio показывал только бесплатные макеты. А с права выбираем нужную категорию. Тут есть практически все. Одежда, упаковка, электроника, уличные макеты, косметика и даже еда. Покажу на примере "stock mockups".

Я хочу найти подходящий макет с ноутбуком или компьютером, чтобы реалистично показать пример работы для портфолио, а не просто выложить скриншот экрана.

Вот этот подойдет
Вот этот подойдет

Когда мы выбираем нужный макет, открывается два и более окон. В конкретном примере два. Наша картинка и белый холст, куда мы подставим нужную картинку.

подгоняем скриншот под фрейм и нажимаем "render selected frame"
подгоняем скриншот под фрейм и нажимаем "render selected frame"
Готово, красота!
Готово, красота!

И еще один пример

-6

Вперед, применяйте этот плагин в своей работе и делайте дизайн более реалистичным и живым!

Ставьте реакции под этой статьей и пишите комментарии, получилось у вас или были сложности? Чем больше лайков, тем больше мотивации для меня делиться новыми материалами!