Есть миллион способов сделать презентацию, но Figma — недооцененный инструмент для этого. Функция прототипа в Figma позволяет использовать множество настраиваемых параметров перехода. Мало того, что ваши переходы удивят вашу аудиторию, вы также можете включить плагины для дополнительного шика и поддерживать интерес аудитории, заставляя вас чувствовать себя уверенно в своих навыках.
Мы собираемся показать вам, как сделать потрясающую презентацию с помощью Figma; просто следуйте этому руководству.
1. Настройте свою первую презентационную рамку
Открытым Фигма и нажмите Новый файл дизайна. Нажмите на Инструмент «Рамка» (Ф), чтобы нарисовать свою рамку или выбрать предустановленную рамку справа с помощью Презентация > Слайд 16:9. Вы можете создать мастер-шаблон экономить время.
Переименуйте фрейм, дважды щелкнув синий заголовок в левом верхнем углу. Установить цвет фона; хотя вы всегда можете изменить его позже, выделив все кадры и изменив цвет заливки.
2. Добавьте текст заголовка
Использовать Текстовый инструмент
(Т) и напишите свой заголовок. Используйте отдельные текстовые поля для отдельных строк, только одно или два слова в строке. Установите параметры текста в Текст меню справа. Figma использует шрифты Google, так что вы можете знать лучшие пары шрифтов Google.3. Добавить изображение
Вы можете использовать стоковое фото или сделайте свою собственную соответствующую фотографию. Чтобы добавить изображение, нарисуйте прямоугольник с помощью Инструмент «Прямоугольник» (р). Ваше изображение будет сидеть в этой форме.
Щелкните прямоугольник и перейдите к Наполнять и нажмите на цветной квадрат. Затем нажмите Solid > Image > Выбрать изображение. Найдите свое изображение и нажмите Открытым. Наведите курсор на изображение, чтобы увидеть 4 белых круга. Нажмите и перетащите один круг внутрь, чтобы скруглить углы изображения.
Расположите слои так, чтобы изображение было сзади, а текст — на верхнем слое. Вы можете перетаскивать слои на панели слоев или с помощью Смкр/Ктрл + [ отправить слой обратно или Смкр/Ктрл + ] чтобы вывести слой вперед.
4. Создайте первый переход
Первый переход откроет изображение и позволит тексту заголовка скользнуть в рамку. Сначала продублируйте первый кадр, выбрав его и нажав Смкр/Ктрл + Д дублировать его.
В левом кадре уменьшите масштаб изображения, уменьшив атрибуты высоты в ЧАС поле примерно до 150, оставляя горизонтальную щель изображения. Выровняйте его по центру, выбрав оба изображения в кадрах и нажав Овариант + V (Мак) или Альт + В (Виндовс).
Чтобы завершить переход изображения, выберите левое изображение. Затем измените непрозрачность до 0% в правом меню в поле рядом с пунктом «Пропустить» в разделе «Слой». Это сделает изображение невидимым перед переходом и открытием.
Щелкните первое текстовое поле и удерживайте Сдвиг. Начните перетаскивать, затем также удерживайте Пробел и продолжайте перетаскивать текст за пределы рамки. Как будто исчезает из кадра. Без добавления пробела этот переход не сработает, но если перед перетаскиванием зажать пробел, то он только переместит ваш кадр.
Повторите то же самое для второго или последующих текстовых полей, но перетащите их немного дальше влево, чтобы добавить разнообразия в переход. Не снимая выделения с текста, уменьшите непрозрачность слоя до 0% так же, как вы делали ранее для изображения.
Чтобы установить переход, перейдите к Прототип. Выберите левую рамку и нажмите кнопку синий круг который появляется в центре правой части кадра. Перетащите его, чтобы линия перешла ко второму кадру.
В раскрывающемся списке говорится Мгновенный, Выбрать Умная анимация. Затем измените поле с помощью секундомер до 1000 мс. Это установит переход на одну секунду с момента щелчка мыши. Остальные настройки должны быть установлены по умолчанию. Убедитесь, что вы не переименовываете заголовки кадров после установки перехода, иначе файлы не будут подключаться.
Нажмите на Играть в кнопку, чтобы проверить переход. Вернуться к Дизайн чтобы продолжить дизайн презентации.
5. Добавить больше слайдов
Чтобы перейти со слайда 1 на слайд 2, продублируйте самый правый слайд (Смкр/Ктрл + Д). В новом фрейме — слайде 2 — переместите текстовые поля за пределы фрейма, используя предыдущий прием (Сдвиг + Тяга тогда Пробел после того, как вы начали перетаскивать). Переместите одно текстовое поле влево, а другое вправо от фрейма. Установите непрозрачность на 0% для обоих.
Для изображения уменьшите масштаб и немного сместите его от центра, затем установите непрозрачность на 0%. Это фактически дает вам чистый холст для вашего второго слайда. Вы можете добавить содержимое поверх невидимых ресурсов с предыдущего слайда.
Добавьте большое изображение в центр кадра. Чтобы добавить украшения поверх изображения, используйте Плагин Figma для GIF или же скачать стикер GIF от Giphy и перетащите его поверх изображения. Выберите свое основное изображение и любые GIF-файлы и сгруппируйте их вместе (Смкр/Ктрл + грамм), это гарантирует правильную работу Smart Animate.
Выберите группу и скопируйте ее (Смкр/Ктрл + С). Затем вставьте его в рамку слайда 1 (Смкр/Ктрл + В). Уменьшите его и установите непрозрачность на 0%. Затем переместите этот слой на задний план (Смкр/Ктрл + [). Это обеспечивает плавный переход к следующему слайду.
Перейти к Прототип. Выберите слайд 2 и щелкните синий кружок, чтобы перетащить его на слайд 3. По умолчанию Figma в меню прототипа использует предыдущие настройки, поэтому все они должны быть установлены в соответствии с предыдущим переходом. Вернуться к Дизайн.
Продублируйте последний слайд (Смкр/Ктрл + Д). На этом слайде будет использоваться то же изображение, что и на предыдущем, но мы масштабируем его до одной стороны кадра. Переместите изображение влево от рамки, перетащив его, удерживая Сдвиг. Наведите указатель мыши на правый край изображения, пока не появятся противоположные стрелки, щелкните и перетащите правый край изображения влево, пока не будете удовлетворены.
Перейти к Прототип и соедините два кадра вместе. Затем вернитесь к Дизайн.
Добавьте заголовок и основной текст справа от масштабированного изображения и сгруппируйте их вместе. Скопируйте текстовую группу и вставьте ее на предыдущий слайд. Нажмите и перетащите текстовую группу справа от рамки, как раньше.
6. Добавить мокап
Создать макет; проверить наш руководство по созданию мокапов с помощью плагинов в Figma. Добавьте новую рамку, а затем вставьте в нее макет. Измените размер макета, чтобы он соответствовал рамке.
Скопируйте макет и вставьте его в предыдущий кадр. Измените его размер, чтобы он соответствовал части изображения, затем переместите его в конец слоев и установите непрозрачность на 0%. Соедините кадры в Прототип.
7. Добавить ярлыки
Продублируйте рамку макета. Добавьте заголовок и описание, чтобы объяснить части вашего макета. Сгруппируйте текст вместе и назовите его. Тогда ты можешь сделать индикатор из матового стекла для ваших маркеров и линий. Сгруппируйте одну линию с одним кругом. Выровняйте свой индикатор с тем, что он описывает, и добавьте свое описание рядом с ним. Соедините кадры в Прототип.
Дублируйте рамку и добавьте еще один маркер маркера с тем, что он описывает. Прототипируйте это снова. Дублируйте каждый кадр для каждого маркера, чтобы каждый маркер переходил отдельно.
8. Завершите презентацию
Дублируйте последний слайд. Напишите последнее слово или два и отцентрируйте его. Скопируйте текст и вставьте его на предыдущий слайд.
Уменьшите текст, удерживая К при масштабировании — это сохраняет форматирование текста при уменьшении его размера. Поместите текст где-нибудь в верхней части макета и отправьте слой на задний план под изображением. Установите непрозрачность на 0%. Вернитесь к последнему слайду.
Переместите все остальные объекты за пределы кадра, используя метод перетаскивания. Переход будет сдвигать все в стороны и вверх, когда текст перемещается сверху вниз и расширяется. Ссылка на слайды в Прототип.
9. Поделитесь своей презентацией Figma
Вы можете получить доступ к своей презентации в любом месте, где вы можете войти в свою учетную запись Figma или поделиться URL-адресом с другими, чтобы они могли смотреть из любого места. Чтобы представить окончательную презентацию с ее переходами, щелкните значок Играть в кнопку и присутствует в полноэкранном режиме.
Вы также можете сохранить кадры в формате PDF, хотя при этом вы потеряете анимированные переходы.
Повысьте уровень своих презентаций с Figma
Мало того, что эта презентация минималистична, что не будет ошеломлять вашу аудиторию, но переходы профессиональные и чистые. Не нужно быть экспертом в области UI/UX, чтобы использовать Figma так, чтобы это приносило пользу вашим презентациям, независимо от вашей должности. Выступайте уверенно, и вас завалят вопросами о том, как была сделана ваша презентация.
