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

Демонстрация прототипа заказчику в Figma без сохранения изображений

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

Таким образом вы избавляетесь от необходимости экспортировать проект в jpg или png и рассылать тяжелые изображения через почту или обменники.

Как включить режим демонстрации

Режим демонстрации включается в правой верхней части экрана треугольной кнопкой «Present».

Кнопка Present в интерфейсе Фигмы

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

Также в этом режиме можно просматривать и оставлять комментарии. Для этого нажмите на окно диалога в верхней левой части.

Как расшарить демонстрацию проекта

Чтобы получить ссылку для отправки клиенту:

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

Как изменить девайс в презентации

Девайс меняется в режиме редактора в правом тулбаре в разделе Prototype.

Как скрыть тулбар и футер

Чтобы просмотру прототипа не мешал интерфейс Фигмы, вы можете скрыть тулбар и футер с помощью горячих клавиш ⌘\ или ⌘. (ctrl\ или ctrl. для Windows) или через меню Option > Show Toolbar and Footer. Подробнее читайте здесь.

Как поменять цвета фона в прототипе

В рабочем файле в правом сайдбаре выберите вкладку Prototype, далее, если у вас не выбран фрейм, вы сразу увидите поле Background — меняйте его.

Если вы уже выбрали один из фреймов, нажмите кнопку Show prototype settings и уже в открывшихся настройках меняйте цвет Background.

Как заменить черный цвет фона на свой? Не создать еще один фрейм позади всего, а именно заменить черный цвет?

