Как создать мастер-шаблоны для презентаций в Figma

Если вы создаете стилизованную презентацию, но не хотите использовать заезженные шаблоны из PowerPoint, Google Slides или Canva, вы можете создавать свои собственные мастер-шаблоны на будущее. дизайны презентаций.

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

1. Как настроить документ Figma для презентаций

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

Откройте Новый файл дизайна, затем нажмите Без названия вверху, чтобы переименовать файл, например «Шаблон презентации». Слева нажмите Страница 1, то знак плюс чтобы добавить новую страницу. Переименуйте новую страницу в «Шаблон». Это позволит вам впоследствии хранить мастер-слайды отдельно от дизайнерских слайдов.

Чтобы создать рамку — название Figma для артборда или холста — используйте Инструмент «Рамка» (Ф), затем щелкните в любом месте, чтобы открыть фрейм. В настройках справа измените Вт и ЧАС атрибуты подходящего размера презентации; мы используем 1920 x 1080, что является стандартным размером экрана. Это будет ваш первый мастер-шаблон.

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

2. Разработка макетов презентаций

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

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

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

3. Создайте двухколоночный текстовый макет

Давайте начнем с разработки верхнего заголовка со слайдом основного текста в две колонки. Чтобы добавить заполнитель заголовка, используйте Текстовый инструмент (Т) и введите «Заполнитель заголовка». Размер текста по умолчанию в Figma довольно маленький, поэтому, набрав заполнитель, выделите его и используйте правые настройки, чтобы увеличить размер и выбрать шрифт —скачать шрифт при необходимости. Вы также можете установить кернинг и другие атрибуты.

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

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

Разместив текстовое поле, выберите подходящий шрифт и размер. Выберите текстовое поле и продублируйте его, удерживая Очасть (Мак) или Альт (Windows), перетаскивая поле. Это создает двухколоночный макет; однако вы можете использовать эту систему для разработки других типов макетов.

4. Добавьте цвет фона или изображение

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

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

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

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

5. Как создать стили текста в Figma

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

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

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

Аналогично работает с цветами. Выберите что-нибудь с нужным цветом, затем нажмите кнопку меню Figma и Быстрые действия. Введите «Выбрать все с одинаковой заливкой», и он выберет все одного цвета. Затем вы можете установить это как цветовой стиль под Наполнять меню таким же образом, как и при создании стиля текста. Это хорошо работает для цветов фона, просто выбрав рамку и выбрав свой цвет.

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

6. Создать компоненты

Чтобы иметь возможность использовать ваши шаблоны позже, они должны быть компонентами, поэтому они связаны. Чтобы превратить фрейм в компонент, выберите текущий фрейм и нажмите Команда + Вариант + К (Мак) или Ctrl + Альт + К (Виндовс).

Название фрейма изменится с синего на фиолетовый со значком ромба, чтобы показать, что теперь он является компонентом. Затем, чтобы продублировать кадр, нажмите Команда + Д (Мак) или Ctrl + Д (Windows) один раз и перетащите новый кадр справа от первого.

Отсоедините компонент дубликата от оригинала, щелкнув правой кнопкой мыши заголовок нового кадра и выбрав Отсоединить экземпляр. Переименуйте новый слайд, указав заголовок, соответствующий его макету. Добавьте новый дизайн на слайд, а затем сделайте его отдельным компонентом, щелкнув Команда + Вариант + К (Мак) или Ctrl + Альт + К (Виндовс). Этот процесс необходимо выполнять каждый раз, когда вы создаете новый слайд.

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

7. Как использовать мастер-слайды

Чтобы использовать слайды для будущих проектов, выберите Страница 1 в Страницы меню — с вашим шаблоном под собственным заголовком — и создайте новую рамку размером с презентацию. Затем слева нажмите Активы > Локальные компоненты где должны быть слайды вашего шаблона. Перетащите слайды шаблона на новую рамку и отцентрируйте ее. Отредактируйте заполнители для вашего контента.

Следуйте этому же процессу, пока ваша презентация не будет завершена.

Экономьте время, создавая собственные мастер-шаблоны в Figma

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

10 лучших функций Figma, которые должны использовать все дизайнеры

Читать далее

Об авторе