Top.Mail.Ru

Наш подход бустит продажи. Вы платите за результат!

Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Создать презентацию в Figma? – да, вот подробный гайд! Редакция «Текстерры»
Редакция «Текстерры»

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

Что умеет Figma

Фигма — это облачный сервис для создания дизайнерских макетов, что называется, «в натуральную величину». С его помощью можно нарисовать внешний вид веб-сайта таким, каким он будет на деле, а затем отдать верстальщику для «натяжки» на готовый продукт.

Стартовый экран Figma до входа в систему

Можно нарисовать интерфейс приложения, журнала — да чего угодно! При этом сервис позволяет создавать рабочие пространства, где могут работать одновременно несколько пользователей.

Все это бесплатно, но с оговоркой: вы можете создать только три файла проекта. Платные тарифы начинаются от 12 долларов в месяц ( но оплатить их сейчас в России крайне непросто) и содержат расширенные возможности, однако для нашей задачи — создание презентаций — все это и не нужно!

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

Вы можете:

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

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

Продвинем ваш бизнес
Подробнее

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

Перед началом важно понять, что Figma создает презентации только в PDF-формате. Если вы хотите автоматизировать показ (как это делается в PowerPoint), то придется воспользоваться другими/дополнительными инструментами.

Регистрируемся в системе, например, через Google-аккаунт. Сервис задает вопросы о новом пользователе, но на них можно не отвечать.

После регистрации доступен стартовый экран:

Figma сразу после регистрации нового пользователя

Есть два варианта файлов, которые можно создавать в Figma:

  1. обычные макеты;
  2. FigJam-файлы — схемы и диаграммы в популярных форматах.

Нас будет интересовать первый вариант.

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

Итак, жмем справа вверху кнопку «+ Desgin File» и попадаем… на пустой экран. Это рабочее пространство для создания макета:

Рабочее пространство для создания макета

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

По центру меню находится путь к файлу и его название. Пока что мы имеем файл в библиотеке «Черновики (Drafts)» без названия — Untitled. Название сразу же можно поменять, кликнув на него.

Справа в меню — личный кабинет пользователя, кнопка шеринга макета (о ней позже), презентации макета и масштабирования рабочего пространства.

В правой части экрана — меню редактирования. Когда вы выберете объект с макета, здесь появятся возможности для его настройки. Пока что здесь мы видим настройки самой рабочей страницы. Для нее можно задать цвет фона и общий стиль объектов.

Слева будут находиться слои, о них — в процессе работы.

1. Создаем фрейм для презентации в фигме

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

Добавляем фрейм в презентацию на Фигма

Нажав на кнопку, справа мы увидим возможные варианты размера будущего фрейма. Здесь есть и набор размеров для презентации. Давайте выберем 1920х1080.

 Созданный фрейм

Нажмем на «Slide 16:9» — фрейм добавится на рабочую страницу по центру.

Обратите внимание — слева появился слой фрейма, который по умолчанию называется «Slide 16:9», однако если кликнуть на название слева (как это сделано на скришоте), то можно ввести свое имя. Сделайте это, чтобы не путаться в слайдах и понимать, с чем имеете дело.

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

Очень удобно, что сервис автоматически сохраняет ваши изменения — не нужно постоянно делать это вручную.

Уже определились со стилем презентации? Тогда самое время добавить к фрейму Figma фон.

2. Создаем фон для презентации в Figma

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

Или если вы сами красиво рисуете, то можете закрасить фрейм одним цветом, а затем добавить блоки из кривых и изображений поверх него. Но есть способ проще!

Находим бесплатный сайт с фонами и ищем подходящий вариант, например, такой:

 Находим стильный фон на сайте с бесплатными изображениями

Выделяем фрейм, идем в главное меню и выбираем «File/Place Image»:

Добавляем изображение внутри фрейма

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

Поместите его в левый верхний угол фрейма и тяните вправо-вниз. Вы увидите, как изображение растягивается под нужный вам размер вставки:

Фон внутри фрейма

Чтобы сохранять пропорции, удерживайте во время растяжки клавишу Shift.

Растяните фон как можно сильнее, после чего выделите края, которые еще не совпадают с краем фрейма, и подтяните их отдельно. Figma имеет функцию Span, благодаря ей края объектов автоматически «слипаются» между собой, если вы их сблизите.

Например, мы подтянули и слепили правые края объектов, теперь можно выделить фон курсором и клавишами стрелок на клавиатуре переместить фон выше, чтобы совместить верхние края:

Подтягиваем верхний край фона к границе фрейма

Обратите внимание на инструменты в главном меню, некоторые из них нужны для взаимодействия с рабочим экраном Фигма.
Так, «Курсор» дает возможность выделять и передвигать объекты, начиная с фрейма. «Рука» — перемещает вас по экрану, не затрагивая сами объекты.

Чтобы увеличить или уменьшить масштаб, нажмите CTRL и крутите колесо мыши.

В итоге накладываем фон поверх фрейма любым подходящим образом, например так:

Фон поверх фрейма

В левом меню слоев мы переименовали картинку в «Фон», теперь ее можно выделять оттуда.

Сами размеры фона чуть больше чем у фрейма, чтобы яркие объекты по краям не мешали содержимому слайда. Как мы видим, лишнее из фрейма обрезается. Точно также будет и на выгрузке файла в PDF.

Хотите сделать фон менее ярким? Не нужны дополнительные фоторедакторы, идите в правое меню Figma:

Эффекты для фона в Figma

Здесь есть возможности по настройке как самого объекта (положение, пропорции), так и его заливки. Как пример: поставим заливке «Image» 80% прозрачности вместо 100 и добавим эффект «Blur» (размытие).

К заливке (Fill) можно добавить еще одну через иконку «+». Допустим, цельный цвет, который с прозрачностью картинки добавит ей сочности:

Двойная цветовая заливка изображения

Теперь нам нужно зафиксировать фон, чтобы случайно не выделить его кликом в процессе работы с объектами. Для этого жмем на слое картинки правой кнопкой, выбираем пункт «Lock/Unlock» и блокируем его:

После блокировки у слоя появляется иконка замка

Теперь, сколько бы мы ни кликали на слой в рабочем пространстве фрейма, он выделяться не будет, и не помешает нам создавать и редактировать объекты.

Снять блокировку можно, если кликнуть на слой в левом меню.

3. Ставим базовые объекты

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

Поэтому с них и начнем.

Как внести текстовые объекты

Для этого выберите в главном меню инструмент «Текст (Т)», наведите курсор на нужную часть фрейма, удерживайте клик и ведите мышкой вправо-вниз:

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

Фигма автоматически показывает отступы текстового блока от левого и верхнего края фрейма (это удобно для создателей сайтов) и размеры самого блока.

В любой момент отпустите клик и текстовый объект появится на слайде. Чтобы сохранить его, введите любой текст.

Текст в текстовом блоке

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

Самое сложное — увидеть поле выбора шрифта. В правом меню он находится под блоком Text и по умолчанию имеет подпись «Inter». Это — название системного шрифта Figma. Мы же для презентации выберем что-то поинтереснее.

Выбор шрифта для текста

Обратите внимание, что для смены шрифта лучше выделить текст внутри блока.

Другие нужные параметры это:

  • размер шрифта (12 по умолчанию);
  • выравнивание (нам лучше по центру);
  • заливка, иногда прозрачность (с последними пунктами мы уже работали в процессе создания фона).

Выше есть настройки выравнивания для самого текстового блока — зададим центральное. Плюс настроим надпись таким образом, чтобы она соответствовала назначению:

Настроенный текстовый блок в презентации на Figma

Разобраться в параметрах не сложно — пробуйте любые, в случае неудачи жмите «Отмену» через CTRL+Z.

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

Чтобы сделать это, установите загрузчик шрифтов Фигма под вашу ОС. После этого система подгрузит ваши локальные шрифты в рабочее пространство. Чтобы убедиться в этом, откройте главное меню → Help and account → Account settings → Fonts.

Если там написано «Local fonts are enabled», — ищите их в правом меню настроек текстового блока.

Как добавить логотип

Сделать это просто, т.к. мы уже проделывали это с картинкой для фона. Идем в главное меню, выбираем «Place Image» и находим на компьютере нужный файл для вставки:

Добавление на фрейм картинки в формате PNG

У логотипа прозрачный фон, а значит фон будет виден через него. Проблема только в том, что лого теряется на цветном фоне. Чтобы исправить это, выделим логотип с помощью инструмента тени:

Настройка тени для блока изображения

Добавьте эффект «Drop Shadow», иконка солнышка открывает настройки для него. Выставим координаты смещения Х и У, цвет и прозрачность.

Можно использовать не черную, а светлую тень, так у объекта появится свечение.

В настройке Layer есть возможность откорректировать цветовое наложение объекта на фон. Если выбрать что-то кроме «Pass through», можно добиться эффекта лучшего выделения лого на фоне.

Наконец, можно скопировать изображение одно поверх другого, закрасить нижнее одним цветом, затем применить на него эффект Blur (размытие) — и получим свечение вокруг всего логотипа.

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

Как добавить векторную фигуру

Инструмент «Ручка» позволяет рисовать абстрактные фигуры из кривых

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

Кастомная векторная фигура из точек

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

Но для начала скруглим пересечения:

Работа инструмента Bend Tool над вершинами фигуры

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

Скругленная фигура

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

Перемещаем фигуру под логотип в меню слоев

Закрасим фигуру, только не просто цветом, а с применением градиента и прозрачности.

Сначала снимите обводку (Stroke) с фигуры, по умолчанию она задается черным цветом. Для этого достаточно скрыть эффект в правом меню, нажав на «Глаз».

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

Заливка в «два цвета» выставляется автоматически, причем второй цвет — это полная прозрачность, что нам и нужно.

Остается выбрать более интересный вариант градиентной заливки — Radial вместо Linear по умолчанию. И вот результат:

Применяем радиальный градиент с прозрачностью для интересной заливки фигуры

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

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

Добавим еще несколько текстовых блоков, раскрывающих суть презентации. Чтобы не выставлять тексту каждый раз одинаковые настройки, в Figma для удобства можно копировать слой, а затем тут же вставлять его (CTRL+C / CTRL+V) на фрейм.

Чтобы блоки были выровнены между собой, перемещайте один из них с удержанием клавиши SHIFT:

Скопировали текстовый блок и передвинули копию влево при помощи SHIFT

Добавим еще текста — и первый слайд готов.

Создание последующих слайдов для презентации

Что дальше? Снова создавать фрейм, накладывать фон и объекты? Нет! Просто скопируем первый фрейм через левое меню слоев:

Выбираем слайд в левом меню

Нажимаем на фрейме в слоях правой кнопкой, выбираем Copy (можно нажать CTRL+C), а затем через CTRL+V тут же вставляем слайд.

Копируем весь фрейм с содержимым. Вверху уже можно увидеть вставленный Слайд 2.

У нас появляется второй слайд после первого. Причем Figma распознает цифры и автоматически проставляет их в названии.

Два слайда (фрейма) презентации на рабочем экране Figma

Какие возможности дает копирование фреймов:

  • Блокированный нами фон остается на слайде;
  • Текстовые элементы не нужно снова настраивать в плане шрифта, размера и цвета текста;
  • Есть логотипы и другие полезные картинки.

Все лишнее же мы со второго слайда удаляем и готовим его к размещению полезной информации:

Перераспределяем элементы на слайде

Мы удалили название презентации, а подпись к нему превратили в подпись к слайду, чтобы сохранить единый стиль.

Логотип уменьшили, переместили в правый верхний угол. Аврору под ним вращали с удержанием CTRL, чтобы она была вертикальной. Смотрится не очень, но для примера сойдет.

Один из блоков белого текста переместили в центр, второй удалили.

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

Чтобы лучше выделить основное на слайде, добавим базовую фигуру с прозрачностью:

Добавляем прямоугольник со скругленными углами и прозрачностью

Используем инструмент фигуры Rectangle (прямоугольник), вытягивая его в нужных пропорциях.

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

Иконка скругления в меню настроек позволяет задать скругление углов.

Используем белый цвет для заливки, но прозрачность выставляем на 25%. Метод заливки слоя, например, Soft Light.

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

Добавляем еще объекты на презентацию

