Есть много способов начать презентацию, но Figma — недооцененное приложение. Функция прототипирования в Figma позволяет использовать множество настраиваемых параметров перехода. Вы не только поразите свою аудиторию переходами, которые вы предлагаете, вы также можете включить плагины, чтобы вызвать больше волнения и удержать аудиторию, чтобы вы чувствовали себя уверенно в своих навыках.
Figma — одно из самых известных и мощных современных приложений, которые используются для создания дизайнов и обмена ими с командой, где вы можете воспользоваться множеством возможностей, которые оно предоставляет для создания красивых презентаций. Проверять Лучшие альтернативы Google Slides для различных нужд.
Мы покажем вам, как начать отличную презентацию с Figma; Просто следуйте этому руководству.
1. Подготовьте первый кадр презентации
Открыть Figma и щелкните Новый файл проекта. Нажмите инструмент «Рамка» (F), чтобы нарисовать рамку, или выберите ранее созданную рамку справа с помощью Презентация -> Слайд 16:9. Вы можете создать мастер-форму, чтобы сэкономить время.
Переименуйте кадр, дважды щелкнув синий заголовок в левом верхнем углу. Затем вы можете установить цвет фона; Хотя вы всегда можете изменить его позже, выделив все кадры и изменив цвет заливки.
2. Добавьте текст заголовка
Используйте Text Tool (T) и введите свой адрес. Используйте отдельные текстовые поля для вставки отдельных строк, используя только одно или два слова в строке. Установите настройки текста в меню «Текст» справа. Figma использует Google Fonts, так что вам может быть интересно узнать Лучшие двоичные файлы Google Fonts.
3. Добавьте фото
Вы можете использовать сохраненную фотографию или сделать свою собственную соответствующую фотографию. Чтобы добавить изображение, нарисуйте прямоугольник Инструментом "Прямоугольник" (R). Ваша фотография будет добавлена в соответствии с этим форматом.
Нажмите на прямоугольник и перейдите к Заливке и нажмите на цветной квадрат. Затем нажмите Solid -> Image -> Выбрать изображение. Найдите свое фото и нажмите فتح. При наведении курсора на изображение откроются 4 белых круга. Нажмите и перетащите один круг внутрь, чтобы повернуть углы изображения.
Расположите слои так, чтобы изображение было сзади, а текст — на верхнем слое. Вы можете перетаскивать слои на панель «Слои» или с помощью Cmd/Ctrl+[ Чтобы отправить слой обратно или Cmd / Ctrl+] Чтобы отобразить слой впереди.
4. Создайте первый переход
Первый переход откроет изображение и позволит тексту заголовка скользнуть в рамку. Сначала продублируйте первый кадр, выделив его и нажав Cmd/Ctrl+D удвоить его.
В левом кадре уменьшите размер изображения, уменьшив атрибуты высоты в поле H примерно до 150, оставив горизонтальную щель для изображения. Выровняйте их по центру, выбрав оба изображения в кадрах и нажав Опция + В (Мак) или Альт + В (Виндовс).
Чтобы завершить переход изображения, выберите левое изображение. Затем измените непрозрачность на 0% в правом меню в поле рядом с пройти через в учебный класс. Это сделает изображение невидимым до того, как оно сдвинется и откроется.
Нажмите на первое текстовое поле и удерживайте нажатой клавишу . Shift. Начните перетаскивать, удерживая клавишу пробела, и продолжайте перетаскивать текст за пределы рамки. Кажется, что он исчезает, как только выходит за пределы кадра. Без пробела этот переход не будет работать, но если вы нажмете пробел перед перетаскиванием, он сдвинет только ваш кадр.
Повторите то же самое для второго или последующих текстовых полей, но слегка перетащите их влево, чтобы разнообразить переход. Не снимая выделения с текста, уменьшите непрозрачность слоя до 0% так же, как вы делали ранее для изображения.
Чтобы установить переход, перейдите к Прототип. Выберите левую рамку и щелкните синий кружок, который появляется в середине правой стороны рамки. Перетащите его, чтобы линия перешла ко второму кадру.
В раскрывающемся меню с надписью Мгновенный поиск выберите Умная анимация. Затем измените поле с таймером на 1000 миллисекунд. Это установит переход на одну секунду щелчка мыши. Остальные настройки должны быть установлены по умолчанию. Следите за тем, чтобы после установки перехода не переименовывались названия фреймов, иначе файлы не соединится.
Нажмите кнопку «Воспроизвести», чтобы проверить переход. См. раздел «Дизайн», чтобы продолжить разработку презентации.
5. Добавьте больше слайдов
Чтобы перейти от слайда 1 к слайду 2, продублируйте крайний правый слайд (Cmd/Ctrl + D). В новом окне — Слайд 2 — переместите текстовые поля за пределы рамки, используя предыдущий прием (Shift + перетаскивание Затем пробел после того, как вы начнете перетаскивать). Переместите одно из текстовых полей влево, а другое вправо от фрейма. Установите непрозрачность на 0% для обоих.
Для изображения уменьшите масштаб и немного сместите его от центра, затем установите непрозрачность на 0%. Это фактически дает вам чистый холст для второго слайда. Вы можете добавить контент поверх невидимых ресурсов с предыдущего слайда.
Добавьте большую фотографию в центр кадра. Чтобы добавить украшения поверх фотографии, используйте Плагин для Фигмы Для GIF или скачать Гиф стикер из Giphy и перетащите его поверх изображения. Выберите свое основное изображение и любые GIF-файлы и сгруппируйте их вместе (Cmd/Ctrl+G), это гарантирует, что интеллектуальная анимация будет работать правильно.
Выберите группу и скопируйте ее (Cmd / Ctrl + С). Затем приклейте его к рамке слайда 1 (Cmd/Ctrl + V). Уменьшите его размер и установите непрозрачность на 0%. Затем переместите этот слой на задний план (Cmd/Ctrl+[). Это обеспечивает плавный переход к следующему слайду.
Перейти к прототипу. Выберите слайд 2 и щелкните синий кружок, чтобы перетащить его на слайд 3. По умолчанию для Figma в меню «Прототип» используются предыдущие настройки, поэтому все они должны быть установлены в соответствии с предыдущим переходом. Вернитесь к дизайну.
Повторите последний слайд (Cmd/Ctrl+D). На этом слайде будет использоваться то же изображение, что и на предыдущем, но мы масштабируем его до одной стороны кадра. Переместите изображение влево от рамки, перетащив его, удерживая нажатой клавишу . Shift. Наведите указатель мыши на правый край изображения, пока не появятся противоположные стрелки, щелкните и перетащите правый край изображения влево, пока не будете удовлетворены.
Перейдите к прототипу и склейте два кадра вместе. Затем вернитесь к дизайну. Проверять Лучшие функции анимации, которые должны использовать все создатели.
Добавьте заголовок и основной текст справа от изображения с измененным размером и сгруппируйте их вместе. Скопируйте и вставьте группу текста на предыдущий слайд. Нажмите и перетащите текстовую группу справа от фрейма, как и раньше.
6. Добавьте макет формы
создать мокап; Смотрите наше руководство о Создание макетов Использование плагинов в Figma. Добавьте новую рамку, а затем вставьте в нее макет формы. Измените размер формы, чтобы она соответствовала рамке.
Скопируйте и вставьте шаблон в предыдущее окно. Измените его размер, чтобы он соответствовал части изображения, затем переместите его в конец слоев и установите непрозрачность на 0%. Вы можете связать кадры в прототипе.
7. Добавьте ярлыки
Дублируйте рамку формы. Добавьте заголовок и описание, чтобы объяснить части макета. Сгруппируйте текст вместе и дайте ему имя. Затем вы можете создать стеклянную указку для маркеров и линий. Выровняйте одну линию с одним кругом. Совместите указатель с тем, что он описывает, и добавьте описание рядом с ним. Вы можете связать кадры в прототипе.
Дублируйте кадр и добавьте еще один указатель с тем, что он описывает. Вам нужно снова подключить кадры к прототипу. Итерируйте каждый кадр для каждого растрового изображения, чтобы каждое растровое изображение перемещалось само по себе.
8. Завершите презентацию
Повторите для последнего слайда. Напишите одно или два последних слова и отцентрируйте их. Скопируйте и вставьте текст на предыдущий слайд.
Уменьшите размер текста, нажав K При изменении размера — сохраняет форматирование текста при его уменьшении. Поместите текст где-нибудь в верхней части формы и отправьте слой на задний план, под изображением. Установите непрозрачность на 0%. Вернитесь к последнему слайду.
Переместите все остальные объекты за пределы кадра, используя метод перетаскивания. При перемещении все будет перемещаться вбок и вверх, а текст будет перемещаться сверху вниз и расширяться. Вы должны связать слайды в прототипе.
9. Поделитесь своей презентацией
Вы можете получить доступ к своей презентации в любом месте, вы можете войти в свою учетную запись Figma или поделиться URL-адресом с другими, чтобы они могли смотреть из любого места. Чтобы представить окончательную презентацию с ее переходами, нажмите кнопку «Воспроизвести» и запустите презентацию в полноэкранном режиме.
Вы также можете сохранять кадры в виде файлов PDF, хотя при этом вы потеряете анимированные переходы. Проверять Лучшие приложения для асинхронных видео- или аудиоконференций.
Улучшите свои презентации с помощью Figma
Мало того, что эта презентация минимальна, что не смутит вашу аудиторию, но переходы профессиональные и чистые. Не нужно быть экспертом по UI/UX, чтобы использовать Figma так, чтобы это приносило пользу вашим презентациям, независимо от вашей должности. Представьте свою презентацию с уверенностью, и вы будете перегружены вопросами о том, как сделать вашу презентацию выдающейся. Теперь вы можете просмотреть Лучшие функции Prezi для создания презентаций с добавленной стоимостью.
