2025-12-08 17:13:22

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

Делать мокапы (макеты) в Figma - это одна из сильных сторон программы. Инструменты платформы и система плагинов превращают этот процесс из рутинной задачи в творческий и увлекательный этап презентации. Освоив несколько ключевых приемов, вы сможете визуализировать свой интерфейс в любой ситуации. Вот подробное руководство, от простого к сложному.

Что такое мокап в Figma

Мокап в Figma - это не просто картинка, а ключевой инструмент презентации, который превращает плоский интерфейс в осязаемый и убедительный прототип. Это реалистичное изображение вашего дизайна (сайта, приложения, логотипа), помещенное на фотографию устройства или предмета (телефон, компьютер, визитка, баннер), чтобы показать, как он будет выглядеть в «реальном мире».

Этот прием добавляет работе глубины, профессионального лоска и помогает клиенту или команде сразу увидеть финальную цель. Использование мокапов стало стандартом для оформления портфолио и презентаций, так как демонстрирует внимание к деталям. Есть три основных подхода, и вы можете комбинировать их.

Быстрый и простой способ с помощью плагинов

Идеально для начинающих и скорости. Этот способ - настоящее спасение, когда нужно получить впечатляющий результат буквально за минуты. Плагины, такие как Mockuuups Studio, предлагают огромные готовые библиотеки с тщательно отснятыми сценами и устройствами под разными углами.

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

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

Найдите плагин: В Figma нажмите Cmd/Ctrl + /, введите "Mockup" и выберите ресурсы (Resources).
Как использовать:

Запустите плагин из меню.
Выберите понравившийся мокап (например, MacBook на столе).
Плагин вставит мокап как Frame с изображением-заполнителем (placeholder) на экране.
Просто перетащите ваш готовый дизайн (фрейм или скрин) из файла на этот заполнитель - он автоматически подставится в экран устройства! Figma использует функцию Image Fill (заполнение изображением).

Использование масок и режимов наложения

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

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

Поиск изображения мокапа

На сайтах с бесплатными фото (Unsplash, Pexels) или специализированных на мокапах (Freepik, Pixeden, Mockup World). Ищите "free mockup psd" - часто в архиве есть просто .jpg файл смартфона на столе.

Подготовка в Figma

Импортируйте изображение мокапа в Figma (Ctrl/Cmd + Shift + K или перетащите).
Поместите ваш дизайн (фрейм со скринами приложения) поверх изображения мокапа.

Обтравка экрана

На изображении мокапа найдите экран устройства. Часто на хороших мокапах он белый или серый.
Возьмите инструмент Pen (P) и обведите экран по контуру, создав векторную фигуру (замкните контур).
Выделите эту фигуру и ваше изображение с дизайном, нажмите Ctrl/Cmd + Alt + M (или выберите "Use as Mask" в контекстном меню). Ваш дизайн будет обрезан по форме экрана.

Добавление реалистичности

Выделите слой с вашим дизайном внутри маски.
На панели Design найдите Blend Mode (Режим наложения).
Попробуйте Multiply (Умножение), если экран мокапа был светлым - это добавит эффект отражения от оригинального экрана. Или Overlay (Перекрытие) для более тонкого эффекта. Экспериментируйте.

Плюсы данного метода: Полная свобода, работает с любым изображением, дешево (часто бесплатно). Минусы: Требует времени и навыка подбора правильных режимов наложения.

Использование Auto Layout и плагинов для искажения

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

Авто-раскладка (Auto Layout), в свою очередь, незаменима для создания аккуратных сеток из одинаковых элементов, таких как витрина приложений в магазине на скриншоте ноутбука. Комбинация этих инструментов позволяет решать самые сложные задачи по интеграции, добиваясь максимального реализма даже в нестандартных ситуациях.

Плагины для изогнутых экранов

Используйте плагин Warp Image.
Поместите ваш плоский дизайн, запустите плагин.
С помощью контрольных точек "деформируйте" изображение, чтобы оно повторяло кривизну экрана на мокапе.
Затем используйте Режим наложения (как в Способе 2), чтобы вписать его.

Для повторяющихся элементов

Создайте компонент с вашим скрином.
Используйте Auto Layout внутри компонента, чтобы легко менять отступы (padding) вокруг скрина - это создаст эффект рамки устройства.
Продублируйте (Ctrl/Cmd + D) этот компонент много раз, создав сетку.
Поместите эту сетку на мокап открытого ноутбука и примените маску.

Сравним с помощью таблицы основные способы создания мокапов. Это поможет быстро выбрать подходящий метод:

Критерий	Способ 1: Плагины	Способ 2: Маски + Наложения	Способ 3: Продвинутые инструменты
Скорость	Очень быстро (минуты)	Средне (зависит от сложности)	Медленно (требует настройки)
Качество/Реализм	Высокое (готовые сцены)	Максимальное (полный контроль)	Высокое (для сложных задач)
Гибкость	Ограничена набором плагина	Полная (работа с любым изображением)	Специализированная (под конкретную задачу)
Сложность	Очень низкая (подходит новичкам)	Средняя (требует понимания слоев)	Высокая (нужен навык)
Лучше всего подходит для	Быстрых презентаций Портфолио Соцсетей	Полного контроля Уникальных мокапов Бесшовной интеграции	Криволинейных поверхностей Сложных сцен (витрины) 3D-эффектов

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

Общий пошаговый чек-лист

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

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

Определите цель: Где будет использован мокап (презентация, портфолио, соцсети)?
Выберите способ: Плагин для скорости или ручной для контроля.
Подготовьте дизайн: Убедитесь, что ваш макет/скрин - это отдельный Frame с правильными размерами (например, 375x812 для iPhone 14 Pro).
Работайте слоями: Структурируйте: фон (фоновая фотография стола), изображение мокапа (устройство без экрана), маска (форма экрана), ваш дизайн (внутри маски).
Добавьте финальные штрихи:

Тени и эффекты: Иногда к Frame с вашим дизайном внутри можно добавить Background Blur или Layer Blur, чтобы он лучше "вживлялся".
Цветокоррекция: Добавьте Color Adjust поверх всего мокапа, чтобы тон изображения и дизайна совпадали.

Где брать ресурсы:

Бесплатные мокапы: Freepik, Pixeden, Mockup World, Behance (в поиске укажите "free mockup").
Платные и суперкачественные: UI8.net, GraphicRiver, Artboard Studio.

Вывод

Самый профессиональный и быстрый путь для начинающего - сочетание Способов 1 и 2. Используйте плагин, чтобы быстро вставить базовый мокап, а затем вручную доработайте его с помощью режимов наложения и масок для идеального результата.