Мы рады сообщить, что на сегодняшний день прототипы Figma поддерживают анимированные GIF-изображения! Добавьте GIF в ваш файл и наблюдайте, как он оживает, просто нажав «Present».
Независимо от того, создаете вы прототип мобильного приложения или презентацию, GIF-файлы - это простой способ сделать ваши проекты динамичными, живыми и яркими. GIF-файлы могут заменять моушн дизайны и видеоэлементы, которые трудно использовать в прототипах.
Вот как работают GIF в прототипах Figma:
- Добавьте GIF в файл Figma. ScreenFlow, LICEcap, Principle и After Effects - наши любимые инструменты для создания GIF.
- Нажмите «Present» и наблюдайте, как оживает ваш прототип.
Поскольку GIF-изображения анимируются только в прототипах, в файле они будут отображаться просто в виде статического изображения. Чтобы различать несколько одинаковых GIF-файлов, вы можете выбрать рамку обложки, отображаемую в редакторе, открыв модальный GIF-файл на панели свойств и выделив другой фрейм. Невероятно удобно, если первый кадр вашего GIF пустой или у нескольких GIF файлов одинаковые начальные кадры.
Наконец, если вы создаете мобильный прототип, вы обязательно почувствуете улучшенный скролл и обнаружите новые курсоры. Мы улучшили эти моменты, чтобы ваш дизайн выглядел максимально реалистично.
Для вашего вдохновения, предлагаем просмотреть некоторые из наших любимых анимационных работ. Мы не можем дождаться, когда увидим, что вы будете делать с GIF-файлами в прототипах Figma! Не забудьте запостить в Твиттере над чем работаете, отметив @FigmaDesign с #GIFma.
Несколько наших любимых анимационных работ
1. Анимированная заставка Uber
Первое впечатление безусловно имеет огромное значение, а заставка как раз очень сильно влияет на него. Вот довольно популярная заставка Uber. Лого приложения разделяется на две части, во время загрузки приложения, после чего сразу приветствует пользователей.
2. Загрузка Slack
Каждое приложение преображает и представляет состояние загрузки по-своему. Slack, во время загрузки предлагает нам немного почитать, разные цитаты, полезные советы по продукту или же просто красивые фразы.
3. Индикаторы прогресса Material Design
Иногда, простота - залог успеха. Material Design модернизирует линейные и круговые индикаторы прогресса, каждый из которых представляет отдельное действие в приложении.
4. Иллюстративная регистрация Headspace:
Полезные анимации, а также советы по началу работы могут заинтересовать пользователей. Приложение Headspace использует прикольные анимации для связи и при переходах между разделами, с помощью которых пользователи могут помедитировать и обрести спокойствие.
5. Видеоредактор Hyperlapse:
Hyperlapse предлагает быстрый доступ к продукту благодаря мобильному подключению. Они демонстрируют конкретные сценарии, в которых показывают привилегии съемки видео в Hyperlapse, демонстрируют что их приложение работает лучше, чем другие стандартные видео приложения.
6. Сайт Mapbox:
GIF-файлы отлично работают на веб-сайтах, к примеру, использование зацикленного видео Mapbox для веб-героя. Сайт демонстрирует, как компании могут использовать технологии геолокации в реальном времени.
7. Иллюстрации сайта Mailchimp:
Удачные GIF-файлы могут быть очень эффективными. На сайте Mailchimp вы можете найти тонкие анимации, которые добавляют текстуры в иллюстрации.
Нужна помощь, чтобы начать? Попробуйте этот стартовый файл Figma с мобильными UI файлами GIF, с которыми вы можете работать и экспериментировать прямо сейчас. Для получения более подробной информации вы можете ознакомиться со статьей поддержки.
Перевод статьи Lauren Budorick
Найновіші коментарі (0)