Как сделать презентацию в фигме

Как создать уникальную презентацию с помощью 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

Много лет назад меня чертовски выбешивало хроническое нежелание дизайнеров моей компании изучать PowerPoint. Многие были авторитарно уволены за это. А новые не наняты. Потому что на вакансию «дизайнер с прямой обязанностью работать в PowerPoint» откликнулось всего лишь. 0 кандидатов.
И вот недавно я прошел обучение по программе «сначала помой тарелки, побегай официантом с месяцок, и только после этого подавайся в метрдотели». То есть, чтобы понять почему мы не растем на 95% в месяц, я решил изучить Figma и еще штук 15 дисциплин, навыков и сервисов. При чем, изучал я их прямо в бою, прямо на живых клиентах, работая на равных с остальными членами команды. Надо мной, собственником компании, даже появились менеджеры.
Зато теперь я могу подробно объяснить всем «за» и «против» того же PowerPoint и других инструментов разработки презентаций. И немаловажная деталь — эксперимент позволил мне освоить новую профессию, которая стопроцентно поднесет мне в старости стакан воды, «если чо»!

Плюсы / минусы PowerPoint

У PowerPoint есть масса «скрытых» возможностей. Его ведь никто толком-то и не знает. Для дизайнеров он — ниже их достоинства. Для клерков — … тоже ниже))
Вот давайте протестируем вас. Знаете ли вы, что PowerPoint может:
— Удалять фон с фотографий? Со скрипом и бубнами, но может.
— Встраивать шрифты в конкретную презентацию? На случай, если у того, кому вы эту презентацию отправили, не будет нужного шрифта.
— Организовывать такую трансформацию между слайдами, от которой захватывает дух? На минуточку, прототипирование 3d-эффектов для наших заказчиков мы делаем в PowerPoint.
Да много еще чего может старый-дбрый редактор презентаций от Micrisoft.
Да, он тормозит даже на MacBook Pro. Да, у него чудовищные баги в работе с цветовыми палитрами. Но причина его опалы в глазах дизайнеров немножечко в другом. Фотошоп, Figma, Sketch, InDesign… Они лежат в некой единой дизайнерской парадигме. Изучая какой-либо лайфхак, вы можете просмотреть ролик про Фотошоп и потом запросто применить полученные знания в Фигме. Но PowerPoint при этом стоит таким особняком, что… полученные о нем знания пригодятся… ну разве что в KeyNote и немножечко в Prezi.

Плюсы / минусы KeyNote

KeyNote работает весьма шустро. В нём можно делать всякие микро-видео и гифки. Анимации в нём — выше всяких похвал. Скоро накидаю тут примеры — всё это сделано в KeyNote.

Недостатки?
Его фукционал, конечно же, не так богат, как PowerPoint-овский. Раздражает то, что из KeyNote нельзя сохранить рисунок! Один клиент недавно пожаловался на то, что для него какой-то дизайнер-фрилансер сделал презентацию портфолио в «модном» KeyNote. И только после расплаты и благополучного исчезновения фрилансера выяснилось: всё, что попало в KeyNote, должно, по замыслу его создателей, оставаться в нём навечно!
Кстати, Google Docs и Google Slides обладают такой же выбешивающей фигнёй!

«Конечность» Google Docs

Когда я пишу пост в Гугл Доксе, вынужден к уже вставленным картинкам добавлять Dropbox-ссылки на те же самые картинки. Ведь когда контент-менеджер начнет готовить пост к публикации, ей понадобятся исходники картинок. Тыкнуть правой кнопкой мыши на картинку в Google Docs-файле и сделать Save As невозможно! Но! Даже тут мы нашли воркэраунд: картинку нужно сохранить в Google Keep. А уже оттуда она запросто сохраняется на диск. Согласен, слишком много знаний в нас вгружает Digital!

«Крутость» Google Slides

Когда клиенты, партнеры, друзья просят помочь с поиском инвестиций, я первым делом предлагаю им изучить Google Docs, Slides и Sheets в связке. Это нужно для того, чтобы при каждом изменении финансовой модели все основные цифры отражались бы в вашей презентации автоматически.
Более подробно об этом мы рассказываем на курсе «Веб-дизайн для предпринимателей», как ни странно))

