Figma — инструмент для дизайна и прототипирования, но с его помощью можно создавать функциональные, выразительные и красивые презентации. В статье рассказываем, как это сделать, и делимся шаблонами, открытыми для использования.
Фрейм — это практически наша монтажная область, холст, который мы будем наполнять контентом. Чтобы создать фрейм, нажмите на третий значок в правом верхнем углу экрана или на клавишу F и растяните рамку — это и есть первый слайд.
Сразу задайте ему масштаб. Наиболее распространенный размер презентации — 16:9 или 1920x1080 px. Установите эти параметры в панели управления справа. Одним слайдом нам не обойтись, поэтому скопируйте фрейм любым из двух способов:
только для фигмы — зажмите Shift и Alt, затем нажмите левой кнопкой мыши на объект и перенесите в другое место.
Лайфхак: если сроки горят и времени собирать презентацию с нуля нет, возьмите за основу шаблоны Figma — это готовые презентации, в которых можно изменить текст и оформление как захочется. Много шаблонов собрано по хэштегу #powerpoint в сообществе фигмы — это почти как Хабр, только для дизайнеров. Там они публикуют свои плагины и готовые файлы, чтобы их могли использовать все представители диджитал-сферы.
Мы пишем гайд, поэтому делать слайды будем с нуля.
Фрейм создан — теперь нужно добавить в презентацию контент.
Первое, что увидят зрители в презентации, — заголовок и подзаголовок первого слайда. Добавить их можно двумя способами: нажать букву T (на клавиатуре, предназначенной для английской раскладки) либо на значок T в левом верхнем углу экрана, затем кликнуть мышкой на любое место на фрейме и ввести нужный текст.
Вот несколько правил оформления текста:
Все настройки можно менять на панели справа, предварительно кликнув правой кнопкой мыши на текст.
Чтобы подзаголовок и заголовок (и весь текст в дальнейшем) выровнялись по одной линии, настройте автоматические границы с помощью инструмента Auto layout. Откройте блок и установите размер полей.
Теперь нужно добавить в слайды фотографии и любую другую графику, если она у вас предусмотрена. Сделать это просто — перенести объект из папки на монтажную область Figma и добавить во фрейм. При работе с фото пригодятся горячие клавиши:
Для построения графиков можно использовать бесплатный плагин Charts — с его помощью легко визуализировать данные, строить дашборды и гистограммы. А если нужно перенести данные из Google Sheets, подойдет плагин Google Sheets Sync.
Плагины — дополнения, они расширяют стандартный функционал фигмы. Добавить их можно через раздел Community.
Канва презентации готова, далее приступаем к дизайну — для этого не нужно быть профи, есть много готовых инструментов, которые помогут с оформлением. Первый из них — Coolors.co. Сервис бесплатно сгенерирует палитру цветов — для этого нажмите пробел: на странице отобразятся 5 оттенков, сочетающихся между собой. Сайт подойдет как для вдохновения, так и непосредственно для работы — палитру можно копировать и добавить в фигму. Мы выбрали вот такой набор:
Можно копировать каждый цвет отдельно, но удобнее сделать скриншот и добавить его в проект презентации, чтобы палитра была под рукой. Далее перекрашиваем текст с помощью пипетки. Фон мы решили оставить белым.
Еще один популярный инструмент для креативного дизайна — плагин Blobs. Он генерирует объекты в форме клякс по заданным точкам и кривым. Похожий на него плагин Get Waves генерирует волны. Такие элементы отлично заполняют пустое пространство, не перегружая его.
Для первого слайда мы сделали три волны: две из них перекрасили в цвета из палитры, от третьей оставили только контур через инструмент Stroke на правой панели управления. А еще добавили фирменную 3D-иконку. И вот что у нас получилось:
Совет: Если нужны иконки для презентации, также воспользуйтесь плагинами. Подойдут Iconfy и Iconur. А чтобы добавить иллюстрации, можно скачать бесплатные библиотеки векторных изображений типа Product & Project Managers Illustrations или Noodle Illustration.
Вот что у нас получилось с волнами и кляксами — самые простые графические элементы заиграли по-новому:
Как видите, картинки мы разместили на слайдах последовательно, чтобы они появлялись не резко, а постепенно.
Итак, переходим к самому интересному и сложному — анимации!
Для начала давайте вместе создадим такой переход:
Чтобы настроить плавное появление иконки/текста/любого другого объекта:
➤ Создайте два одинаковых слайда — в нашем случае это первый слайд с заголовком. Скопировать его можно так: зажмите Shift+Alt+левая кнопка мыши и передвиньте фрейм мышкой в любое свободное пространство:
➤ Затем вернитесь к первому слайду и передвиньте объект за границы фрейма так, чтобы он остался внутри контейнера — удерживайте объект левой кнопкой мышки, одновременно зажмите пробел и передвиньте иконку за пределы фрейма:
➤ Соедините слайды с помощью функции Prototype. Убедитесь, что включена опция Smart animate — это необходимо для корректной анимации.
Первая анимация готова! Чтобы посмотреть ее, нажмите на значок Play в верхнем углу экрана или на Flow starting point на панели управления справа.
Идем дальше? Допустим, нам хочется, чтоб текст заголовка плавно уменьшался при переходе на следующий слайд. Для этого:
➤ Копируем заголовок и подзаголовок на следующий слайд. Не обращайте внимания на то, что пока это выглядит непрезентабельно:
➤ Уменьшаем текст и ставим видимость на 0%:
➤ Соединяем слайды с помощью функции Prototype и наслаждаемся результатом.
По такой инструкции можно сделать анимацию с любыми объектами — фотографиями, текстом, гифками, иконками. Конечный вид зависит только от вашей фантазии 🙂 А вот наша мини-презентация всего из нескольких слайдов:
Осталось только поделиться ей с коллегами. Доступ можно раздать с помощью функции Share:
Также презентацию из фигмы можно скачать, например, в формате PDF.
4. Используйте анимацию. Она поможет привлечь внимание зрителей и добавит динамики. Комбинируйте разные типы анимации: переходы между слайдами, переливы цветов, появление и исчезание объектов.
5. Проверьте грамматику и орфографию. В этом поможет плагин Spellchecker — он проверяет орфографию в выбранном фрагменте текста и выделяет ошибки.
6. Добавьте ссылки на другие материалы. Ссылка на исследования, страницу вашего сайта или блога поможет зрителям лучше понять содержание вашей презентации и подчеркнет экспертность.
7. Используйте графику. Диаграммы, графики и иконки упрощают восприятие и делают презентацию цепляющей.
8. Тестируйте презентацию перед публикацией. Отвлекитесь и посмотрите на презентацию спустя пару часов — возможно, свежим взглядом вы заметите недочеты, ошибки, несостыковки или просто белые пятна, которые стоит исправить.
9. Используйте шаблоны. Шаблоны — это удобно и эффективно. В них уже заложена анимация, продуманы дизайн и композиция — остается только добавить свой текст. Вот 5 шаблонов, которые можно использовать для презентаций на любую тему:
10. Не бойтесь экспериментировать! Иногда самые неожиданные идеи могут привести к успеху. Экспериментируйте со стилями и техниками дизайна, чтобы найти тот, который лучше всего передаст настроение вашей темы.
⌘⌘⌘
Как видите, верстка презентации в Figma — это совсем не сложно и даже увлекательно! Желаем успехов в покорении этого полезного и многофункционального инструмента.
Многие предприниматели жалуются на сложный и слишком изобильный документооборот: много документов приходится оформлять. Но при…
Чтобы легально пользоваться результатами чужого труда в своем бизнесе, нужно за это заплатить. И неважно,…
Франшизы предоставляют предпринимателям возможность использовать популярные бренды, эффективные бизнес-модели и поддержку со стороны материнской компании.…
Некоторые компании сосредотачивают в своих руках и производственные мощности, и права на то, что на…
У любой компании есть адрес, по которому она «прописана», то есть зарегистрирована в ЕГРЮЛ. Но…
Подросток может заниматься бизнесом, но с учетом важных условий, прописанных в законе. Разбираемся, как несовершеннолетнему…