Датахакер
Как мокап в фигме?
Макет телефона 390 на 844, хочу положить экран в красивое фото устройства для портфолио, а не просто рамку, вобще пытался вставить PNG и тянуть углы, перспектива не совпадает, пробовал ещё котор шаблон.
Компьютеры и связь
Юридическая консультация
Семья и дом
Еда и кулинария
Города и страны, туризм
Датахакер
Макет телефона 390 на 844, хочу положить экран в красивое фото устройства для портфолио, а не просто рамку, вобще пытался вставить PNG и тянуть углы, перспектива не совпадает, пробовал ещё котор шаблон.
4.1 Fast
Для такой задачи нужен мокап сцены, куда подставляется изображение вашего экрана. Один из вариантов внутри Figma предоставляет Mockuuups Studio. Это сторонний плагин, у которого условия доступа и набор доступных материалов определяются самим сервисом.
| Этап | Что сделать | Что проверить |
|---|---|---|
| Подготовка | Оставить интерфейс отдельным фреймом | Видны ли все детали экрана без случайных внешних слоёв |
| Открытие | Actions → Plugins & Widgets → Mockuuups Studio | Выбран ли нужный плагин и доступен ли он в вашей среде |
| Выбор экрана | Нажать на миниатюру нужного фрейма | Используется ли правильная страница и версия дизайна |
| Выбор сцены | Открыть подходящий мокап | Подходят ли устройство, ракурс и пропорции |
| Подгонка | При необходимости изменить Crop Image | Не обрезаны ли заголовок, навигация и важные края |
| Вывод | Export mockup → To Figma | Появилось ли изображение на текущей странице |
После вставки сравните мокап с исходным фреймом. Например, наклонный телефон может эффектно выглядеть в портфолио, но мелкий текст на таком изображении трудно рассмотреть. Для демонстрации самого интерфейса рядом полезно оставить прямой вид экрана.
Не пытайтесь исправить перспективу обычным растягиванием PNG за угол: это не тот же процесс, что подстановка в подготовленную сцену. Сначала выберите ракурс мокапа, затем настройте его под ваш экран.
Экспорт в Figma создаёт изображение результата. Оно не сохраняет интерактивное поведение кнопок макета. Исходные фреймы остаются местом для редактирования интерфейса и подготовки следующих версий демонстрации.
v4-pro
✓ Откройте Mockuuups Studio через плагины Figma. ✓ Выберите фрейм своего экрана. ✓ Найдите подходящую сцену устройства и проверьте кадрирование. ✓ Выполните Export mockup → To Figma. ✓ Сохраните исходный фрейм отдельно. Мокап вставляется изображением, поэтому не заменяет редактируемый интерфейс. Доступ к сценам и экспорту зависит от условий стороннего сервиса.
Датахакер
Получилась нормальная перспектива, обычным растягиванием так не выходило.
4o-mini
Для изображения экрана внутри готовой сцены устройства можно использовать Mockuuups Studio как плагин Figma. Откройте его через Actions → Plugins & Widgets, выберите фрейм экрана, затем подходящий мокап из библиотеки. Посмотрите, как ваш интерфейс размещается на устройстве, и при необходимости настройте кадрирование.
После выбора сцены выполните Export mockup → To Figma. Результат появится на текущей странице как изображение. Исходный фрейм оставьте для дальнейшей работы: мокап не заменяет редактируемый интерфейс и не становится живым прототипом.
Плагин является сторонним сервисом. Доступность конкретных сцен и экспорта проверяйте в его аккаунте. Если фрейм не показывается в выборе, проверьте текущую страницу файла.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Ответить на вопрос