Аналогичными способами, как мы уже делали, добавили:

  • Три фигуры Circle с обычной заливкой и тенью. В Figma можно брать цвет с любого объекта на экране, поэтому мы взяли оранжевый с логотипа, чтобы сохранить единую стилистику;
  • Поверх фигур — три цифры с эффектом Inner Shadow. При перемещении скопированных фигур сервис позволяет сохранять пропорции между всеми ними, что несомненно нам на руку;
  • Три текстовых блока, путем копирования. Так мы тоже сохраняем единую стилистику;
  • Картинку, просто скопировав ее с другого сайта (Копировать изображение в браузере / CTRL + V) и добавив Stroke (обводку) с градиентом.

Всё это было создано буквально за пять минут!

Стилистика слайда готова, значит остается лишь копировать его для создания следующего:

Скопировали слайд и строим диаграмму

Мы можем скопировать диаграмму из Excel, но если она простая, то можем нарисовать и средствами Figma. Добавили два объекта «Линия» с толщиной 3 и стрелками на конце. А копируя маленькие линии, пользуемся автоматическим средством отмера равных расстояний.

Потом создаем следующий слайд — и так далее:

Быстрое построение диаграммы для презентации в Фигма

Как экспортировать презентацию из Фигмы: сохранение и шеринг презентаций в Figma

Как мы видим, в Фигма можно создать простые визуализации для чего угодно, используя стандартные средства и фигуры.

Сохраняем то, что у нас получилось.

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

Когда все слайды готовы, сохраняем презентацию в PDF. Для этого идем в главное меню Фигма, выбираем File и Export frames to PDF:

Сохранение презентации в PDF-файл

Система автоматически распознает фреймы-слайды и конвертирует их в страницы будущего файла.

Выбираем место на диске для сохранения:

Созданный в Figma PDF-файл с презентацией

Как сделать совместный доступ

Мы уже упоминали возможности для совместного доступа к проектам Фигма. Давайте рассмотрим, как открыть такой доступ, на примере нашей презентации.

В главном меню выбираем «Back to files», после чего попадаем на стартовый экран.

Слева мы видим команды, к которым привязаны проекты Figma. Создадим для начала новую команду, куда будем включать наших коллег:

Создаем новую команду для совместной работы

В последующем диалоговом окне сначала задаем имя команды, затем — Email ее членов. Сотрудники должны быть зарегистрированы в Фигма под этими адресами.

Добавляем сотрудников в команду по Email

Выбираем бесплатный пакет на третьем шаге и готово — команда создана:

Создали новую команду разработки в Figma

Теперь нужно перенести макет презентации из черновиков в проекты команды.

Идем в черновики (Drafts) и просто перетягиваем макет в проекты:

Перенос проекта из черновиков в команду

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

Наконец, можно сделать шеринг, проще говоря поделиться презентацией в формате самой Figma. Для этого в рабочем окне нажмите кнопку «Share» и задайте разрешения:

Делимся ссылкой на макет презентации

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

Выводы: каковы плюсы Figma по созданию презентаций в PDF

  1. Удобное перемещение объектов относительно друг друга;
  2. Постоянное сохранение проекта;
  3. Возможность совместного редактирования;
  4. Огромные возможности по созданию визуализаций;
  5. Удобство восприятия и интерфейса – широкие возможности и ничего лишнего.

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

Читайте также:

7 самых полезных плагинов Figma на 2023 год

Figma – тоже всё! :( Но есть сервис на замену

Figma или Photoshop? – выбор объясняют веб-дизайнеры

Поделиться статьей:

Новое на сайте

19 июн 2024
52 537
Типографика в дизайне сайта: основные понятия

Вы удивитесь, но в блоге «Текстерры» еще не было статьи, полностью посвященной типографике. Исправляемся! Перед вами основные понятия и правила типографики от А до Я.

19 июн 2024
307
E-commerce в России – как продавцам завоевать доверие

Названы главные факторы, которые формируют доверие к онлайн-продавцам у покупателей.

19 июн 2024
316
Обучение лидерским навыкам: как создать кадровый резерв

Это не даст бизнесу просесть в случае ухода ключевого сотрудника.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.