Гифки в Фигме и как их применять
Фигма делает правильный шаг, чтобы добавить нашим прототипам жизни: теперь можно добавлять в макеты гифки.
При этом во время работы над макетом гифки не проигрываются, экономя дизайнеру психику.
Гифки в прототипах — это очень важное улучшение, которое давно напрашивалось. Это не про вставку в макеты смешных котиков и мемов. Это совершенно новое измерение прототипа, которое делает его гораздо более убедительным для зрителя. Допустим, ты задумал сделать на сайте видео-фон. Есть огромная разница между в восприятии обычного статичного слайда и настоящего видео-фона, пусть даже со скидкой на плохое качество GIF-изображения.
При помощи
ScreenFlow я нарезал из
этого видео фрагмент, который использовал в качестве видео-фона в макете размером 1280х720. Я сделал
тестовый проект, для которого сохранил гиф-видео в 6 вариантах качества, чтобы можно было подобрать оптимальные настройки. В три размера холста гифки: 100%, 50% и 25%. И два значения FPS: 15 и 8. Самая тяжёлая гифка весит 51 мб, имеет лучшее качество и FPS, но гарантированно заставит зрителя ждать даже на быстром интернете. На моих офисных 20 мбит это ожидание заняло ровно минуту, что отсекает такой вариант. Самая лёгкая гифка весит 2,3 мб. Она загружается почти мгновенно, но она самая уродливая и с низким FPS.
Мой выбор пал на вариант 640х360 с FPS 8, которая весит почти 8 мб. По ощущениям просаживаться по FPS легче, чем терять в деталях.
Больше идей о том, как применить гифки в прототипах —
в посте Фигмы.
Исходник в Фигме →
Прототип →
—
#для_профи #UI_анимация