обзор самых востребованных
дизайн-профессий в 2024 году

Как сделать слайд презентации в Figma

Как сделать слайд презентации в Figma
23 января, 2024
5 мин

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

Создание пустого слайда

Чтобы начать работу в Figma, нужно создать файл нового проекта. Для этого на главном экране нужно кликнуть на кнопку Drafts в левой части экрана, а затем на голубую кнопку + Design file в правом верхнем углу.

создаем новый проект

Откроется пустой файл с рабочей областью.

пустой файл с рабочей областью Figma

В Figma весь дизайн создают с помощью фреймов. Чтобы добавить фрейм в рабочую область, нажмите клавишу F, и в правой части экрана появится список устройств и форматов. Для презентаций чаще всего используют соотношение сторон 16:9, так что лучше выбрать шаблон Presentation → Slide 16:9.

для создания презентации в Figma выбираем 16:9

В рабочей области появится фрейм — основа слайда.

фрейм, основа слайда презентации

Настройка модульной сетки

Чтобы слайд выглядел аккуратно, добавьте сетку. Для этого нужно кликнуть по фрейму курсором , чтобы выделить его, а затем нажать на иконку «+» в строке Layout Grid на правой панели. 

добавляем сетку на слайд

Появится сетка по умолчанию — Grid 10px, то есть сетка с отступами в 10 пикселей между линиями.

сетка на слайде презентации в Figma

Нажмите в блоке Layout Grid иконку ▦, и в открывшемся окне замените Grid на Colums, чтобы вместо сетки на слайде появились колонки.

для создания колонок выбираем grid
колонки на слайде

Настройте параметры колонок:

  • Count — 4
  • Margin — 40
  • Gutter — 0
настройка параметров колонок

Дальше снова нажмите на иконку «+» в строке Layout Grid. Появится сетка Grid по умолчанию, которую теперь нужно заменить на Rows. На слайде появятся горизонтальные строки.

добавление горизонтальных строк
горизонтальные строки на слайде

Для Rows настройте такие значения:

  • Count — 2
  • Margin — 40
  • Gutter — 0
сетка с правильными отступами в Figma

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

Добавление текста на слайд

Создайте заголовок. Для этого выберите инструмент Text, нажав на клавишу T, и напишите, о чём будет этот слайд. 

текст на слайде презентации

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

настройки шрифта

Выровняйте заголовок по верхней и левой линиям сетки.

выравнивание текста в Figma

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

Минимальный размер кегля для презентации — 24px. Если сделать меньше, на слайде ничего не получится прочитать.

настройка текста, размер кегля

Выровняйте абзацы текста по сетке и относительно друг друга.

выравнивание текста по нижнему и левому краям

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

единая система отступов

Добавление изображений на слайд

Сначала нарисуйте прямоугольник, для этого можно использовать инструмент Rectangle в верхней панели. Также для его выбора можно использовать горячую клавишу R. Создайте прямоугольник, например, с параметрами:

  • 920 рх по ширине;
  • 1000рх по высоте.

Выровняйте по сетке. Углы фрейма можно скруглить, например, на 32px.

добавляем прямоугольник на слайд

На верхней панели выберите инструмент Place image.

добавляем изображение на слайд

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

вставка изображения

Теперь можно скрыть сетку и добавить цвет фона. Помните о контрасте и читаемости. Темный текст должен быть на светлом фоне или наоборот — светлый текст на темном. Чтобы быстро менять цвет элементов или фона фрейма, выделите его и найдите в правой панели Selection colors.

скрытие сетки и добавление фона на слайд

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент