Делаем презентацию в Figma

Презентация — это набор слайдов из текста и графики. Это удобный и наглядный метод транслирования информации. Пользуются ими все, от школьников до руководителей огромных корпораций. Давайте сегодня создадим несколько стильных презентаци. Перед стартом следует выбрать программу. Существует масса программ для создания слайд-шоу. Сегодня мы выбрали Figma. Это простой облачный сервис для быстрой разработки графики. После выполнения технического задания (ТЗ), главная проблема — это экспорт, поэтому в целях обучения вы так же получите ответ на вопрос как в фигме сохранить презентацию в pdf.

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

Сервис постоянно развивается и разработчики выпускают новые плагины, чтобы расширить возможности системы. Так недавно появился plugin, под назанием Pitchdeck Presentation Studio. 

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

После добавления графических элементов и текста в фреймы, приступаем к созданию презентации. Запускаем плагин Pitchdeck Presentation Studio. Откроется всплывающее окно с опциями. Слева размещены фреймы, которые присутствует в проекте, справа с помощью настроек можете сделать анимацию переходов. 

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

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

Второй вариант воспользоваться встроенными инструментами. Чек-лист как сделать в фигме презентацию: 

1. Создать несколько фреймов.
2. Разместить на них графические элементы.
3. Написать текст.
4. Добавить кнопки для перехода. 
5. Сделать кнопки кликабельными то есть, чтобы при нажатии кадры менялись. Для этого нужно перейти во вкладку Prototype и указать связь между кнопкой и следующим слайдом. Тут есть образец кликабельной карусели с картинками. Вы можете использовать это в качестве примера для создания будущей презентации.  

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

Существуют несколько правил по оформлению слайдов, чтобы они получились более презентабельным.

1. Используйте единый стиль для каждого слайда. Картинки должны соответствовать товару или компании, для которых происходит показ.

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

3. Делайте анимационные переходы — удержать внимание зрителя сложно. Если вы сделаете переход с анимацией, люди будут периодически посматривать на экран при смене кадров.

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

5. Анимация в кадрах — при некоторых обстоятельствах разумно использовать GIF или видео, так удастся передать важные моменты более подробно. Следует придерживаться умеренности, слишком большое нагромождение анимации утомит зрителя, и основной смысл презентации будет потерян. В Figma, есть возможность добавлять GIF файл, а в плагине Pitchdeck Presentation Studio, также доступна опция, которая позволяет встраивать видеоролик с youtube.

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

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

Из чего состоит презентация

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

1. Титульный лист – сюда включена вводная информация: наименование документа, логотип, название компании, имя и фамилия спикера.
2. О компании – опишите, чем занимается компания и в какой области оказываются услуги. 
3. Список услуг – перечислите все услуги организации. Здесь следует их выделить отдельным цветом, чтобы они были более заметны на остальном фоне. 
4. Этапы работы – пошагово опишите, что нужно сделать клиенту, чтобы воспользоваться предложением. 
5. Преимущество компании – сюда следует включать детали для каждой сферы бизнеса, желательно чтобы они отличались от предложений конкурентов, другими словами придумать УТП (уникальное торговое предложение). 
6. Готовые проекты – покажите уже завершенные варианты, из которых будет понятно, что у компании есть готовые отработанные схемы и сроки сдачи работы.
7. Индивидуальный поход – важно донести до слушателя, что компания занимается индивидуальной разработкой, это значит, пожелания будут учтены.
8. Ответы на вопросы – на этой странице разместите ответы на часто задаваемые вопросы. Выберите самые распространенные, которые раньше задавались клиентами за всю историю компании и разместите на них ответы. На слайде 3-4 ответа будет вполне достаточно. Также не забываем выделить время, чтобы ответить на новые вопросы.
9. Оффер для клиента – это то, что получит заказчик, если воспользуется предложением. Все зависит от подачи информации. Сделайте сильный оффер, если присутствуют сезонные скидки, то про них также напишите.
10. Контактная информация – на последнем слайде укажите контакты для связи. Это может быть телефон, почтовый ящик или мессенджер. Если офис расположен в городе, поместите карту с указанным маркером. Для этого в Фигме есть специальный плагин.

Существует “правило 10-20-30”.

• Не более 10 слайдов
• 20 минут выступления
• 30 – это  размер шрифта текста, чтобы слайд был доступен для чтения с любой точки зала.

