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

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

Что такое мокап и зачем он нужен в Figma

Мокап (от англ. mockup) — это статическая визуализация продукта в контексте его использования. В веб- и UI/UX-дизайне под мокапом чаще всего понимают изображение интерфейса, помещённого на фото или 3D-модель устройства: смартфона, планшета, ноутбука или даже умных часов. Такой приём позволяет показать, как будет выглядеть приложение или сайт в «реальной жизни».
Figma идеально подходит для работы с мокапами благодаря своей гибкости, поддержке компонентов, масок и авто-расположения. В отличие от растровых редакторов, где каждый мокап требует ручной вставки и коррекции перспективы, в Figma можно создавать динамические шаблоны, которые автоматически адаптируются под любой контент.
Мокапы особенно полезны на этапе презентации дизайна заказчику. Голый экран без рамки может выглядеть абстрактно, тогда как тот же интерфейс в корпусе iPhone 15 Pro сразу воспринимается как законченный продукт. Это усиливает доверие и ускоряет процесс согласования.

Основные способы работы с мокапом в Figma

Существует несколько проверенных подходов к интеграции дизайна в мокап. Выбор метода зависит от целей: нужно ли быстро показать один экран или создать универсальный шаблон для команды.
Первый способ — использование готовых мокапов из плагинов или библиотек. Популярные источники: Figma Community, Freepik Mockups, Mockuuups Studio. Эти файлы содержат преднастроенные слои, где достаточно заменить изображение экрана, и мокап автоматически отобразит ваш дизайн под правильным углом и с тенями.
Второй способ — ручная вставка через маски. Этот метод даёт полный контроль над процессом. Вы импортируете PNG-изображение устройства, выделяете область экрана и применяете к ней маску. Затем внутрь маски вставляете свой дизайн-кадр. Преимущество — точное позиционирование; недостаток — требуется ручная настройка перспективы.
Третий способ — использование компонентов с вариантами. Опытные дизайнеры создают компонент «Device Frame», в котором есть параметры: тип устройства (iPhone, iPad, MacBook), ориентация (портрет/альбом), тема (светлая/тёмная). Это особенно эффективно в больших проектах, где нужно единообразие.

1. Найдите или загрузите прозрачный PNG-мокап устройства.
2. Поместите его в Figma и определите границы экрана.
3. Создайте фигуру (прямоугольник), соответствующую размеру экрана.
4. Выделите мокап и фигуру, затем примените маску (Ctrl+Alt+M).
5. Внутрь маски вставьте фрейм с вашим дизайном.
6. Настройте Constraints, чтобы контент адаптировался при изменении размера.

Пример: вставка макета в мокап iPhone

Допустим, у вас есть дизайн экрана приложения 375×812 px (стандарт для iPhone 13). Вы скачиваете мокап iPhone в Figma Community, где уже выделена область экрана. Просто перетаскиваете свой фрейм внутрь указанного слоя — и Figma автоматически обрежет изображение по форме экрана.
Если мокап не подготовлен, вы можете создать маску вручную:

• Возьмите Pen Tool и обрисуйте экран с учётом перспективы.
• Превратите путь в фигуру (Fill).
• Сгруппируйте её с мокапом и примените в качестве маски.
• Вставьте дизайн-фрейм внутрь группы.

Как создать свой мокап в Figma: пошагово

Готовые мокапы удобны, но не всегда соответствуют бренду или нужному ракурсу. Иногда проще сделать свой. Это особенно актуально, если вы работаете с нишевыми устройствами (умные очки, POS-терминалы, IoT).
Шаг 1: Подготовьте исходное изображение. Лучше использовать PNG с прозрачным фоном и высоким разрешением. Источники: Freepik, Pixeden, Mockup World. Убедитесь, что изображение легальное и подходит для коммерческого использования.
Шаг 2: Определите зону экрана. Используйте Rectangle Tool, чтобы нарисовать прямоугольник точно по границам дисплея. Если экран под углом, активируйте режим Freehand и вручную скорректируйте углы фигуры.
Шаг 3: Создайте компонент. Выделите мокап и фигуру-экран, объедините в группу и преобразуйте в компонент. Назовите его, например, «Device / iPhone 15 Pro / Portrait».
Шаг 4: Настройте маску. Выделите группу, выберите фигуру-экран, нажмите Ctrl+Alt+M. Теперь всё, что вы поместите внутрь этой группы, будет обрезано по форме экрана.
Шаг 5: Добавьте варианты. Через панель Properties создайте варианты компонента: по ориентации (portrait/landscape), цвету корпуса (чёрный/белый), состоянию (разблокирован/заблокирован).

Автоматизация с помощью Auto Layout

Чтобы мокап был адаптивным, оберните его в Auto Layout. Это позволит легко масштабировать блок без потери пропорций. Также задайте Constraints для внутреннего фрейма: «Left & Right» и «Top & Bottom», чтобы контент оставался в центре при изменении размера.

Лучшие практики и типичные ошибки

Даже опытные дизайнеры допускают ошибки при работе с мокапами. Вот основные ловушки и как их избежать.
Первая ошибка — игнорирование разрешения. Если вы вставляете дизайн 414×896 в мокап iPhone 8 (375×667), изображение будет искажено. Всегда проверяйте соответствие размеров экрана и используйте режим «Scale to Fit» при необходимости.
Вторая ошибка — отсутствие теней и бликов. Готовый мокап может выглядеть плоско, если не добавить эффекты. Используйте Layer Blur для лёгкого размытия фона, добавьте Inner Shadow на экран, чтобы имитировать глубину.
Третья — перегруженность. Не стоит показывать 10 экранов в мокапах на одной странице. Лучше выбрать 2–3 ключевых кадра: главный экран, карточка товара, экран оформления заказа.

Чек-лист перед презентацией с мокапами

• ✓ Соответствие размеров дизайна и экрана мокапа;
• ✓ Корректная ориентация (портрет/альбом);
• ✓ Отсутствие обрезания важных элементов (например, кнопки CTA);
• ✓ Единый стиль мокапов (цвет, угол, освещение);
• ✓ Чёткая визуальная иерархия на слайде.

Экспорт и презентация дизайна с мокапами

После создания мокапа важно правильно его экспортировать и представить. Figma предлагает несколько режимов: Share → Presentation Mode, где можно скрыть слои, сетки и инструменты.
Для презентации заказчику рекомендуется использовать Page в Figma, где каждый слайд — это один кадр с мокапом. Добавьте краткие подписи: название экрана, цель, ключевое действие пользователя.
Экспорт в PNG или PDF — стандартный путь. Установите разрешение x2 или x3 для чёткой печати. Если мокап используется в видео или анимации, экспортируйте через Lottie или используйте внешние инструменты вроде After Effects.
Для командной работы настройте Shared Library. Разместите там все мокапы как компоненты, чтобы коллеги могли их использовать без дублирования. Это обеспечивает единообразие в проектах.

Экспертное мнение

Современные тренды идут в сторону интерактивных мокапов. Например, с помощью плагина Smart Animate for Mockups можно анимировать переход между экранами прямо внутри корпуса устройства. Это создаёт эффект «живого» устройства и сильно усиливает впечатление.
Также набирают популярность 3D-мокапы. Хотя Figma пока не поддерживает полноценную 3D-графику, можно импортировать изображения с реалистичной перспективой из Blender или Spline. Такие мокапы отлично работают в презентациях для стартапов и инвесторов.

Вопросы и ответы

Заключение

Работа с мокапами в Figma — это не просто технический приём, а важный инструмент коммуникации. Он помогает дизайнерам говорить на одном языке с заказчиками, маркетологами и разработчиками. Правильно оформленный мокап делает проект зрелым, продуманным и профессиональным.
Главное — не гнаться за количеством, а стремиться к уместности. Каждый мокап должен выполнять задачу: показать контекст, подчеркнуть преимущества интерфейса или упростить принятие решения. Используйте компоненты, маски и Auto Layout, чтобы процесс был быстрым и масштабируемым.

• Используйте маски и компоненты для быстрой вставки дизайна в мокап.
• Создавайте универсальные шаблоны с вариантами для командной работы.
• Подбирайте мокапы под целевую аудиторию и устройство.
• Не перегружайте презентации — фокусируйтесь на ключевых экранах.
• Автоматизируйте процесс с помощью плагинов и библиотек.