Мокапы в Figma: 3D девайсы




В этой подборке мы обозреваем возможности плагинов, которые создают 3D модели устройств (телефоны и ноутбуки) и вписывают в них ваш контент. Это полезно при создании портфолио и демонстрации макетов. 

Как устанавливать плагины в Figma читайте здесь. 

Device Models

Плагин умеет создавать (на февраль 2020) два вида устройств — iPhone 11 и Macbook Pro. Оба девайса можно покрутить в любом направлении и настроить для них цвет. Картинка сохраняется как png с прозрачным фоном. 

Мокап для Figma



Как пользоваться: 

  1. Создайте заранее фрейм подходящего размера, либо запустите плагин, выберите девайс из списка и нажмите Create Empty Frame — плагин создать фрейм, в который вы уже сможете поместить ваш контент
  2. Выберите фрейм, запустите плагин, выберите из списка девайс и нажмите Save as Image

Особенности: плагин работает только с фреймами строго определенного размера. Все, что отличается по пропорциям, будет безжалостно растянуто и искажено. 

Мокап для Figma

Ссылка на плагин: https://www.figma.com/community/plugin/906973799344127422/Device-Models 

Angle Mockups

В бесплатной версии плагина вы можете залить любой свой вектор фреймом. При этом доступен выбор качества и плотности пикселей. 

Мокап для Figma

Как пользоваться:

  1. Создайте вектор нужно формы 
  2. Запустите плагин, выберите фрейм, содержимое которого требуется вписать

Особенности: есть ограничения по размеру фрейма, не слишком интуитивное управление

Ссылка на плагин: https://www.figma.com/community/plugin/778645840235495725/Angle-Mockups

Mockuuups Studio 

Плагин предлагает вписать ваш фрейм в один из девайсов, содержащихся в наборе. В библиотеке есть несколько бесплатных устройств, и большой набор платных. 

Мокап для Figma

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

Мокап для Figma

Также плагин предусматривает фильтрацию по наличию в кадре рук, фона и ориентацию. 

Как пользоваться:

  1. Выберите фрейм
  2. Запустите плагин
  3. Выберите шаблон
  4. Добавьте фото в проект или сразу экспортируйте

Ссылка на плагин: https://www.figma.com/community/plugin/786250770157843670/Mockuuups-Studio

 

Публикация дополняется

Помогла ли вам эта статья?

Вы уже голосовали
Комментариев: 1
  1. ДМИТРИЙ

    у меня вопрос как вставить имеющийся мокап в фигму, здесь я ответа не нашол

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: