Мокапы в Figma: 3D девайсы
В этой подборке мы обозреваем возможности плагинов, которые создают 3D модели устройств (телефоны и ноутбуки) и вписывают в них ваш контент. Это полезно при создании портфолио и демонстрации макетов.
Как устанавливать плагины в Figma читайте здесь.
Device Models
Плагин умеет создавать (на февраль 2020) два вида устройств — iPhone 11 и Macbook Pro. Оба девайса можно покрутить в любом направлении и настроить для них цвет. Картинка сохраняется как png с прозрачным фоном.
Как пользоваться:
- Создайте заранее фрейм подходящего размера, либо запустите плагин, выберите девайс из списка и нажмите Create Empty Frame — плагин создать фрейм, в который вы уже сможете поместить ваш контент
- Выберите фрейм, запустите плагин, выберите из списка девайс и нажмите Save as Image
Особенности: плагин работает только с фреймами строго определенного размера. Все, что отличается по пропорциям, будет безжалостно растянуто и искажено.
Ссылка на плагин: https://www.figma.com/community/plugin/906973799344127422/Device-Models
Angle Mockups
В бесплатной версии плагина вы можете залить любой свой вектор фреймом. При этом доступен выбор качества и плотности пикселей.
Как пользоваться:
- Создайте вектор нужно формы
- Запустите плагин, выберите фрейм, содержимое которого требуется вписать
Особенности: есть ограничения по размеру фрейма, не слишком интуитивное управление
Ссылка на плагин: https://www.figma.com/community/plugin/778645840235495725/Angle-Mockups
Mockuuups Studio
Плагин предлагает вписать ваш фрейм в один из девайсов, содержащихся в наборе. В библиотеке есть несколько бесплатных устройств, и большой набор платных.
Устройства нельзя поворачивать или перекрашивать, но взамен плагин предлагает большой выбор устройств и фонов: даже среди бесплатных есть смартфоны, ноутбуки, мониторы и даже часы. Кроме того, плагин бережно обходится с сохранением пропорций, убирая лишнюю часть изображения за кадр.
Также плагин предусматривает фильтрацию по наличию в кадре рук, фона и ориентацию.
Как пользоваться:
- Выберите фрейм
- Запустите плагин
- Выберите шаблон
- Добавьте фото в проект или сразу экспортируйте
Ссылка на плагин: https://www.figma.com/community/plugin/786250770157843670/Mockuuups-Studio
Публикация дополняется
у меня вопрос как вставить имеющийся мокап в фигму, здесь я ответа не нашол