Демонстрация прототипа заказчику в Figma без сохранения изображений




Помимо возможности мультиплеера (иными словами, командной работы над проектом) в Figma есть очень полезная функция — можно показать прототип проекта в режиме демонстрации клиенту прямо в его браузере. 

Таким образом вы избавляетесь от необходимости экспортировать проект в jpg или png и рассылать тяжелые изображения через почту или обменники. 

Как включить режим демонстрации

Режим демонстрации включается в правой верхней части экрана треугольной кнопкой «Present». 

Кнопка Present
Кнопка Present в интерфейсе Фигмы

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

Также в этом режиме можно просматривать и оставлять комментарии. Для этого нажмите на окно диалога в верхней левой части. 

Как расшарить демонстрацию проекта

Чтобы получить ссылку для отправки клиенту: 

Расшарить просмотра проекта

  1. Нажмите «Share prototype» в верхней правой части экрана
  2. Выберите во всплывающем окне Anyone with the link — это будет означать, что любой человек, имеющий эту ссылку, сможет просматривать страницу с демонстрацией
  3. Выбрать либо Can View — только просмотр, либо Can edit — с возможностью редактировать (не рекомендуется)
  4. Скопировать ссылку через кнопку Copy link
  5. Отправить ссылку
Права доступа просмотра
Права доступа просмотра

Стоит отметить, что макеты, разумеется, не адаптивные, поэтому у пользователя с меньшим разрешением экрана может появиться горизонтальный скролл.

Как изменить девайс в презентации

Девайс меняется в режиме редактора в правом тулбаре в разделе Prototype.

  1. Выберите нужный фрейм
  2. Переключите на Prototype
  3. Нажмите Show prototype settings
  4. Поменяйте Device и Model, если требуется

Демонстрация прототипа заказчику в Figma без сохранения изображений Демонстрация прототипа заказчику в Figma без сохранения изображений

Как скрыть тулбар и футер

Чтобы просмотру прототипа не мешал интерфейс Фигмы, вы можете скрыть тулбар и футер с помощью горячих клавиш ⌘\ или ⌘. (ctrl\ или ctrl. для Windows) или через меню Option > Show Toolbar and Footer. Подробнее читайте здесь. 

Как поменять цвета фона в прототипе

В рабочем файле в правом сайдбаре выберите вкладку Prototype, далее, если у вас не выбран фрейм, вы сразу увидите поле Background — меняйте его.

Демонстрация прототипа заказчику в Figma без сохранения изображений

Если вы уже выбрали один из фреймов, нажмите кнопку Show prototype settings и уже в открывшихся настройках меняйте цвет Background.

Демонстрация прототипа заказчику в Figma без сохранения изображений

Комментариев: 2
  1. Ден

    Как заменить черный цвет фона на свой? Не создать еще один фрейм позади всего, а именно заменить черный цвет?

    1. SVGPNG.RU (автор)

      Чтобы заменить фоновый цвет в прототипе, надо перейти во вкладку Prototype справа и поменять цвет в Background (если у вас выбран фрейм, сначала нажмите на Show prototype Settings

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

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


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки