...

Анимация GIF в прототипе




Описание

Figma позволяет использовать анимированные изображения GIF в прототипах, при этом в редакторе анимация не воспроизводится.

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

Техническое ограничение по размеру для GIF составляет 4096 пикселей по одной стороне, все изображения с большим разрешением будут отмасштабированы.

Для чего пригодится

В прототип Figma пока что нельзя добавить видео или svg/css-анимацию, однако в современном веб-дизайне анимированные элементы и фоны уже более чем норма. Вставка GIF является альтернативой для демонстрации, но в верстке лучше использовать более современные форматы.

Как добавить GIF

Добавить анимацию можно как и любое другое изображение — выбрав его в качестве заливки в поле Fill (тип Image), перетащив его в редактор или вставив после копирования.

GIF в Figma
GIF в Figma

Учитывайте, что анимация GIF делает прототип более тяжелым.

 

Управление анимацией

В редакторе показывается статичное изображение, но вы можете настроить превью, перемести ползунок в окне Fill в нужное место (см скриншот).

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

  • Масштабировать, вращать, изменять размеры и пропорции
  • Изменять режим заливки
  • Изменять прозрачность
  • Менять режим наложения
  • Присенять к GIF маски

 

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


🪣 Выбираем самые полезные плагины

По теме: