Как создавать и добавлять мокапы в свои проекты Figma с помощью плагинов

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

Вместо того, чтобы сохранять свои проекты Figma и переходить в другую программу для создания макета, вы можете легко загрузить плагины для макетов в Figma. Существует множество вариантов плагинов в различных стилях, но все они просты в использовании и интегрируются в более крупные проекты.

Как найти и скачать плагины Figma

Загрузка и установка плагина в Figma не зависит от того, используете ли вы приложение или браузерную версию. Из Домашняя страница браузера Figma, нажмите Сообщество > Плагины и виджетыи выполните поиск по списку или воспользуйтесь строкой поиска.

Из Приложение Figma, главная страница предложит тот же вариант, что и браузер, для перехода на страницу сообщества. Но если вы находитесь на странице дизайна, вы можете щелкнуть логотип Figma, а затем Плагины. Если у вас уже установлены плагины, вы увидите их здесь.

Чтобы узнать больше, выберите Просмотрите плагины в сообществе.

Это приведет вас на страницу сообщества в приложении, где вы сможете искать другие плагины.

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

Когда вы найдете плагин, который хотите скачать, нажмите на синюю Установить кнопка.

Если вы не знаете, что искать, вот пять наших любимых плагинов для мокапов. Есть еще много других, но хорошо бы с чего-то начать.

• Мокапы из глины 3D
• Угловые Мокапы
• MockRocket - 3D Мокапы
• Макет
• Векторные 3D-элементы

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

Процесс установки плагинов одинаков независимо от типа используемого вами плагина, но могут быть некоторые различия в том, как они используются. Вот почему всегда лучше прочитать страницу сообщества отдельного плагина для получения дополнительной информации.

В Figma вы можете выбрать готовые размеры рамок для конкретных экранов, таких как iPhone 13 или большой или маленький Android. Вы должны создать свой дизайн для предполагаемого размера устройства, а не пытаться изменить размер дизайна. позже, чтобы соответствовать вашему макету, но некоторые макеты допускают немного другие размеры без искажение.

Вы даже можете использовать снимок экрана с вашего устройства, размер которого идеально подходит для макета того же устройства.

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

Мы собираемся показать вам, как использовать три из предложенных нами плагинов: Clay Mockups 3D, Angle Mockups и Vectory 3D Elements. Давайте сразу приступим.

Мокапы из глины 3D

Открыв свой дизайн, выберите рамку, а затем перейдите к Плагины и выбрать Мокапы из глины 3D. Откроется окно, в котором вы можете выбрать устройство для макета. Ваш дизайн должен отображаться на экране макета в этом окне.

Вы можете изменить угол макета, а также цвет в этом окне. Если вы довольны тем, как это выглядит, нажмите Сохранить как изображение.

Вы можете вернуться и изменить цвет или другие аспекты в любое время, нажав Редактировать макет под Плагин в правом меню. Теперь вы можете добавить свой плагин в более крупные проекты, такие как презентации или портфолио.

Угловые Мокапы

Чтобы использовать Angle Mockups, вам необходимо создать учетную запись Angle, чтобы загрузить библиотеку макетов с их веб-сайта. На Сайт Энгла, нажмите Войти, который откроет всплывающее окно, в котором вы можете нажать Зарегистрироваться и добавьте свои данные, чтобы создать бесплатную учетную запись.

После входа в систему, чтобы загрузить макеты, нажмите Мокапы > Скачать образец. Для более полного набора макетов вы можете заплатить за премиум-доступ, но образец, предлагаемый с бесплатной учетной записью, достаточно хорош.

После загрузки разархивируйте файл. Он содержит образцы, которые вы можете использовать в Figma, Sketch и Adobe XD, а также несколько бесплатных обоев. Открытым УголФигма. Вы найдете два видеоролика, которые помогут использовать мокапы, а также четыре набора файлов Figma с различными мокапами.

Чтобы импортировать файлы в свою учетную запись Figma, перейдите в браузер Figma и нажмите на свой профиль. Вы можете получить доступ к этому из приложения, перейдя в Файл > Открыть файловый браузер. Перетащите каждый файл Angle в Figma. Затем откройте файл Angle, дважды щелкнув его на странице браузера Figma.

Найдите угол устройства, который вы хотите использовать для макета, и скопируйте его (СМэриленд + С для Mac или Стрл + С для Windows). Вставьте это (Смд + В для Mac или Стрл + V для Windows) в ту же монтажную область, что и ваш основной дизайн.

В палитре слоев расширяйте слои экрана макета, пока не увидите слой со значком изображения под названием Поместите артборд сюда. Выберите этот слой. Затем перейдите к Плагины > Угловые макеты и выберите свой оригинальный дизайн во всплывающем окне.

Это должно отображаться в окне предварительного просмотра под углом вашего макета, но не будет показывать устройство макета. Нажмите Подать заявление и ваш экран теперь должен быть на макете устройства под правильным углом.

Векторные 3D-элементы

Vectary 3D работает аналогично Clay Mockups 3D, хотя у него меньше возможностей для макетов устройств, поскольку он также предлагает множество 3D-ресурсов. Откройте свой дизайн, выберите рамку и перейдите к Плагины > Vectary 3D Elements.

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

Теперь у вас есть 3D-макет вашего дизайна на выбранном вами устройстве. Вы можете легко добавить его в другой дизайн.

Когда ваш макет будет готов, вы можете сохранить его как файл PNG, чтобы легко использовать в другом дизайне. Нажмите Файл > Экспорт. Выберите выбранное изображение для экспорта, затем нажмите Экспорт для вашего окончательного PNG.

Добавьте реалистичности своим проектам с мокапами Figma

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

Плагины макетов Figma с некоторыми отличиями в применении просты в доступе и использовании, так почему бы не попробовать?

Как создать мастер-шаблоны для презентаций в Figma

Читать дальше