Демонстрация прототипа заказчику в 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 без сохранения изображений

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

Вы уже голосовали
Комментариев: 11
  1. Ден

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

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

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

  2. вафыа

    аывфалрфышгва

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

      Ладно

  3. Онтон

    Здрасьте!
    Презентация откроется по ссылке у любого пользователя без Figma?

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

      Конечно! Презентация открывается в браузере, аккаунт или клиент Figma для этого не нужны

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

        Кажется, я соврал, извините — аккаунт в Figma всё-таки нужен :(

        1. Алсей

          А у меня в режиме инкогнито ссылка открылась, и аккаунт вводить не приходилось.

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

            Полагаю, зависит от подписки — бесплатные версии открываются
            , платные вроде бы нет. Когда я проверял, у меня, видимо, был платный тариф

  4. vladislove

    Здравствуйте, у меня ошибка — «a prototype needs to have at least one frame». Хотя я выбрал нужный фрейм, и даже перепробовал отображение на разных устройствах, и всё равно ничего, ошибка так и висит.

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

      Добрый день, так трудно сказать. Вы можете прислать скриншот, а лучше ссылку на работу на почту support@svgpng.ru

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

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