Презентация в стиле Figma
Привет! Я — Андрей Горанов, продуктовый дизайнер в DocDoc (входит в группу Сбербанк). Сегодня рубрика �� Изи-бризи, в которой я расскажу, как можно быстро сделать презентацию, когда под рукой есть только Figma. Поехали!
При чем тут Figma?
Чуть более года назад мы всей дизайн-командой перешли со Sketch на Figma. Это было легко, и все быстро привыкли. В неё также переехала наша волшебная дизайн-система.
Теперь поддерживать и пользоваться дизайн-системой стало просто и удобно всем членам команды. Все стили, иллюстрации, шрифты и макеты собраны в одном месте и всегда под рукой. Скорость работы нашей команды значительно возросла.
Как мы делаем презентации
Презентации у нас любят, презентации — наше все. Когда нужно рассказать о новой фиче, представить свою идею или показать результаты проведенного редизайна, руководству без презентации не обойтись. Но как быть менеджеру, дизайнеру или маркетологу, когда времени на подготовку своего выступления буквально пару минут?
Знакомая ситуация, не правда ли?
Если презентация не касается продукта, то можно вполне обойтись стандартными программами (Powerpoint, Keynote и др.), но это скорее будет исключением для продуктовых компаний. Тут на помощь нам и пришла Figma с ее безграничными (почти) возможностями.
В ней есть возможность собрать прототип из экранов, каждый из которых будет являться слайдом, настроить анимацию при переходах между ними. Скопировать нужные фирменные стили или добавить несколько экранов с последним актуальным дизайном не составит труда и займет всего пару секунд.
Процесс создания экспресс-презентации значительно сокращается, и при должной сноровке занимает всего несколько минут.
На подобные операции в других программах ушло бы значительно больше времени.
Личный опыт
Обещал рассказать про свой личный опыт. В недавней статье Ваня Соловьёв рассказывал о системе грейдов дизайнеров в нашей компании. Как вы понимаете, под эти грейды попал и я.
Повышения хотелось, цель была намечена и в определенный день достигнута. Я выполнил все условия перехода на новый уровень и уже радовался повышению. Однако, блуждая в своих рабочих задачах совершенно забыл о необходимости подготовки презентации, в которой должен был представить свои заслуги.
И вот ситуация: до встречи с CPO менее 10 минут, презентации нет, легкое волнение. Почему легкое, спросите вы? Да потому что под рукой у меня была Figma, и я уже знал как быстро я сделаю свою презентацию!
Беру последние макеты, копирую часть экранов, создаю слайды, настраиваю переходы, добавляю немного текста. Остается еще целых 2 минуты на красивую обложку. Нахожу иллюстрацию того, что первое приходит в голову (в тот момент в голову мне пришла идея с ракетой) и пишу заголовок. Презентация готова, заслуги описаны, грейд повышен, Андрей доволен ��.
Итоги
После этого успешного опыта я больше не тратил на продуктовые презентации лишнее время и делал их постоянно в Figma. Со временем другие коллеги переняли этот опыт.
Как создать уникальную презентацию с помощью Figma
Есть много способов начать презентацию, но 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 для создания презентаций с добавленной стоимостью.
В какой программе делать презентацию? Сравниваем Figma, PowerPoint, KeyNote, Prezi и Google Slides
KeyNote работает весьма шустро. В нём можно делать всякие микро-видео и гифки. Анимации в нём — выше всяких похвал. Скоро накидаю тут примеры — всё это сделано в KeyNote.
Недостатки?
Его фукционал, конечно же, не так богат, как PowerPoint-овский. Раздражает то, что из KeyNote нельзя сохранить рисунок! Один клиент недавно пожаловался на то, что для него какой-то дизайнер-фрилансер сделал презентацию портфолио в «модном» KeyNote. И только после расплаты и благополучного исчезновения фрилансера выяснилось: всё, что попало в KeyNote, должно, по замыслу его создателей, оставаться в нём навечно!
Кстати, Google Docs и Google Slides обладают такой же выбешивающей фигнёй!
А что такое Figma?
Кто-то сказал, что Figma — это как Google Docs только для дизайна. И еще такое есть: Фигма — это коллаборативный, ограниченный Фотошоп.
История: один клиент прислал нам на переделку 100500 слайдов, которые были формально в pptx, но представляли собой по одному единому png на каждой странице. И всё. То есть, их откуда-то явно экспортировали. Откуда? Ответ был весьма раздраженным: «один мальчик так сделал».
Почему-то, на старости лет, я думал, что в бизнесе буду конкурировать с зубрами и мастодонтами. А получилось, что в 80% случаев конкурирую с «мальчиками» и «девочками». Ну не суть. Заказчику понадобилось заменить в презентации ни много ни мало, а фирменный стиль. «Сможете как-то это всё хакнуть и чтобы в итоге презентация была редактируемая?» — спросил заказчик.
Конечно сможем! Просто сядем и перерисуем всё с нуля. Но надежда на чудо еще тлела. «Спросите, — говорим, — у вашего фрилансера: в чем он это делал». Оказалось, что мальчик во-первых никуда не исчез, что само по себе почётно. А во-вторых, он прислал нам ссылку на проект в Фигме, где все эти слайды и были отрисованы.
Эта история окончательно привела меня в Figma. Помучившись с ней пару карантинных месяцев, я готов представить вашему вниманию перечень «За» то, чтобы презентации делать в Фигме:
Вложенные группы и фреймы
Теперь я понимаю почему уходили мои дизайнеры. Я заставлял их из BMW пересаживаться на SsungYong.
Стили
Если вы когда-либо пытались запомнить / поменять / настроить цветовые палитры в pptx, вы знаете какая это боль. Я, например, очень быстро нахожу в любом раскрученном софте ветку, которую оставили на откуп каким-нибудь племянникам основателей. Настройку палитры в PowerPoint-е явно поручена безмозглому мажору, не вылезающему из подпольных клубов.
Скорость
То, как «зум-инится» Фигма простым щепком по тачпаду, подвластно сегодня разве что KeyNote. Знаете что я называю «эффектом Фигмы»? Привыкнув к её удобствам, ты возвращаешься в любой «традиционный» тул, привычно раздвигаешь пальцы на тачпаде, чтобы быстренько приблизить какую-нибудь крохотную иконку. И компьютер зависает на мучительные 2-3 секунды.
Шорткаты
У меня в кабинете на стене висят распечатки горячих клавиш всех основных пакетов, с которыми я работаю: Evernote, Google Docs, Scrivener, Bear, Screenflow, Tilda. Но поскольку я там, на рабочем месте, почти не бываю, нифига эти шорткаты не запоминаются. По ним же нужен поиск. Можно (и я это сделал!) закачать пожухшие от солнца страницы в Evernote и там уже по ним будет поиск. Но в Фигме всё иначе! Подсказки по горячим клавишам отделены от общего хелпа и очень хорошо рубрицированы между собой.
Знаете, когда я дизайню на MacBook Pro, дочка стоит рядом и зависает. Это непередаваемое ощущение. Почти не двигая пальцами, создавать дизайн. Мммммм!
И это… вы думаете у Figma нету минусов? Конечно есть! Пока что больше всего напрягает то, что изобилие халявных psd-шаблонов пролетает мимо нас. Ибо конкуренция с конкурентами допускает в глазах Фигмы совместимость по файлам только с пакетом Sketch.
А конкурентов-то у Фигмы много:
Sketch
Adobe XD
ProtoPie
Mockplus
InVision Studio
Framer
Lunacy
Gravit.
Просмотр в фигме: режим презентации в Figma и ссылка на проект
В этом видео поговорим о том как делать предварительный просмотр в фигме. Разберемся с режимом презентации и как поделиться ссылкой на ваш проект с заказчиком или любым другим человеком.
Как отправить ссылку на проект в фигма
Чтобы поделиться ссылкой на ваш проект в фигме и отправить его вашему заказчику, коллеге или любому другому человеку нажмите на кнопку «Share» в верхнем правом углу. Затем на надпись «Copy link».
Если эту ссылку открыть в браузере, то можно будет увидеть, ваш курсор и что вы делаете в реальном времени.
Вы будете видеть аватарки тех, кто просматривает ваш проект сверху и справа. Если нажмёте на какую-то аватарку, то будете видеть курсор и действия этого человека.
Как это можно использовать? Например таким можно обсуждать с заказчиком проект и в реальном времени вносить правки.
Как изменить роль приглашенного человека в проекте в фигме?
Если вы пригласили какого-то человека или поделились с ним ссылкой на проект, то можно изменить его роль. Нажмите на синию кнопку «Share», сверху и справа. Затем напротив нужного человека из списка справа выберите одну из следующих ролей:
- Owner — владелец. Если хотите передать ему право на файл. Он может делать с ним что угодно, в том числе удалять.
- Can edit — человек сможет редактировать файл.
- Can view — может просматривать.
- Remove — удалить. Если хотите удалить человека из проекта.
Режим предварительного просмотра в фигме
Чтобы включить режим предварительного просмотра в фигме, нажмите на иконку «Present» сверху справа (она похожа на Play). У вас откроется новая вкладка, где вы сможете просматривать фреймы, которые есть в вашем проекте.
Если до этого в режиме прототипирования (Prototype) вы настроили связи между фреймами и элементами интерфейса, то можно просматривать проект, как интерактивный, кликабельный прототип.
Например при нажатии на кнопку можно сделать всплывающие окна (popup формы), перенаправлять человека к другому фрейму, сделать поля в контактных формах активными и т.д.
Другими словами можно создать ощущение реального просмотра сайта или мобильного приложения с возможностью кликать и взаимодействовать с разными элементами интерфейса.
Как поделиться ссылкой на прототип в фигме?
Если вы находитесь в режиме «Present», то можете поделиться ссылкой на ваш прототип. Для этого нажмите на правую верхнюю кнопку «Share prototype» и в появившемся окне нажмите на надпись «Copy link».
При открытии скопированной ссылки в браузере, можно просматривать прототип в режиме презентации.
Если нажать на иконку «Add comments» слева сверху , то можно оставить комментарии к вашему проекту. К примеру заказчику не понравился заголовок. Он может оставить комментарий и уведомление придёт к вам на почту. Также вы будете видеть комментарий в интерфейсе фигмы.
Внизу по центру можно переключаться между фреймами, с помощью стрелок слево и вправо.
Как в фигме (в режиме просмотра) изменить отображаемое устройство?
Если вы хотите изменить отображаемое устройство в режиме предварительного просмотра «Present», то выберите фрейм. Перейдите во вкладку «Prototype» и нажмите на кнопку «Show prototype settings».
Затем внизу надписи «Device» выберите подходящее устройство из списка. Для примера я выберу фрейм с мобильным приложением и из списка выберу «Iphone 11 pro max».
Если открою предварительный просмотр в фигме и перейду в режим презентации, то фрейм будет отображаться в мобильном устройстве.
Заключение
Итак, в этом видео вы узнали как делать предварительный просмотр проекта в фигме. Также, как демонстрировать вашу работу заказчику или любому человеку скопировав ссылку на проект.