черная пятница в Contented
скидки до 60% + 2 курса в подарок

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

Как сделать слайд презентации в Figma
21 июня, 2023
4 мин

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

Чтобы создать шаблон, на главном экране выберите Drafts → Значок + → New design file:

Создание шаблона в Figma, главный экран

После этого откроется пустое рабочее пространство:

Так выглядит пустое рабочее пространство в Figma

Для начала нужно нарисовать простой прямоугольник. На верхней панели инструментов выберите раздел Shape tools (Формы) → Rectangle (Прямоугольник):

Инструмент Прямоугольник (rectangle) находится в разделе Формы (shape tools)

Также для создания фрейма можно использовать горячие клавиши. У прямоугольника горячая клавиша — R (потому что это первая буква в слове Rectangle).

Сейчас для презентаций чаще всего используют соотношение сторон 16:9, то есть 1920 x 1080 пикселей. Фрейм точного размера вряд ли получится создать с помощью курсора, поэтому подогнать параметры можно в панели инструментов справа:

Для презентаций чаще всего используют соотношение сторон 16:9, то есть 1920 x 1080 пикселей

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

Подобрать цвета поможет Pinterest. Для годовых отчетов подойдет классическая рождественская палитра, из которой нужно выбрать два контрастных оттенка. Например, бежевый (#f2f2f0) и темно-зеленый (#4f764a).

Классическая рождественская палитра поможет в выборе цветовой гаммы

Источник

Цвета можно сочетать двумя способами: светлый фон с темным текстом или наоборот темный фон со светлыми буквами. Для заливки фона в Figma используйте инструмент Fill (Заполнить) на панели справа:

Для заливки фона в Figma используйте инструмент Fill (Заполнить) на панели справа

Дальше можно добавить заголовок и текст слайда с помощью инструмента Text:

С помощью инструмента Text в верхней  панели напишите заголовок и текст слайда

В настройках на панели справа можно выбрать шрифт из библиотеки Figma, задать размер и тип начертания (например, Light, Regular или Bold):

Настройка шрифта, размера и тип начертания в Figma

Для оформления слайдов подойдет:

  • Один шрифт в разных начертаниях (Bold и Regular).
  • Шрифтовая пара: один яркий, акцидентный шрифт для заголовков и более простой для основного текста.
  • Если вы хорошо разбираетесь в типографике, можно попробовать сочетание посложнее: первый шрифт для заголовка, второй шрифт для основного текста, третий шрифт для подписей и цитат.

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

Подгонка размера изображения с помощью курсора.

Заполнить пустоту можно с помощью простых прямоугольных элементов в тех же цветах из новогодней палитры (#df3341):

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

Самый простой способ оформить презентацию в новогоднем стиле — стилизовать ее под адвент-календарь. Кстати, простые формы и сетка — это один из трендов дизайна 2023 года. 

Главное — не перегружать слайд и правильно разместить элементы относительно друг друга. В этом поможет «правило внутреннего и внешнего». Оно означает, что внутренние интервалы всегда должны быть меньше внешних.

Например, интервал между строками внутри списка меньше, чем интервал от самого списка до заголовка:

Использование межстрочного интервала, чтобы не перегружать слайд в Figma

А интервал от заголовка до основного текста меньше, чем интервал от текстового блока до внешнего края слайда:

Отступ от край слайда до заголовка всегда должен быть больше, чем от заголовка до текста

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

Пример использования рамок для слайда в Фигма
Медиа Contented

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

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

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

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