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

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

Варианты мокапов: от простых до продвинутых

Мокапы можно условно разделить на три категории: статические, интерактивные и контекстные. Выбор зависит от цели презентации — показать UI в письме клиенту, подготовить портфолио или продемонстрировать поведение приложения в руках пользователя.
Статический мокап — это изображение вашего интерфейса, вставленное в силуэт устройства. Такой формат идеален для первичной презентации, особенно когда важно показать цвета, типографику и композицию. Он создаётся быстро и не требует сложных настроек.
Интерактивный мокап включает анимацию или переходы между экранами внутри макета устройства. Например, клик по кнопке открывает следующий экран — всё это происходит внутри рамки iPhone. Это уже ближе к прототипированию, но с визуальным оформлением корпуса.
Контекстный мокап размещает устройство в реальной обстановке: на столе, в руке, на фоне кафе. Он наиболее эффектно смотрится в портфолио и презентациях, так как помогает зрителю «примерить» продукт на себя.

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

Подготовка дизайна к мокапу

Прежде чем переносить интерфейс в мокап, убедитесь, что он готов к демонстрации. Это означает: соблюдены отступы, выбраны корректные шрифты, нет временных текстов вроде «lorem ipsum» на видимых элементах, а цветовая палитра соответствует брифу.
Первым делом экспортируйте нужный экран в виде фрейма. Рекомендуется использовать отдельный page в Figma с названием «Мокапы» или «Exports». Это упростит организацию проекта и позволит быстро находить нужные артефакты.
Убедитесь, что размер фрейма точно соответствует разрешению целевого устройства. Например:

• iOS: 375×812 px (iPhone 14/15)
• Android: 360×780 px (Pixel 6)
• Web: 1440×900 px (стандартный десктоп)

Если ваш дизайн создан в другом масштабе, воспользуйтесь функцией «Scale to» при копировании или экспорте. Также можно временно изменить размер фрейма под стандартное устройство — Figma автоматически подгонит содержимое.

Как создать мокап в Figma: пошаговая инструкция

Создание мокапа вручную даёт полный контроль над результатом. Ниже — универсальный алгоритм для любого устройства.

1. Найдите или загрузите изображение корпуса устройства. Используйте PNG с прозрачным фоном. Подходят источники: Freepik, Mockup World, Pexels, Unsplash. Убедитесь, что разрешение высокое — не менее 2x от оригинала.
2. Импортируйте изображение в Figma. Перетащите файл в рабочую область или используйте «File → Place Image». Расположите его по центру холста.
3. Создайте фрейм с дизайном интерфейса. Он должен точно совпадать по размеру с экраном устройства. Назовите его, например, «Screen Content».
4. Поместите фрейм поверх экрана устройства. Выровняйте его по центру, используя инструменты Align. Убедитесь, что границы экрана на изображении совпадают с границами фрейма.
5. Примените маску (Mask). Выделите изображение устройства, затем выберите фрейм с дизайном. Щёлкните правой кнопкой → «Mask with [Frame Name]» или используйте сочетание Ctrl+Alt+M (Win) / Cmd+Option+M (Mac).
6. Настройте тень и освещение (опционально). Добавьте легкую тень к устройству через Properties Panel → Effects → Drop Shadow. Это придаст объём.

Готовый мокап можно экспортировать как PNG или JPG. Для презентаций рекомендуется использовать PNG с прозрачным фоном, если это уместно.

Альтернатива: использование компонентов и фреймов

Если вы часто делаете мокапы, создайте библиотеку компонентов. Например, компонент «iPhone 15 Mockup» может содержать:

• Изображение корпуса
• Фрейм-заглушку для экрана
• Настроенные эффекты (тень, блюр)

Тогда каждый новый мокап будет занимать не более минуты: просто замените содержимое экранных фреймов.

Лучшие плагины для мокапов в Figma

Плагины экономят время и расширяют возможности Figma. Ниже — проверенные инструменты для быстрого создания мокапов.

Mockup Ultimate — самый популярный выбор. После установки он предлагает выбрать устройство, указать URL экрана или вставить скрин из буфера. Плагин сам создаёт маску и выравнивает изображение.
PlaceIt особенно полезен для портфолио. Вы загружаете скриншот своего дизайна, выбираете сцену (например, «iPhone в руке на фоне парка»), и получаете фотореалистичное изображение, которое можно вставить в Figma.

Как установить плагин в Figma

1. Откройте Figma и перейдите во вкладку Resources → Plugins.
2. Нажмите Browse plugins и найдите нужный по названию.
3. Нажмите Install.
4. Запустите плагин через значок ⚙️ в правом верхнем углу или через меню Plugins.

После первого запуска большинство плагинов предлагают туториал — обязательно пройдите его.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при создании мокапов. Вот основные из них и пути решения.
Ошибка 1: Несоответствие размеров экрана. Дизайн растягивается или обрезается.
Решение: всегда проверяйте разрешение фрейма. Используйте плагины с авто-подгонкой или создайте шаблон с фиксированными размерами.
Ошибка 2: Плохое качество изображения корпуса. Пикселизация, низкая детализация.
Решение: скачивайте мокапы с разрешением минимум 2000px по длинной стороне. Избегайте JPEG с высокой компрессией.
Ошибка 3: Отсутствие теней и глубины. Устройство «парит» в воздухе.
Решение: добавьте лёгкую тень (Opacity 15–30%, Blur 8–16px). Можно добавить subtle background — градиент или текстуру.
Ошибка 4: Перегруженность сценой. Слишком много объектов на заднем плане.
Решение: используйте размытые или нейтральные фоны. Главное — внимание на продукт, а не на окружение.

Чек-лист перед экспортом мокапа

• ✓ Соответствие размеров экрана и фрейма
• ✓ Чёткость изображения (нет пикселей)
• ✓ Корректное положение тени и глубина
• ✓ Уместность фона (не отвлекает)
• ✓ Актуальность дизайна (нет устаревших элементов)

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

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

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

Заключение

Создание мокапов в Figma — это простой, но мощный способ усилить подачу дизайна. Будь то презентация клиенту, портфолио или внутренний ревью, правильно оформленный мокап делает работу визуально привлекательнее и профессиональнее.
Главное — начать с понимания цели. Простой мокап на белом фоне подойдёт для быстрой демонстрации. А вот для финальной презентации стоит потратить время на контекст, тени и анимацию. Автоматизация через плагины и компоненты позволяет масштабировать процесс без потери качества.

• Используйте маски и прозрачные PNG для ручного создания мокапов.
• Автоматизируйте процесс с помощью плагинов: Mockup Ultimate, PlaceIt, Figmoto.
• Создавайте библиотеки компонентов для частых задач.
• Проверяйте соответствие размеров и качество изображений.
• Добавляйте тени и контекст, но не перегружайте сцену.