Как сделать презентацию в фигме

Просмотр в фигме: режим презентации в Figma и ссылка на проект

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

Чтобы поделиться ссылкой на ваш проект в фигме и отправить его вашему заказчику, коллеге или любому другому человеку нажмите на кнопку «Share» в верхнем правом углу. Затем на надпись «Copy link».

Если эту ссылку открыть в браузере, то можно будет увидеть, ваш курсор и что вы делаете в реальном времени.

Вы будете видеть аватарки тех, кто просматривает ваш проект сверху и справа. Если нажмёте на какую-то аватарку, то будете видеть курсор и действия этого человека.

Как это можно использовать? Например таким можно обсуждать с заказчиком проект и в реальном времени вносить правки.

Как изменить роль приглашенного человека в проекте в фигме?

Если вы пригласили какого-то человека или поделились с ним ссылкой на проект, то можно изменить его роль. Нажмите на синию кнопку «Share», сверху и справа. Затем напротив нужного человека из списка справа выберите одну из следующих ролей:

• Owner — владелец. Если хотите передать ему право на файл. Он может делать с ним что угодно, в том числе удалять.
• Can edit — человек сможет редактировать файл.
• Can view — может просматривать.
• Remove — удалить. Если хотите удалить человека из проекта.

Режим предварительного просмотра в фигме

Чтобы включить режим предварительного просмотра в фигме, нажмите на иконку «Present» сверху справа (она похожа на Play). У вас откроется новая вкладка, где вы сможете просматривать фреймы, которые есть в вашем проекте.

Если до этого в режиме прототипирования (Prototype) вы настроили связи между фреймами и элементами интерфейса, то можно просматривать проект, как интерактивный, кликабельный прототип.

Например при нажатии на кнопку можно сделать всплывающие окна (popup формы), перенаправлять человека к другому фрейму, сделать поля в контактных формах активными и т.д.

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

Как поделиться ссылкой на прототип в фигме?

Если вы находитесь в режиме «Present», то можете поделиться ссылкой на ваш прототип. Для этого нажмите на правую верхнюю кнопку «Share prototype» и в появившемся окне нажмите на надпись «Copy link».

При открытии скопированной ссылки в браузере, можно просматривать прототип в режиме презентации.

Если нажать на иконку «Add comments» слева сверху , то можно оставить комментарии к вашему проекту. К примеру заказчику не понравился заголовок. Он может оставить комментарий и уведомление придёт к вам на почту. Также вы будете видеть комментарий в интерфейсе фигмы.

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

Как в фигме (в режиме просмотра) изменить отображаемое устройство?

Если вы хотите изменить отображаемое устройство в режиме предварительного просмотра «Present», то выберите фрейм. Перейдите во вкладку «Prototype» и нажмите на кнопку «Show prototype settings».

Затем внизу надписи «Device» выберите подходящее устройство из списка. Для примера я выберу фрейм с мобильным приложением и из списка выберу «Iphone 11 pro max».

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

Заключение

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

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

В какой программе делать презентацию? Сравниваем Figma, PowerPoint, KeyNote, Prezi и Google Slides

Много лет назад меня чертовски выбешивало хроническое нежелание дизайнеров моей компании изучать PowerPoint. Многие были авторитарно уволены за это. А новые не наняты. Потому что на вакансию «дизайнер с прямой обязанностью работать в PowerPoint» откликнулось всего лишь. 0 кандидатов.
И вот недавно я прошел обучение по программе «сначала помой тарелки, побегай официантом с месяцок, и только после этого подавайся в метрдотели». То есть, чтобы понять почему мы не растем на 95% в месяц, я решил изучить Figma и еще штук 15 дисциплин, навыков и сервисов. При чем, изучал я их прямо в бою, прямо на живых клиентах, работая на равных с остальными членами команды. Надо мной, собственником компании, даже появились менеджеры.
Зато теперь я могу подробно объяснить всем «за» и «против» того же PowerPoint и других инструментов разработки презентаций. И немаловажная деталь — эксперимент позволил мне освоить новую профессию, которая стопроцентно поднесет мне в старости стакан воды, «если чо»!

Плюсы / минусы PowerPoint