Дополнительные плагины Figma, которые улучшат вашу презентацию

Дополнительные плагины Figma, которые улучшат вашу презентацию

1. Pitchdeck Presentation Studio – про этот plugin мы упоминали ранее, этот инструмент объединяет фреймы и позволяет сохранять их в отдельный файл.

2. Perspective Toolkit – поворачивайте любую картинку или объект под определенным углом. Доступно три ползунка поворота для X, Y, Z, что позволяет любому объекту придать объемный 3d вид. Также в окне присутствует предварительный просмотр, где ведя мышкой по области можно сделать произвольный поворот. 

Данный plugin работает следующим образом. Выберите картинку, над которой хотите сделать поворот, щелкните правой кнопкой мыши и в контекстном меню запустите Plugins->Perspective Tolkit. В сплывающем окне установите параметры и нажмите “Place Imge”, после чего создастся дубликат. Меняете параметры и подгоняете под макет. Пример ниже.

3. Beautiful Shadows – устанавливает тени. Доступно два варианта теней, как внутри объекта (Inner Shadow), так и снаружи (Outer Shadow). При активации плагина появляется область, где с помощью мышки можно настраивать направление тени. Большой круг, это источника света, который с помощью мышки направляет свет и создает тень.

Маленький кружочек позволяет настраивать силу тени, сделать ее едва видной или более четкой. Если использовать два плагина Perspective Toolkit и Beautiful Shadows, то можно выполнить слайд в таком стиле. 

4. Slides – при просмотре презентации внизу, как правило, присутствуют интерактивные стрелки, которые переключают слайды. Plugin Slides автоматически добавляет такие стрелки, тем самым избавляя пользователя от поиска в интернете дополнительных кнопок. Запускается plugin просто. Выбираете два фрейма и активируете Slides, как показано на следующей картинке. Если выбрать в меню Open UI, то в сплывающем окне станут доступны опции для настройки стилей кнопок. Второй вариант “Add control, number the frames”, делает все в автоматическом режиме без дополнительных настроек.

5. Desaturate – черно-белые фотографии всегда выглядят утонченно и элегантно. Если цель сделать презентацию в черно-белом стиле, то Desaturate, это то, что нужно. Он способен убрать цвет с любого фото. Выберите фото и активируйте плагин. С помощью Desaturate, можно добиться неплохих результатов.

6. TextNeon – неоновый свет всегда привлекает внимание. Задайте себе вопрос: как часто вы смотрите на неоновые вывески в вашем городе? В презентации то же самое, сделайте текст неоновым, и пользователи будут обращать на него внимание. Главное не переборщить. Не нужно все делать в неоновом стиле иначе получится Лас-Вегас и важная мысль презентации будет утеряна. Чтобы запустить плагин, выберите текстовое поле и активируйте TextNeon, потом нажмите “Glow”. Учтите, что палитра свечения будет подобрана в зависимости от шрифта. Если шрифт черного цвета, то и подсветка будет черной. Пример на картинке.

7. Filter – иногда просто необходимо добавить шум или размытие. Для этих целей существует Filter. Этот инструмент похож на фильтр из Фотошоп, т.е. умеет накладывать различные эффекты. Чтобы воспользоваться Filter от Figma, выберите объект, нажмите правой кнопкой мыши, откройте контекстное меню, активируйте плагин. Во всплывающем окне добавляйте новые фильтры и меняйте опции. Пример показан на картинке.

Если нужно добавить еще один эффект рядом с опцией “Effects”, есть плюс. Все эффекты добавляются в список. Их можно отредактировать. 

После завершения всех изменений нажмите “Apply” и “Save as New Image”.

8. Unsplash – содержит библиотеку фотографий, который позволяет моментально вставлять фото в примитивные формы. Выберите примитиву или группу шейпов правой кнопкой, откройте контекстное меню и запустите Unsplash. Фото разбиты на категории. Случайным образом можно заполнить все формы фото из разных разделов. Для чего это может быть полезно? Например, срочно требуется оформить презентацию, а искать картинки долго, сроки поджимают, нужно готовиться к выступлению, учить речь, писать текст и т.д. С помощью unsplash можно быстро решить проблему графического оформления и подобрать иллюстрацию под тему презентации. 

Ниже предоставлено оформление в стиле космоса.

