Два значения слова «мокап»
Мокап (mockup) — статичное изображение интерфейса, по которому видно, как он будет выглядеть. Нажимать в мокапе нечего: если экраны связаны переходами, это уже прототип.
В работе слово встречается в двух смыслах, и их легко перепутать в переписке с заказчиком.
| Значение | Что это | Для чего | Как сделать в Morfa |
|---|---|---|---|
| Макет экрана | Экран с настоящими цветами, шрифтами, картинками и текстами | Согласовать вид с заказчиком, передать в разработку | Фрейм нужного размера, стили и компоненты, экспорт в PNG или PDF |
| Мокап устройства | Тот же экран внутри телефона, планшета или ноутбука | Портфолио, презентация, лендинг, публикация в соцсетях | Рамка устройства в плеере прототипа или картинка устройства, собранная вручную |
В студиях «мокап» и «макет» часто говорят как синонимы. Мокап идёт после вайрфрейма: вайрфрейм показывает, что где стоит, мокап — как это выглядит, прототип — как это работает. Подробное сравнение всех трёх — в статье про вайрфрейм.
Как сделать мокап экрана в редакторе
Мокап в первом смысле — обычный экран в файле дизайна, доведённый до финального вида.
Создайте фрейм
Нажмите F и выберите готовый размер, например iPhone 16 (393×852) или Desktop (1440×1024). Все 27 размеров собраны в таблице размеров экранов.
Соберите экран
Возьмите шрифты из каталога: все 87 семейств с кириллицей. Пишите настоящие тексты вместо «рыбы», картинки вставляйте перетаскиванием или командой «Поместить изображение…» (⇧⌘K).
Оформите стилями
Цвета и текст задайте стилями, повторяющиеся кнопки и карточки — компонентами. Тогда правка заказчика меняется в одном месте.
Сохраните картинку
Выделите фрейм и откройте «Экспорт…» (⇧⌘E). PNG в масштабе 2× подойдёт для презентации, PDF соберёт несколько экранов в один файл.
Все форматы и настройки описаны на странице экспорта.
Рамки устройств в плеере прототипа
Рамки устройств есть только в плеере прототипа. Их выбирают в файле: снимите выделение, откройте вкладку «Прототип» и в разделе «Устройство» выберите рамку из списка. Кнопкой рядом телефон и планшет поворачивают горизонтально. Затем нажмите ▶ или «Запустить прототип» (⌥⌘↵): экраны откроются в новой вкладке внутри рамки.
Рамка условная: корпус и скруглённый экран, у телефонов — вырез камеры. Это не фотография настоящего устройства. Фон вокруг меняют в разделе «Фон плеера». Фреймы подгоняются под ширину экрана рамки, поэтому лучше сразу рисовать в подходящем размере:
| Рамка в плеере | Экран рамки | Готовый размер фрейма |
|---|---|---|
| iPhone 16 | 393×852 | iPhone 16 |
| iPhone 16 Pro Max | 440×956 | iPhone 16 Pro Max |
| Android | 412×917 | Android Compact |
| iPad | 834×1194 | iPad Pro 11 |
| MacBook | 1280×832 | MacBook Air 13 |
| Desktop | 1440×1024 | Desktop |
Как собрать мокап устройства вручную
Для портфолио обычно нужен экран в реалистичном устройстве. Такую картинку собирают в том же файле из фотографии или рисунка устройства с пустым экраном.
Вставьте картинку устройства
Перетащите файл в редактор или нажмите ⇧⌘K. Подойдут JPEG, PNG, WebP, AVIF и GIF до 20 МБ.
Положите экран сверху
Сделайте копию фрейма экрана (⌘D), перетащите её на картинку и поднимите наверх командой «На передний план» (⌥⌘]).
Подгоните размер
Выберите инструмент «Масштаб» (K) и тяните за угол: фрейм уменьшится вместе с текстом, отступами и скруглениями, пропорции не сломаются.
Скруглите углы
Задайте фрейму экрана «Скругление» как у экрана устройства и проверьте, что включено «Обрезать содержимое».
Сохраните мокап
Выделите картинку и экран, нажмите «Обернуть во фрейм» (⌥⌘G) и экспортируйте новый фрейм в PNG.
Чего в Morfa нет
Генератора мокапов в Morfa нет: нет команды, которая сама вставит экран в телефон, наклонит его или положит на стол.
- Каталога картинок устройств и шаблонов мокапов: публичной библиотеки и сообщества в продукте нет.
- Экспорта рамки из плеера: её видно только при показе прототипа.
- Анимированного мокапа: экспорта в GIF, MP4 и Lottie нет.