У PowerPoint есть масса «скрытых» возможностей. Его ведь никто толком-то и не знает. Для дизайнеров он — ниже их достоинства. Для клерков — … тоже ниже))
Вот давайте протестируем вас. Знаете ли вы, что PowerPoint может:
— Удалять фон с фотографий? Со скрипом и бубнами, но может.
— Встраивать шрифты в конкретную презентацию? На случай, если у того, кому вы эту презентацию отправили, не будет нужного шрифта.
— Организовывать такую трансформацию между слайдами, от которой захватывает дух? На минуточку, прототипирование 3d-эффектов для наших заказчиков мы делаем в PowerPoint.
Да много еще чего может старый-дбрый редактор презентаций от Micrisoft.
Да, он тормозит даже на MacBook Pro. Да, у него чудовищные баги в работе с цветовыми палитрами. Но причина его опалы в глазах дизайнеров немножечко в другом. Фотошоп, Figma, Sketch, InDesign… Они лежат в некой единой дизайнерской парадигме. Изучая какой-либо лайфхак, вы можете просмотреть ролик про Фотошоп и потом запросто применить полученные знания в Фигме. Но PowerPoint при этом стоит таким особняком, что… полученные о нем знания пригодятся… ну разве что в KeyNote и немножечко в Prezi.

Плюсы / минусы KeyNote

KeyNote работает весьма шустро. В нём можно делать всякие микро-видео и гифки. Анимации в нём — выше всяких похвал. Скоро накидаю тут примеры — всё это сделано в KeyNote.

Недостатки?
Его фукционал, конечно же, не так богат, как PowerPoint-овский. Раздражает то, что из KeyNote нельзя сохранить рисунок! Один клиент недавно пожаловался на то, что для него какой-то дизайнер-фрилансер сделал презентацию портфолио в «модном» KeyNote. И только после расплаты и благополучного исчезновения фрилансера выяснилось: всё, что попало в KeyNote, должно, по замыслу его создателей, оставаться в нём навечно!
Кстати, Google Docs и Google Slides обладают такой же выбешивающей фигнёй!

«Конечность» Google Docs

Когда я пишу пост в Гугл Доксе, вынужден к уже вставленным картинкам добавлять Dropbox-ссылки на те же самые картинки. Ведь когда контент-менеджер начнет готовить пост к публикации, ей понадобятся исходники картинок. Тыкнуть правой кнопкой мыши на картинку в Google Docs-файле и сделать Save As невозможно! Но! Даже тут мы нашли воркэраунд: картинку нужно сохранить в Google Keep. А уже оттуда она запросто сохраняется на диск. Согласен, слишком много знаний в нас вгружает Digital!

«Крутость» Google Slides

Когда клиенты, партнеры, друзья просят помочь с поиском инвестиций, я первым делом предлагаю им изучить Google Docs, Slides и Sheets в связке. Это нужно для того, чтобы при каждом изменении финансовой модели все основные цифры отражались бы в вашей презентации автоматически.
Более подробно об этом мы рассказываем на курсе «Веб-дизайн для предпринимателей», как ни странно))

Плюсы Figma

А что такое Figma?
Кто-то сказал, что Figma — это как Google Docs только для дизайна. И еще такое есть: Фигма — это коллаборативный, ограниченный Фотошоп.

История: один клиент прислал нам на переделку 100500 слайдов, которые были формально в pptx, но представляли собой по одному единому png на каждой странице. И всё. То есть, их откуда-то явно экспортировали. Откуда? Ответ был весьма раздраженным: «один мальчик так сделал».
Почему-то, на старости лет, я думал, что в бизнесе буду конкурировать с зубрами и мастодонтами. А получилось, что в 80% случаев конкурирую с «мальчиками» и «девочками». Ну не суть. Заказчику понадобилось заменить в презентации ни много ни мало, а фирменный стиль. «Сможете как-то это всё хакнуть и чтобы в итоге презентация была редактируемая?» — спросил заказчик.
Конечно сможем! Просто сядем и перерисуем всё с нуля. Но надежда на чудо еще тлела. «Спросите, — говорим, — у вашего фрилансера: в чем он это делал». Оказалось, что мальчик во-первых никуда не исчез, что само по себе почётно. А во-вторых, он прислал нам ссылку на проект в Фигме, где все эти слайды и были отрисованы.
Эта история окончательно привела меня в Figma. Помучившись с ней пару карантинных месяцев, я готов представить вашему вниманию перечень «За» то, чтобы презентации делать в Фигме:

Коллективная работа
Нет ничего круче онлайн-взаимодействия при разработке презентации. Казалось бы, Google Slides тоже это может… Ан нет… в купе с возможностями вести массу версий-веток на одном большом экране, Фигма вырывается далеко вперед. Ну и про «тупиковость» картинок Гугла тоже не забываем.
Знаете, есть такие дизайнеры (их 99%), к которым садишься рядом, формулируешь замечания. А они начинают тут же при тебе все исправлять. Получается оценочная диспропорция. Типа, его работа несколько дней — это размеренное творчество. А учёт моих замечаний — это раз-два и вот, на тебе, подавись. В общем, поскольку я истый стадный интроверт, мне нравится то, что теперь я могу не сидеть рядом и браковать дизайны, не выходя из дома.