Плюсы Figma

А что такое Figma?
Кто-то сказал, что Figma — это как Google Docs только для дизайна. И еще такое есть: Фигма — это коллаборативный, ограниченный Фотошоп.

История: один клиент прислал нам на переделку 100500 слайдов, которые были формально в pptx, но представляли собой по одному единому png на каждой странице. И всё. То есть, их откуда-то явно экспортировали. Откуда? Ответ был весьма раздраженным: «один мальчик так сделал».
Почему-то, на старости лет, я думал, что в бизнесе буду конкурировать с зубрами и мастодонтами. А получилось, что в 80% случаев конкурирую с «мальчиками» и «девочками». Ну не суть. Заказчику понадобилось заменить в презентации ни много ни мало, а фирменный стиль. «Сможете как-то это всё хакнуть и чтобы в итоге презентация была редактируемая?» — спросил заказчик.
Конечно сможем! Просто сядем и перерисуем всё с нуля. Но надежда на чудо еще тлела. «Спросите, — говорим, — у вашего фрилансера: в чем он это делал». Оказалось, что мальчик во-первых никуда не исчез, что само по себе почётно. А во-вторых, он прислал нам ссылку на проект в Фигме, где все эти слайды и были отрисованы.
Эта история окончательно привела меня в Figma. Помучившись с ней пару карантинных месяцев, я готов представить вашему вниманию перечень «За» то, чтобы презентации делать в Фигме:

Коллективная работа
Нет ничего круче онлайн-взаимодействия при разработке презентации. Казалось бы, Google Slides тоже это может… Ан нет… в купе с возможностями вести массу версий-веток на одном большом экране, Фигма вырывается далеко вперед. Ну и про «тупиковость» картинок Гугла тоже не забываем.
Знаете, есть такие дизайнеры (их 99%), к которым садишься рядом, формулируешь замечания. А они начинают тут же при тебе все исправлять. Получается оценочная диспропорция. Типа, его работа несколько дней — это размеренное творчество. А учёт моих замечаний — это раз-два и вот, на тебе, подавись. В общем, поскольку я истый стадный интроверт, мне нравится то, что теперь я могу не сидеть рядом и браковать дизайны, не выходя из дома.

Вложенные группы и фреймы
Теперь я понимаю почему уходили мои дизайнеры. Я заставлял их из 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».

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

Заключение

Итак, в этом видео вы узнали как делать предварительный просмотр проекта в фигме. Также, как демонстрировать вашу работу заказчику или любому человеку скопировав ссылку на проект.

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

КАК СДЕЛАТЬ ЗАЛИВКУ В ФИГМЕ

Чтобы сделать заливку объекта в Figma, необходимо выбрать этот объект на рабочей области. Затем в свойствах объекта на панели инструментов справа настроить параметры заливки: цвет, насыщенность, прозрачность. Также можно выбрать текстуру заполнения, используя те же параметры на панели инструментов.

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

Если требуется разделить объект на зоны с разными типами заливки, можно воспользоваться инструментом «Маска». Создайте маску на основе нужной формы на панели инструментов, затем поместите туда объект, который надо заполнить. Далее настройте заливку для объекта, находящегося внутри маски.

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

Заполнение объектов и текста является важной частью дизайна интерфейсов и макетов. Знание методов и приемов заливки в Figma позволит создавать более качественные и привлекательные дизайн-проекты.

РАЗБОР РАБОТ ПО ВЕБ ДИЗАЙНУ — КАК БЫСТРО УЛУЧШИТЬ ДИЗАЙН UI UX #РАЗБОРКИ В ПИЖАМЕ

НИКОГДА не делай так в фигме! Видео для новичков: как менять заливку и тексты в компонентах

6 урок по Figma — Инструмент Перо и работа с вектором [Figma уроки]

Абстрактные линии в Фигма ➰ #figmatutorial #обучениефигма #figmadesign #дизайнбаннера

Уроки Figma (Фигма) – №8: Заливка и градиент / Бесплатный курс по Фигме

FIGMA: Как сделать презентацию