Чтобы заменить фоновый цвет в прототипе, надо перейти во вкладку Prototype справа и поменять цвет в Background (если у вас выбран фрейм, сначала нажмите на Show prototype Settings

Просмотр в фигме: режим презентации в Figma и ссылка на проект

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

Как отправить ссылку на проект в фигма

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

Если эту ссылку открыть в браузере, то можно будет увидеть, ваш курсор и что вы делаете в реальном времени.

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

Как это можно использовать? Например таким можно обсуждать с заказчиком проект и в реальном времени вносить правки.

Как изменить роль приглашенного человека в проекте в фигме?

Если вы пригласили какого-то человека или поделились с ним ссылкой на проект, то можно изменить его роль. Нажмите на синию кнопку «Share», сверху и справа. Затем напротив нужного человека из списка справа выберите одну из следующих ролей:

Режим предварительного просмотра в фигме

Чтобы включить режим предварительного просмотра в фигме, нажмите на иконку «Present» сверху справа (она похожа на Play). У вас откроется новая вкладка, где вы сможете просматривать фреймы, которые есть в вашем проекте.

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

Например при нажатии на кнопку можно сделать всплывающие окна (popup формы), перенаправлять человека к другому фрейму, сделать поля в контактных формах активными и т.д.

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

Как поделиться ссылкой на прототип в фигме?

Если вы находитесь в режиме «Present», то можете поделиться ссылкой на ваш прототип. Для этого нажмите на правую верхнюю кнопку «Share prototype» и в появившемся окне нажмите на надпись «Copy link».

При открытии скопированной ссылки в браузере, можно просматривать прототип в режиме презентации.

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

Как в фигме (в режиме просмотра) изменить отображаемое устройство?

Если вы хотите изменить отображаемое устройство в режиме предварительного просмотра «Present», то выберите фрейм. Перейдите во вкладку «Prototype» и нажмите на кнопку «Show prototype settings».

Затем внизу надписи «Device» выберите подходящее устройство из списка. Для примера я выберу фрейм с мобильным приложением и из списка выберу «Iphone 11 pro max».

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

Заключение

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

Как сделать пост (презентацию, обложку, что угодно) в Figma, не зная Figma

Из-за блокировки Canva для российских пользователей за последние несколько дней мои знакомые из сферы маркетинга (и не только) не один раз задавали мне вопрос: «Не знаешь простого сервиса, чтобы быстро оформить пост, карточки для Телеграм, кейсы и т.д.».

Я никогда не пользовалась Канвой, не знаю никаких подобных сервисов, поэтому отправляю всех в Figma. Для меня это самый удобный инструмент.

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

Но проблема в том, что все очень занятые. Посмотреть любую обучалку по Фигме около 45 минут и потыкать нет времени. Да и, будем честны, многим просто лень разбираться с новым инструментом.

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

Делайте все по инструкции, и будут вам карточки / шаблоны / обложки / слайды — крч, что хотите.

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

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

РАБОТА С ТЕКСТОВЫМ СЛОЕМ

РАБОТА С ПЛАШКОЙ (ГЕОМЕТРИЧЕСКОЙ ФИГУРОЙ)

Фигма сама подсказывает, как правильно расположить элементы (где середина, когда элементы стоят на одном уровне). Можете облегчить себе задачу, добавив направляющие, на которые будете ориентироваться.

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

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

Слева вы увидите панель слоев. Там отображаются все элементы, с которыми вы работаете.

Новичку в Фигме достаточно знать следующее:

1. Включаем инструмент Frame с помощью горячей клавиши F или, кликнув, по значку с клеткой в левом верхнем углу. Сбоку видим уже заранее созданные фреймы (рабочие области) популярных разрешений. Выберем для примера Social media — I******** Post.

2. Программа автоматически нарисует карточку 1080 х 1080 px. Но эти размеры можете подправить, как угодно, потянув за края фрейма, или с помощью ввода конкретных обозначений ширины и высоты в поля W и H на панели справа.

3. Еще у карточки можно поменять цвет. Для этого нужно нажать в разделе Fill в панели справа на слой с цветом и выбрать нужный из палитры.

4. Теперь добавим текст. Для этого выбираем инструмент Text с помощью горячей клавиши T или кнопки с иконкой T в верхней панели. Далее кликаем на экране и пишем текст или вставляем заранее скопированный текст из буфера обмена.

5. С текстом можно делать все, что угодно: менять размер, шрифт, цвет, начертание (жирность, курсив и т.д.), выравнивание, длину и высоту текстового слоя. Все инструменты для этого в панели справа (см. скриншот по работе с текстовым слоем).

Можете разбить свой текст на несколько текстовых слоев и размещать их, как вам нужно.

6. Переместите текстовый слой с помощью мышки куда угодно.

Презентация в стиле Figma

Привет! Я — Андрей Горанов, продуктовый дизайнер в DocDoc (входит в группу Сбербанк). Сегодня рубрика 🔮 Изи-бризи, в которой я расскажу, как можно быстро сделать презентацию, когда под рукой есть только Figma. Поехали!

При чем тут Figma?

Чуть более года назад мы всей дизайн-командой перешли со Sketch на Figma. Это было легко, и все быстро привыкли. В неё также переехала наша волшебная дизайн-система.

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

Как мы делаем презентации

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

Знакомая ситуация, не правда ли?

Если презентация не касается продукта, то можно вполне обойтись стандартными программами ( Powerpoint, Keynote и др.), но это скорее будет исключением для продуктовых компаний. Тут на помощь нам и пришла Figma с ее безграничными (почти) возможностями.

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

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

На подобные операции в других программах ушло бы значительно больше времени.

Личный опыт

Обещал рассказать про свой личный опыт. В недавней статье Ваня Соловьёв рассказывал о системе грейдов дизайнеров в нашей компании. Как вы понимаете, под эти грейды попал и я.

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

И вот ситуация: до встречи с CPO менее 10 минут, презентации нет, легкое волнение. Почему легкое, спросите вы? Да потому что под рукой у меня была Figma, и я уже знал как быстро я сделаю свою презентацию!

Беру последние макеты, копирую часть экранов, создаю слайды, настраиваю переходы, добавляю немного текста. Остается еще целых 2 минуты на красивую обложку. Нахожу иллюстрацию того, что первое приходит в голову (в тот момент в голову мне пришла идея с ракетой) и пишу заголовок. Презентация готова, заслуги описаны, грейд повышен, Андрей доволен 🤟.

Итоги

После этого успешного опыта я больше не тратил на продуктовые презентации лишнее время и делал их постоянно в Figma. Со временем другие коллеги переняли этот опыт.

А вы пробовали делать презентацию в Figma?

Шаг 1. Таблица в Google Sheets

Каждая строка — это единица смысла. В нашем примере — это найденная юзабилити-проблема какого-то интерфейса.

Описание каждой проблемы структурировано (за это мы и любим таблицы) — характеристики разложены по столбцам. Например:

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

Табличка пошарена на чтение для всего интернета — иначе Figma не доберется до файла и магия не случится.

Копируем ссылку на файлик (кнопка «Copy link» на картинке выше) и куда-нибудь сохраняем — она нам скоро понадобится.

Шаг 2. Шаблон в Figma

Готовим шаблон отчета или презентации. Один слайд / страница — одна строчка из таблицы. Например, так (пока выглядит страшненько):

Обратите внимание на названия слоев, на которые мы планируем заливать информацию из таблички: они начинаются с решетки (#), а дальше без пробела следует то же слово или словосочетание, которое мы написали в первой строчке Google Sheets.

Например, формулировка проблемы лежит в столбце с названием «title» — в Figma для нее подготовлен слой «#title»:

Важны именно названия слоев, а что написано в самом текстовом поле — неважно (см. «Здесь будет название проблемы»).

При этом статичные слои — те, содержание которых не будет меняться от слайда к слайду (у нас это «Критичность: »), могут называться как угодно.

Слой с картинкой — это прямоугольник, у которого указан тип заливки (Fill) как Image, плюс настроен режим расположения картинки в границах прямоугольника (Fill / Fit / Crop / Tail — в зависимости от особенностей скриншотов).

Рекомендую превратить шаблон в компонент, чтобы получить +100 к уровню магии: так мы сможем централизованно управлять расположением и свойствами слоев — передвинуть, если что-то где-то не поместилось, поменять шрифт или кегль, цвет, добавить обводку и так далее.

Копируем и вставляем компонент, и оборачиваем его во фрейм — это нужно для того, чтобы потом безболезненно экспортировать все слайды в одну PDF-ку (Figma включает в PDF только фреймы и игнорирует компоненты и их экземпляры, размещенные в корне).

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

Полезность Figma: называем первый фрейм «1», нажимаем не глядя комбинацию «Ctrl+C → Ctrl+V» несколько раз, и Figma автоматически аккуратно расставляет фреймы в ряд, с одинаковыми отступами и именами «2», «3» и так далее. Мелочь, но приятно.

Шаг 3. Магия (плагин Google Sheets Sync)

Устанавливаем плагин Google Sheets Sync (если ещё не):

Нажимаем правую кнопку мыши, выбираем в контекстном меню «Plugins → Google Sheets Sync»:

В открывшемся окошке вставляем припасенную ссылку на расшаренную таблицу Google Sheets:

Нажимаем кнопку «Fetch & Sync».

…
Вуаля! Заголовки, описания, критичность и картинки разложились по фреймам:

И на десерт — экспортируем слайды в PDF (File → Export frames to PDF) и отправляем файл заказчику:

Это самый простой вариант, «в лоб». При некоторой изобретательности можно решать более сложные задачки:

Больше информации, история обновлений плагина:

Pitch.com: первые впечатления от «Figma для презентаций»

Вчера я получил долгожданное приглашение потестировать многообещающий редактор презентаций Pitch. Если вкратце, то приятно удивлен, но обо всем по порядку.

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

Основатели: Christian Reber, Adam Renklint, Vanessa Stock, Charlette Prevot, Misha Karpenko, Eric Labod, Marvin Labod, Jan Martin

Управленцы: Christian Reber (CEO), Adam Renklint (CTO), Philipp Hartmann (COO), Thom Cummings (CMO), Vanessa Stock (VP People)

Дата основания: 5 января 2018 года

Всего сотрудников: 72

Среди инвесторов Eric Yuan (Zoom), Kevin Systrom и Mike Krieger (Instagram), Koen Bok (Framer), Andrew Wilkinson (MetaLab), Simon Willnauer (Elastic).

Мой обзорчик не претендует на объективность и экспертность. Я всего лишь делаю презентации для всяких там корпораций и брендов на протяжении последних 5 лет и делюсь своим опытом в телеграм-дневнике. Да и Pitch пока в самом начале пути. Однако, в отличие от большинства аналогов PowerPoint, уже сейчас в сервисе можно увидеть несколько перспективных фич. О них и поговорим.

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

В Pitch решают проблему так: вы заранее задаете цветовую тему, шрифты, стили текста (заголовок, подзаголовок и т.д) и то как они будут применяться к таблицам, диаграммам и фигурам.

В режиме создания презентаций заданный стиль менять нельзя. Например, Когда вы создаете текстовый блок, вы выбираете один из пяти стилей: Заглавие, заголовок, подзаголовок, обычный текст и мелкий текст. И это здорово. Создать визуальный бестиарий так практически невозможно.

Одна из самых бесючих частей создания качественной презентации – бесконечное выравнивание объектов между собой и относительно слайда. Пресловутая свобода верстки создает уйму трудностей недизайнерам.

В Pitch придумали весьма изящную функцию. Выделите объект 1, зажмите Cmd (Ctrl), потяните на объект 2. Если размеры объектов одинаковые, то вы легко поменяете их местами. Работает с картинками, фигурами и текстами.

Еще есть функция Tidy (опрятность, аккуратность). Выделяете несколько одинаковых по размеру объектов, нажимаете на кнопку Tidy (или на пробел) и все выстраивается в одну линию. К сожалению, только в горизонтальную или вертикальную. Расстояния задаются автоматически. Далеко не BrightSlide, но идея очень здравая.

Шаблоны хороши. Крепкий современный дизайн: актуальные шрифты (Google Fonts), модная верстка, трендовая графика. На мой взгляд, есть небольшой уклон в сторону питчей и презентаций идей. Когда я работал в BBDO, идеи презентовали примерно таким образом. Крупно пишется месседж, потом сценарий для ролика, потом мудборд, концепция, рендеры и т.д. На момент публикации доступно 24 шаблона.

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

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

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

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

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

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

Многое в Pitch делается в разы быстрее, в интерфейсе нет ничего лишнего, а пользователь настолько ограничен в форматировании, что создать презентацию не в стиле практически невозможно. Такова жизнь: либо ограничения, простота и удобство, либо свобода со всеми вытекающими.

Pitch – решение исключительно командное и нишевое. Если у вас есть нормальный дизайнер, а лучше дизайнер + иллюстратор, и ваша команда презентует идеи, стартап или несложные отчеты, то работа в Pitch может стать для вас откровением.

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

В целом, я был настроен скептически. Проведя в Pitch несколько часов я оттаял. Сервис сделан с любовью и профессионализмом. От фундаментальных принципов до мелких рутинных задач, всюду замечаешь продуманность и основательность.

P.S. Если чего упустил, спрашивайте в комментах, проверим.

Хорошую вещь фигмой не назовут

Я тоже вчера получил инвайт. Попользовался и. остался разочарован. На сколько всё выглядело красиво и идеально на лендинге, на столько же внутри всё получилось обычно и скучно.

Убери из интерфейса заготовки 3D-иллюстраций и шаблоны слайдов — останется пустота. Коллективная работа есть и в PowerPoint, и в Keynote. Интеграция с Unsplash — идея на поверхности, как по мне.

Мне как UI-дизайнеру интерфейс показался недостаточно плавным. Особенно расстроило отсутствие возможности создавать анимацию внутри слайда и между ними. «Волшебный сдвиг» в Keynote по-прежнему считаю одним из лучших, что сделали в этой теме.

Pitch — это не Figma для презентаций. В фигме при наличии рук и чувства стиля создавать неповторимые и крутые решения. Pitch — это Tilda для презентаций. Сервис не позволит сделать «очень плохо», но и «очень хорошо», боюсь, тоже не получится. (Тильду на zero-блоке не учитываем).

Вот только она там ужасная. У PP разные версию в вебе и на десктопе. У всего пакета iWork ужасно сделана совместная работа, только и думаешь, как бы чего не поломать друг другу.

Особенно расстроило отсутствие возможности создавать анимацию внутри слайда и между ними.

Возможно это вопрос конкретной области, но в моей жизни все презентации заканчиваются в виде PDF и и чаще на Docsend.

Интеграция с Unsplash — идея на поверхности, как по мне.

А какая разница, очевидная она или нет, если больше никто не сделал?

Pitch — это не Figma для презентаций.

Нет, это именно что Figma, причем ранняя, где PowerPoint был бы Illustrator.

Мне как UI-дизайнеру интерфейс показался недостаточно плавным.

На моей машине интерфейс чуть тормозит, да.

Ну и в продолжение слов автора статьи: «если у вас есть нормальный дизайнер, а лучше дизайнер + иллюстратор», возьмите лучше PowerPoint или Keynote. Хороший дизайнер всегда сделает конфетку, даже в громоздких и устаревших инструментах.

Есть один нюанс: как правило, дизайнеров люто бесит интерфейс PowerPoint.

Плюсую. Но Keynote рулит.

Ах да, когда в режиме презентации я увидел, что графика на слайдах подгружается с задержкой при смене слайда (типа как когда новую страницу открываешь), я решил закрыть Pitch до лучших времён. Прям представил, как инвесторы сидят и ждут, пока картинка до конца прогрузится 😄

Прикольно выглядит, но вроде почти все фичи уже есть в работающем сервсие Canva
https://www.canva.com/

Canva – это сервис для недизайнеров, для создания разнообразных макетов самому.
Pitch – это командная работа (включая дизайнера) по созданию только презентаций.

В канве есть и совместное редактирование, и ревью, и тонны шаблонов, и бесплатные стоковые картинки, графика, видео и музыка

Действительно, в июле начали раскатывать совместную работу в реальном времени. Но как-то я слабо представляю себе профессиональную работу в Канве. Есть вообще прецеденты?

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

As a startup that doesn’t have an in-house graphic designer, Canva has been an absolute lifesaver.
There’s no design skill required or costly program downloads that have to go through approvals. Results are instantaneous.
We have limited designers and are not trained designers ourselves
I’m not a graphic designer or an expert – I just stay at home and throw a bit of color together.
I don’t have a budget for graphics… I don’t have a budget for anything. So when I came across Canva, I thought it was awesome.

P.S. Из крупных там Yelp, Lonely Planet, мб Huffington Post. Ну так, относительно крупные.

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

В какой программе делать презентацию? Сравниваем 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: анимация

Рассказываем, как сделать красивые переходы в макете приложения для презентации клиенту.

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

Благодаря встроенным функциям Figma, вы можете сами собрать любую анимацию в своём макете и сразу показать идею, а не объяснять всё «на пальцах».

Рассказываем, как сделать анимацию для вашего приложения в Figma.

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

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с анимацией, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Режимы анимации

В Figma есть набор стандартных переходов, которые в прототипе помогают плавно менять один экран на другой. Всего их девять, но пользоваться вы будете, скорее всего, только пятью из них:

1. Instant — анимации нет вообще, экраны сменяют друг друга моментально.

2. Linear — линейная, вся анимация протекает с одной скоростью:

3. Ease-in — анимация медленно начинается, к концу ускоряется:

4. Ease-out — анимация начинается быстро, к концу замедляется:

5. Ease-in-out — старт и конец анимации замедлены:

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

Умная анимация

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

Общий принцип создания анимации: первый макет — начальная точка, а второй — конечная. Между ними Figma сама достраивает промежуточные кадры.

Для примера, попробуйте заставить один модуль исчезнуть, а остальные — подтянуться на его место:

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

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

Теперь попробуйте сделать анимацию удаления через свайп:

Теперь попробуйте сделать анимированное всплывающее окно:

Как вы уже заметили, при создании разных анимаций их суть остаётся прежней: первый макет — начальная точка, а второй — конечная. Точно так же создаются и любые другие: от анимаций кнопок до экранов загрузки. А лучший способ всё это изучить — пробовать собирать что-то самостоятельно.

Для тренировки советуем попробовать сделать следующие анимации:

How to export presentations from Figma to PowerPoint using Pitchdeck

Follow along with our complete step-by-step free Figma tutorial video walkthrough.

Figma plugin used in this video

Pitchdeck

Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.

Video Transcript

Today, I’m going to be showing you how to export your collaborative presentation slide designs from Figma to PowerPoint; or to a PowerPoint file, I should say.

To do that, we need to install a Figma plugin called Pitchdeck. If you haven’t already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term «pitchdeck», you’ll see a result called «Pitchdeck Presentation Studio» pop-up. I’ve already got it installed and that’s why I’ve got this little check mark here and it says «installed», but if you don’t, this button on the right hand side will say «install», and if you click on that it’ll change to look like mine, and once it does you’ll be ready to go.

Now we can switch back into our Figma project today I’m just using Figma file that I designed as a slide deck for Dieter Rams «Ten principles for good design» to a deck with eleven designs, and essentially I want to take these slides out of Figma and I want to create a PowerPoint presentation that I can use in Microsoft PowerPoint.

To do that, we can run the Figma plugin we just installed. If you right-click anywhere and go to «plugins» and then go down to «Pitchdeck Presentation Studio» and click on that, that is just going to fire up the Figma plugin we just installed the, Pitchdeck Figma plugin; and once it loads, you’ll be able to see all of the frames from your Figma file. All of these frames on the left here will get translated into slides inside of the Pitchdeck Figma plugin; it’s currently looking through all the frames, looking through all the layers, the text layers, and image layers, and it’s constructing them into slides that we’ll be able to use in just a moment.

Now that it’s loaded all of our slides, you can see here that the slides have been mirrored to our designs. If we click through here, you can see we’ve got all of our slides as we would expect from our designs above. In the left hand side, you can see that we’ve got a list of all of our layers and those are being mirrored from the Figma layers in the Figma layers panel on the left here; you can see here we’ve got «intro», «principle one», «principle two», and that’s «intro», «principle one», principle two; but you’ll notice that the layer order has been exactly reversed, and the reason for that is (maybe this is just me), but when I’m designing things in Figma and when I was designing this collaborative presentation, I would design this slide for example, and when I was happy with that, I would copy/paste that slide or that frame, and Figma would put it right next to it and then I could just edit the content and keep the the layer pretty much as it is; but in Figma, when you paste, essentially the layers each layer on top of each other in a reverse order; whenever you paste something, the layer will be moved to the top of the layer’s order in the left-hand side here.

What Pitchdeck does is, it automatically reverses those layers by default and assumes that you’ve been copy pasting your frames; that means that the order is actually going from bottom to top in terms of this layer order here, and that’s why we’ve got the correct order that would expect here, however if that doesn’t suit you, what you can do is you can reorder these frames by clicking and dragging on the little «drag» icons next to any of the slides in the Pitchdeck Figma plugin. All I did there was just hover over the icon and then I’ll get a little grabbing icon, if I click that, holding the mouse, and then move it up or down I can rearrange these frames super easily and that does not impact anything that’s going on in the Figma file; this is just related to the plugin. Editing this layer order here won’t mess up your designs or change anything in the original design, it’ll just tell Pitchdeck that this is the order that you want these frames in; for now I’m just going to leave it as is, and keep the intro where it should be.

The other thing you’ll notice is this little preview section here; this is an exact one-for-one with our slides, and what it’s going to look like when it gets exported. The titles are up here; and the other thing to note is underneath the preview we’ve got this «speaker notes» section and this is just a text field, a text area and you can type in any content that you want there; you can put bullet points in there, you can put a little paragraph like this one, you can just put a little sentence, or just a note for yourself; and these are the notes that will not be shown to the audience and won’t be shown inside of the presentation content, these are just for you as a speaker or whoever is presenting this presentation; if you need to add them you can add different notes to every slide and those will be available to you once we export our collaborative presentation very shortly.

Now that I’m pretty happy with the speaker notes, I’m happy with the ordering, you’ll notice here that we’ve got these animations set on all of the layers; by default those set to «no animation»; you can see here we’ve got this «no animation» setting, those are all defaulted to no animation, but I’ve already applied some animations which get saved between opening the plugin; however for this particular Figma tutorial, because we’re going to be exporting to a PowerPoint file, these animations unfortunately don’t get brought across into PowerPoint. These are primarily used for if you’re uploading the presentation to the Pitchdeck URL; we can see here if we open up the export formats just in the top menu bar here by clicking on the select box we’ve got two groups we’ve got «animated» and underneath that is the Pitchdeck URL option, which we’ve got selected by default, and then we’ve got «static» format, we’ve got «PDF file», «PowerPoint file» and «Keynote file»; that means that because it’s static, all of these animation settings do not get carried over to any of these static formats, they’ll only be carried over to the Pitchdeck URL format.

That’s just worth keeping in mind in case you’re wondering why you’ve animated these things but you’re not getting animations in your PDF file, PowerPoint or Keynote; these are just not supported in those formats because we’re using very specific and custom animations that will only work in a web-based environment, like the Pitchdeck one.

If you do want to see how that works, I’ve got another Figma tutorial up on our YouTube channel, and you can get a really deep dive; it goes for about 30 minutes and goes through all of the details you need to know about animations and takes you through the upload process and shows you what a presentation actually looks like when you do that option, but for today we just want to go from Figma to PowerPoint.

In this case, I’m just going to open up that options panel go down to the «PowerPoint file» option and click on that, and when I select that you’ll see that it’s changed up here, and it’s also changed my button to say «Export PowerPoint»; because I’m ready to go and the design from Figma is looking really good, I want to get it out of Figma to PowerPoint; I’m just going to go ahead and click on «Export PowerPoint», and what this is going to do is it’s going to generate slides for a PowerPoint file; that’s a native PowerPoint file that’s going to come out of Figma in just a moment. It’s going to take all of our Figma designs and put them into a PowerPoint presentation.

You can see here it’s just prompted me to save a file; so I’m just going to save that to the desktop. By default it just names it whatever your Figma file Figma document is called, but you can obviously change that if you want to; I can just rename that and you can see here it’s just changed it for me to look like the way I want. I’m just going to click «Save», and as you can see here it’s just confirming that our PowerPoint file is ready and we’re able to open this in either PowerPoint and Google Slides or Apple Keynote, or just share it with somebody.

Now that that’s been saved I can open up finder and go to my desktop and you can see right here I’ve got my PowerPoint file which I can double click; I don’t have Microsoft PowerPoint on my computer but I do have Apple Keynote and this PowerPoint file will open up in that just fine as well. There we go; that’s Apple Keynote running now, and you can see here we’ve got all of our slides directly from Figma, and that’s all of them as would expect; we’ve got background colors set to white, we could obviously change that in here if we want to, and you can see all of the other elements still say the same; I’ll set that back to white now. We can move around our layers if we’d like to, and the other neat thing is if we go to open up our presentation notes, if you just go to «view» and then go to «show presenter notes» (this might be different in PowerPoint), but if I click on that, you can see here that the text that we added in Figma has been carried over into our speaker notes, and I can edit those if I want to, or I can get rid of some of them and remove those, but that’s all been loaded in; that’s really neat.

The other thing we can do is, because these are just images, we can add effects to them if we like, we can change opacities, and do all the normal stuff you’d want, like add animations. We could add a «blur» effect there and that would work; all of the layers from Figma have essentially been imported one-for-one into a PowerPoint file; you could open this up in Microsoft PowerPoint (as I said I’m just using Apple Keynote at the moment to give you an idea of it), but this is a PowerPoint file that will open in PowerPoint, Keynote or Google Slides, if you prefer.

That’s that’s all there is to. It’s very straightforward as you saw; it only took you know maybe five to ten seconds to export our collaborative presentation from Figma to PowerPoint; it’s very very quick.

I’m just going to close it off now, but if you need to make changes to it, you can you can either make those changes in PowerPoint, or if you prefer to leave Figma as your source of truth, you can just make your updates in the Figma project file and rerun the Pitchdeck Figma plugin, which you can do just by going over to the right hand side here, under «plugin», and clicking on the «Pitchdeck» little pancake icon, and that will rerun the Figma plugin. You can just keep exporting your collaborative presentation designs from Figma to PowerPoint from as many times as you want, and it’s just going to keep doing it as many times as you need to; that way you can keep your collaborative presentation design in Figma as your source of truth for your slides, along with your design elements and your components, and just keep exporting it from Figma to PowerPoint as needed.

I hope that’s been helpful, if you’ve been wondering how to get your slides out of Figma into PowerPoint, this is the way that you can you can go about doing that. I hope that it helps you or your team with something that you’re working on or if you’ve been trying to solve this problem for yourself. Thank you as always for watching, and we’ll be back very soon with more Figma tutorials for you to check out.

Как делать презентацию в Figma?

Можно ли в Фигме сделать презентацию?

Всё очень просто: создаёте презентацию в Фигме и затем парой-тройкой кликов превращаете её в pptx-файлы. Но только не сплошными нередактируемыми картинками, как это сделал горе-фрилансер в кейсе выше, а полноценно. То есть, каждая картинка экспортируется, как отдельная картинка.

Какой размер слайда в PowerPoint?

На вкладке Конструктор в группе Настроить нажмите кнопку Размер слайда. Выберите пункт Стандартный (4:3) или Широкоэкранный (16:9). Если Веб-приложение PowerPoint не сможет автоматически масштабировать содержимое, он предложит выбрать один из двух следующих вариантов: Развернуть.

Как сохранить в Фигме презентацию?

Быстрая инструкция по экспорту файлов в Фигме

Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат. Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента.

Как в PowerPoint размер в пикселях?

Традиционный слайд PPT был 10 «x 7,5» на ПК, в общей сложности 960×720 пикселей. Теперь PowerPoint позволит увеличить разрешение ваших изображений. Однако при отображении изображения и шрифты отображаются с разрешением экрана, которое может быть установлено вашим монитором или переключателем презентаций.

Какой клавишей можно запустить демонстрацию слайдов в Microsoft Powerpoint?

Что можно создавать в Фигме?

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

Какое разрешение у слайда в презентации?

PowerPoint поддерживает создание растровых изображений до 100 000 000 пикселей (ширина х высота). Для стандартных широкоэкранных слайдов (13,3” x 7,5”) это означает максимальное значение DPI, равное 1000. Для стандартных широкоэкранных слайдов (10” x 7,5”) это означает максимальное значение DPI, равное 1155.

Как узнать размер слайда в PowerPoint?

Переключитесь на вкладку Дизайн на ленте PowerPoint’а и найдите иконку Размер слайда, на правой стороне ленты. В раскрывающимся меню будет несколько опции. Нажмите Настроить размер слайдов, чтобы открыть меню размера слайда и изменить разрешение сторон презентации.

Какой размер у листа презентации?

В результате: три самых популярных формата для показа презентаций в электронном виде – это 16:9, 16:10 и 3:4. Если вы собираетесь использовать проектор или ноутбук, но не знаете точных размеров устройств, можно выбирать размер 16:9 – как наиболее распространенный формат.

Как в повер поинт сделать лист а4?

Как изменить формат слайда в PowerPoint 2019?

Как поменять формат презентации с PPTX на PDF?