fbpx
🍿 Подписывайся на Telegram Telegram 🚨 Фидбек дизайнерам Форум
GIFMA-HEADER-2120x1000

Figma ввела поддержку GIF файлов в прототипах

Мы рады сообщить, что на сегодняшний день прототипы Figma поддерживают анимированные GIF-изображения! Добавьте GIF в ваш файл и наблюдайте, как он оживает, просто нажав «Present».

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

Вот как работают GIF в прототипах Figma:

Figma ввела поддержку GIF файлов в прототипах
  • Добавьте GIF в файл Figma. ScreenFlow, LICEcap, Principle и After Effects – наши любимые инструменты для создания GIF.
  • Нажмите «Present» и наблюдайте, как оживает ваш прототип.

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

Предстоящие воркшопы

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

Figma ввела поддержку GIF файлов в прототипах

Для вашего вдохновения, предлагаем просмотреть некоторые из наших любимых анимационных работ. Мы не можем дождаться, когда увидим, что вы будете делать с GIF-файлами в прототипах Figma! Не забудьте запостить в Твиттере над чем работаете, отметив @FigmaDesign с #GIFma.

Несколько наших любимых анимационных работ

1. Анимированная заставка Uber

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

2. Загрузка Slack

Каждое приложение преображает и представляет состояние загрузки по-своему. Slack, во время загрузки предлагает нам немного почитать, разные цитаты, полезные советы по продукту или же просто красивые фразы.

Figma ввела поддержку GIF файлов в прототипах

3. Индикаторы прогресса Material Design

Иногда, простота – залог успеха. Material Design модернизирует линейные и круговые индикаторы прогресса, каждый из которых представляет отдельное действие в приложении.

Figma ввела поддержку GIF файлов в прототипах

4. Иллюстративная регистрация Headspace:

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

5. Видеоредактор Hyperlapse:

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

6. Сайт Mapbox:

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

Figma ввела поддержку GIF файлов в прототипах

7. Иллюстрации сайта Mailchimp:

Удачные GIF-файлы могут быть очень эффективными. На сайте Mailchimp вы можете найти тонкие анимации, которые добавляют текстуры в иллюстрации.

Figma ввела поддержку GIF файлов в прототипах

Нужна помощь, чтобы начать? Попробуйте этот стартовый файл Figma с мобильными UI файлами GIF, с которыми вы можете работать и экспериментировать прямо сейчас. Для получения более подробной информации вы можете ознакомиться со статьей поддержки.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
1
Подробнее

Создание сложных вариантов (variants) в Figma

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