9. Iconscout, Auto Icon, Flat-Icons, Iconly, Icons8 – плагины, куда помещено большое количество иконок. Здесь находятся изображения под любой стиль вашей презентации. Отлично будут сочетаться иконки с текстом. Пример на скриншоте ниже.

Icon Resizer – позволяет подгонять значки под конкретные размеры. Гораздо удобнее работать, если все иноки одинакового размера и имеют квадратную рамку. 

Использовать Icon Resizer можно только на Frame. Поэтому вначале следует поместить значок в frame, а потом сделать автоматическое масштабирование. Для этого выберите один или несколько фреймов.

10. Graphviz – plugin поддерживает сложные информационные графики, это отличное решение, если вам нужно создать ментальную карту, которая будет структурирована в форме дерева. 

Создать график можно в несколько кликов. Вызовите программу Graphviz, перед вами откроется код для редактирования. В коде присутствуют комментарии, которые помогут разобраться. “Open in playground” открывает доступ к редактору, где при внесении изменений визуально будет видно построение графика. 

Для того, чтобы увидеть следующий пример нажмите “Next Example”. Выбрав образец код, можно его скопировать, вернуться в фигму и вставить в окно программы Graphviz, а потом нажать “Create”.

Для чего нужны ментальные карты (mind map)? Если перечисленные в статье плагины рекомендуется использовать для оформления слайдов, то ментальные карты пригодятся, прежде всего, ведущему при составлении сценариев. Таким образом, mind map поможет визуализировать все идеи и создать связи между ними. В итоге наглядно будет видно, где не хватает аргументов, а в каком месте история пошла не в том направлении. После создание ментальной карты делать слайды будет гораздо проще.

Существует много разных программ для работы с презентациями, часть из них мы описали в этой статье ТОП-20 плагинов Figma. Пройдемся по ним еще раз и узнаем, как их применить при разработке презентации.  

• Blobs – создает круглые пятно с помощью которого можно украсить слайды.

• Image Palette – выделяет основные цвета в иллюстрации. Если воспользоваться еще Color Compass, то полученные цвета можно разбить на оттенки. Таким образом, удастся подобрать идеальную цветовую палитру для слайдов.  
• Создание градиентов – при разработке макета иногда требуется наложить градиенты, для этого подойдут три отличных плагина Webgradients, Mesh Gradient, uiGradients
• Charts (диаграмма) – зрители предпочитают видеть результат работы, поэтому желательно представить им доказательства успешности проекта в качестве графиков. 

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

Когда работа готова ее следует сохранить в pptx или pdf. В pptx через плагин Pithdeck Presentation Studio. В разделе “Select Presentation Export Format”, выбираем формат “экспорта” pptx. 

В pdf – откройте главное меню и выберите File -> Export frames to PDF. Пример на картинке.

10 советов как идеально выступить 

1. Задайте вопрос – этот вариант срабатывает почти всегда, все хотят получить ответ на волнующую их тему, особенно, если тема интересная и новая. Существуют четыре варианта вопроса “опыт, сопровождение, воображение и эмоции”. Ниже в таблице приведены примеры.  

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

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

4. Скажите, что делать дальше – плохая презентация заканчивается словами “на этом все”, хорошая дает четкую инструкцию, что делать дальше. Не обязательно заканчивать призывом к действию, можно пройтись по ключевым моментам еще раз или дать ссылки на дополнительные источники.

5. Подготовьтесь – дело касается не только презентации, но и страха публичного выступления, который присутствует в каждом, кто впервые выходит на сцену. Посмотрите курсы, обучающие уроки и узнайте “Как побороть страх публичного выступления?”.

6. Расскажите историю – многие выступления знаменитых личностей, содержат историю. В которой рассказывается о становление крупной компании.

7. Распределите время – презентация длиться 20-30 минут. Поэтому следует заранее подготовиться и организовать свое время, чтобы все успеть. Установите ограничения, например  1 слайд – 1 минута. Значит на 20 слайдов – 20 минут.

8. Составьте план – если четкий план отсутствует, то существует большая вероятность провала. Для Figma, есть программа Graphviz, про нее мы писали выше, она создает ментальную карту для сценариев.   

9. Общение с аудиторией – учтите, что у людей могут появиться дополнительные вопросы. Выделите время, чтобы на них ответить. Вы должны досконально разбираться в теме, чтобы дать правильные ответы.  Смотрите пункт 2.

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

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