Вложенные группы и фреймы
Теперь я понимаю почему уходили мои дизайнеры. Я заставлял их из BMW пересаживаться на SsungYong.

Стили
Если вы когда-либо пытались запомнить / поменять / настроить цветовые палитры в pptx, вы знаете какая это боль. Я, например, очень быстро нахожу в любом раскрученном софте ветку, которую оставили на откуп каким-нибудь племянникам основателей. Настройку палитры в PowerPoint-е явно поручена безмозглому мажору, не вылезающему из подпольных клубов.

Скорость
То, как «зум-инится» Фигма простым щепком по тачпаду, подвластно сегодня разве что KeyNote. Знаете что я называю «эффектом Фигмы»? Привыкнув к её удобствам, ты возвращаешься в любой «традиционный» тул, привычно раздвигаешь пальцы на тачпаде, чтобы быстренько приблизить какую-нибудь крохотную иконку. И компьютер зависает на мучительные 2-3 секунды.

Шорткаты
У меня в кабинете на стене висят распечатки горячих клавиш всех основных пакетов, с которыми я работаю: Evernote, Google Docs, Scrivener, Bear, Screenflow, Tilda. Но поскольку я там, на рабочем месте, почти не бываю, нифига эти шорткаты не запоминаются. По ним же нужен поиск. Можно (и я это сделал!) закачать пожухшие от солнца страницы в Evernote и там уже по ним будет поиск. Но в Фигме всё иначе! Подсказки по горячим клавишам отделены от общего хелпа и очень хорошо рубрицированы между собой.
Знаете, когда я дизайню на MacBook Pro, дочка стоит рядом и зависает. Это непередаваемое ощущение. Почти не двигая пальцами, создавать дизайн. Мммммм!

И это… вы думаете у Figma нету минусов? Конечно есть! Пока что больше всего напрягает то, что изобилие халявных psd-шаблонов пролетает мимо нас. Ибо конкуренция с конкурентами допускает в глазах Фигмы совместимость по файлам только с пакетом Sketch.
А конкурентов-то у Фигмы много:
Sketch
Adobe XD
ProtoPie
Mockplus
InVision Studio
Framer
Lunacy
Gravit.

Как использовать Figma для создания качественных презентаций

Перевод статьи Патрика Моргана, где он делится опытом создания презентаций в Figma. Он рассказывает, как правильно организовывать презентации в Figma-файлах, выстраивать структуру страниц, оформлять основные слайды, называть фреймы, анимировать их и в каком порядке размещать их на холсте

Дарья Райт
Ведущий редактор в «Оди»

Далее текст от лица автора

Простые рекомендации по использованию Figma для демонстрации ваших сильных сторон в качестве визуального рассказчика.

Я много думал о презентациях и о том, насколько они важны для дизайнеров. Когда вы начинаете заниматься дизайном, никто не говорит вам о том, что в конечном счёте большая часть вашей работы будет связана с выступлениями, защитой хорошего дизайна и попытками объединить людей других специальностей. Но по мере продвижения по карьерной лестнице это будет приобретать всё большую актуальность, и презентации станут важной частью вашей работы.

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

У нас в JupiterOne есть официальные шаблоны для презентаций в Google Slides, которые разработала наша команда бренд-дизайнеров. Однако, когда у меня есть возможность, я предпочитаю использовать Figma. С её помощью я могу не только добавить презентации визуальной выразительности, но и чётко увидеть структуру моего сообщения.

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

Одна презентация = один файл

Первое: организация на уровне аккаунта.

Я веду отдельный «Project» в Figma специально для презентаций, чтобы мне было легко их находить и я не путал их с другими дизайн-проектами, ориентированными на продукт. Я также установил ограничение, согласно которому в одном файле находится одна презентация. Я понял, что мне трудно находить старые презентации, если я прячу их на нескольких страницах в одном файле. Разделение на уровне файлов решает эту проблему.

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

Структура страниц файла

Как правило, в файле с презентацией я создаю три страницы.

На верхней странице находится сама презентация, чтобы при открытии файла она загружалась по умолчанию. Мне так удобно. Но что более важно, я заметил, что другие часто не смотрят дальше первой страницы, когда я даю ссылку на файл. Поэтому сохранение основной презентации в этом месте позволяет избежать путаницы. На второй странице я храню дополнительные слайды, к которым я, возможно, захочу вернуться. Часто это полноценные идеи, которые просто не попали в окончательный вариант.

Наконец, на третьей странице лежат «архивные» идеи, к которым я, скорее всего, не вернусь. Сюда входят случайные исследования, концепции, которые не сработали, и другое… Я никогда не удаляю идеи, но я определенно архивирую их, чтобы они мне не мешали!

Варианты слайдов

У меня есть три основных варианта слайдов: заголовок раздела, заголовок подраздела и стандартный слайд.

Они все оформлены по-разному, чтобы я мог визуально их различать, когда перехожу к новой тематической области презентации. Для слайдов с заголовками разделов я использую насыщенный, тёмный цвет фона — JupiterOne Navy, для слайдов с заголовками подразделов — светло-зелёный JupiterOne Green, а для стандартных слайдов — простой матовый белый цвет.

Я держу компонентную версию этих слайдов в своей библиотеке Figma Helpers, но использую компонент только как основу для быстрого начала работы. Я сразу же отсоединяю его в любом файле презентации, потому что хочу поместить содержимое непосредственно в эти фреймы и не возиться с оформлением экземпляров компонента.

Структура фреймов

При организации фреймов презентации располагайте их строго слева направо, затем сверху вниз.

Это крайне важно! Следуйте этой схеме, чтобы режим презентации Figma автоматически циклично показывал фреймы на странице в правильном порядке.

Я начинаю со слайда с названием раздела, прохожу по всему ряду, рассказывая историю этого раздела. Затем я перехожу к новому ряду, чтобы начать презентацию следующего раздела. В случае длинных разделов я обычно выделяю дополнительные строки, сгруппированные в рамках одной темы.

Слайды с заголовками подразделов пригодятся, когда мне нужно более формально разделить длинный раздел. Я не всегда применяю их, но когда мне кажется, что это поможет чётко выделить тематическую область при повествовании, я прибегаю к их использованию.

Следование принципу «слева-направо, сверху-вниз» и возможность визуально видеть сюжетную линию в виде отдельных рядов и всю презентацию в целом — важный момент.

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

Что ещё более интересно, что эта структура соответствует методам, которые мы использовали для создания презентаций в Leo Burnett. Они продавали многомиллионные рекламные кампании. Разница была лишь в том, что тогда, чтобы получить такой формат презентации, нам приходилось делать слайды в Keynote, распечатывать их и вешать на стену.

Названия фреймов

Я не даю слайдам описательных названий. Я считаю, что это пустая трата времени.

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

Поэтому вместо того, чтобы вручную переименовывать фреймы, я автоматизирую этот процесс с помощью замечательного плагина Super Tidy от Исмаэля Гонсалеса.

Пользоваться этим плагином очень просто: сначала вы выбираете все фреймы, которые хотите изменить, затем выбираете действие «Переименовать». Super Tidy переименует выбранные фреймы в порядке их расположения на холсте. В том же порядке, в котором Figma будет просматривать их в режиме презентации.

Первый ряд начинается с 000 и идёт слева направо, увеличиваясь на 1 (так 001, 002 и т.д.). Затем каждый последующий ряд ниже первого увеличивает первую цифру (000, 100, 200 и т.д…).

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

Super Tidy также может «привести в порядок» ваши фреймы — отрегулировать расстояние между ними на холсте, что тоже может быть полезно.

Стили

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

Самый большой помощник при создании стиля, который я внедрил, — это тень блока. Её я использую для обводки множества изображений, которые включаю в свои презентации. Они соответствуют цветовой палитре JupiterOne и придают изображениям выразительности. Я считаю довольно трудоёмким устанавливать индивидуальные значения тени для блока в Figma. Поэтому мне показалось логичным создать пару общих стилей, чтобы применять их во всех презентациях.

Интерактивность

Если время позволяет, последнее, что я добавляю в презентацию, — анимация прототипа.

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

Лично я начинаю с того, что связываю вместе контейнерные фреймы всех слайдов с помощью базовой анимации «Smart Animate» и смотрю, что получится. Часто этого бывает достаточно, чтобы сгладить шероховатости. Иногда Smart Animate создает странные артефакты. В этом случае я меняю анимацию на другой тип (часто это простое растворение), и это, как правило, устраняет проблему.

В качестве последнего штриха, также полезно создать отдельные прототипы «Flows» для каждого основного раздела презентации в качестве ещё одного способа укрепления структуры. Это не добавит пользы, но будет приятным последним слоем в организации презентации.

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

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

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

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

Содержание скрыть

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

Режим демонстрации включается в правой верхней части экрана треугольной кнопкой «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, если требуется

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

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

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

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

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