Сегодня вы узнаете как делать мокапы для фигма с помощью плагина «Artboard studio». У плагина есть множество бесплатных мокапов: телефонов (айфонов и телефонов на андроид), планшетов, компьютеров (ноутбуков, макбуков), бутылок, книг, визиток, упаковок и т.д.
Смотрите видео, либо воспользуйтесь текстовой версией инструкции ниже.
Мокапы для фигма. Как установить плагин с мокапами?
![Установка плагина с мокапами в фигма](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-01-1024x695.png)
Чтобы установить плагин с мокапами в фигма перейдите по ссылке и нажмите на кнопку сверху «Install».
Активация плагина «Artboard Studio Mockups» в Figma
![Активация плагина Artboard studio в Figma](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-02.png)
Чтобы активировать плагин в Figma нажмите на меню слева и наведите на надпись «Plagins» далтее выберите «Artboard Studio Mockups» «Add Mockup Item».
![Активация плагина Artboard studio с помощью API key](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-03.png)
В появившемся всплывающем окне нажмите на ссылку, как показано на скриншоте выше.
![Регистрация в сервисе artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-04-1024x583.png)
Вас перенаправит на сайт сервиса artboard.studio, где вам необходимо будет зарегистрироваться. На первом шаге нужно ввести email и пароль, либо войти с помощью Facebook или Google.
![Регистрация в Artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-05.png)
На втором шаге регистрации вам предложат заполнить небольшую анкету. Здесь можно указывать любые данные из списка. Это не на что не влияет.
![Плагин с мокапами для фигма. Настройка](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-06.png)
После регистрации снова нажмите на ссылку, которая есть в плагине «Artboard Studio» в Figma.
![Генерация API key в сервисе artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-07-1024x539.png)
Вас перенаправит на страницу, где вы сможете сгенерировать Api Key. Для этого нажмите на синею кнопку справой стороны. Затем скопируйте появившийся ключ.
![Вставка API KEY в плагин для фигма Artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-08.png)
Вставьте Api key в окно плагина в фигме и нажмите на кнопку «Save and continue».
Мокапы для Figma. Как пользоваться плагином.
![Плагин с мокапами для фигма](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-09.png)
Пользоваться мокапами в фигме очень просто. Для этого запустите плагин Artboard Studio и выберите понравившийся вам мокап из представленного списка.
![Поиск мокапов в плагине Artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-10.png)
Вы можете производить поиск мокапов с помощью верхней строки поиска. Если хотите вставить мокап телефона, то введите «Iphone» или другую марку. Введите в окно поиска «laptop», если хотите найти мокап ноутбука. Аналогично можно искать мокапы книги, визитки, макбука, упаковки и т.д.
![Выбор категории мокапов в плагине для Figma](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-11.png)
Если нажмёте на выпадающий список с надписью «All items», то появится возможность выбрать бесплатные мокапы «Free items» или платные «Premium items».
![Популярность просмотров мокапов в плагине фигмы. Выпадающее окно в Artboard studio](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-12.png)
Можно сортировать мокапы если развернуть список, который есть по центру.
![Категории мокапов в плагине фигмы](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-13.png)
Чтобы отображалась определенная категория мокапов, разверните выпадающий список справа. Тут есть множество категорий, которые вы можете использовать в своих проектах.
Как вставить мокап в фигме с помощью плагина
![Категория Electronics. Мокапы для фигма](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-14.png)
Чтобы вставить мокап в фигме с помощью плагина Artboard Studio Mockups, выберите нужный мокап из списка. Для примера выберу ноутбук.
![Как вставить свое фото в мокап в фигме](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-15-1024x583.png)
При вставке мокапа в ваш проект в Figma, у вас появится 2 элемента: ноутбук и фрейм куда необходимо вставить ваш дизйан.
![Изменение размера фрейма с помощью инструмента Scale в Figma](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-16-1024x583.png)
Если ваш дизайн больше фрейма, который появился, то уменьшите размер дизайна с помощью клавиши «K».
![Вставка своего дизайна в мокап фигмы](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-17-1024x584.png)
Вставьте ваш дизайн в фрейм, как показано на скриншоте выше. Выберите фрейм и нажмите на кнопку «Render selected frame» в плагине.
![Пример мокапа в фигме. Ноутбук.](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-18-1024x582.png)
Ву-а-ля! Вы ставили свой дизайн макет в мокап ноутбука.
![Мокап айфона в фигме.](https://web-design.center/wp-content/uploads/2021/09/mokapy-dlya-figma-19.png)
Аналогичную операцию можно проделать для айфона и вставить ваш дизайн в мокап телефона.
Заключение
Итак, вы этом видео вы узнали как использовать мокапы для фигма. Теперь вы будете во всеоружии и сможете прокачать ваш дизайн.
P.S. Получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).