Мокапы для фигма
Плагины, Уроки

Мокапы для фигма. Обзор плагина «Artboard Studio Mockups»

Сегодня вы узнаете как делать мокапы для фигма с помощью плагина «Artboard studio». У плагина есть множество бесплатных мокапов: телефонов (айфонов и телефонов на андроид), планшетов, компьютеров (ноутбуков, макбуков), бутылок, книг, визиток, упаковок и т.д.

Смотрите видео, либо воспользуйтесь текстовой версией инструкции ниже.

Мокапы для фигма. Как установить плагин с мокапами?

Установка плагина с мокапами в фигма

Чтобы установить плагин с мокапами в фигма перейдите по ссылке и нажмите на кнопку сверху «Install».

Активация плагина «Artboard Studio Mockups» в Figma

Активация плагина Artboard studio в Figma

Чтобы активировать плагин в Figma нажмите на меню слева и наведите на надпись «Plagins» далтее выберите «Artboard Studio Mockups» «Add Mockup Item».

Активация плагина Artboard studio с помощью API key

В появившемся всплывающем окне нажмите на ссылку, как показано на скриншоте выше.

Регистрация в сервисе artboard studio

Вас перенаправит на сайт сервиса artboard.studio, где вам необходимо будет зарегистрироваться. На первом шаге нужно ввести email и пароль, либо войти с помощью Facebook или Google.

Регистрация в Artboard studio

На втором шаге регистрации вам предложат заполнить небольшую анкету. Здесь можно указывать любые данные из списка. Это не на что не влияет.

Плагин с мокапами для фигма. Настройка

После регистрации снова нажмите на ссылку, которая есть в плагине «Artboard Studio» в Figma.

Генерация API key в сервисе artboard studio

Вас перенаправит на страницу, где вы сможете сгенерировать Api Key. Для этого нажмите на синею кнопку справой стороны. Затем скопируйте появившийся ключ.

Вставка API KEY в плагин для фигма Artboard studio

Вставьте Api key в окно плагина в фигме и нажмите на кнопку «Save and continue».

Мокапы для Figma. Как пользоваться плагином.

Плагин с мокапами для фигма

Пользоваться мокапами в фигме очень просто. Для этого запустите плагин Artboard Studio и выберите понравившийся вам мокап из представленного списка.

Поиск мокапов в плагине Artboard studio

Вы можете производить поиск мокапов с помощью верхней строки поиска. Если хотите вставить мокап телефона, то введите «Iphone» или другую марку. Введите в окно поиска «laptop», если хотите найти мокап ноутбука. Аналогично можно искать мокапы книги, визитки, макбука, упаковки и т.д.

Выбор категории мокапов в плагине для Figma

Если нажмёте на выпадающий список с надписью «All items», то появится возможность выбрать бесплатные мокапы «Free items» или платные «Premium items».

Популярность просмотров мокапов в плагине фигмы. Выпадающее окно в Artboard studio

Можно сортировать мокапы если развернуть список, который есть по центру.

Категории мокапов в плагине фигмы

Чтобы отображалась определенная категория мокапов, разверните выпадающий список справа. Тут есть множество категорий, которые вы можете использовать в своих проектах.

Как вставить мокап в фигме с помощью плагина

Категория Electronics. Мокапы для фигма

Чтобы вставить мокап в фигме с помощью плагина Artboard Studio Mockups, выберите нужный мокап из списка. Для примера выберу ноутбук.

Как вставить свое фото в мокап в фигме

При вставке мокапа в ваш проект в Figma, у вас появится 2 элемента: ноутбук и фрейм куда необходимо вставить ваш дизйан.

Изменение размера фрейма с помощью инструмента Scale в Figma

Если ваш дизайн больше фрейма, который появился, то уменьшите размер дизайна с помощью клавиши «K».

Вставка своего дизайна в мокап фигмы

Вставьте ваш дизайн в фрейм, как показано на скриншоте выше. Выберите фрейм и нажмите на кнопку «Render selected frame» в плагине.

Пример мокапа в фигме. Ноутбук.

Ву-а-ля! Вы ставили свой дизайн макет в мокап ноутбука.

Мокап айфона в фигме.

Аналогичную операцию можно проделать для айфона и вставить ваш дизайн в мокап телефона.

Заключение

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

P.S. Получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.

Автор статьи: Владимир Чернышов