В этом уроке вы узнаете, как вставить GIF анимацию в Figma с помощью специального плагина «Lottiefiles». Анимация будет доступна при просмотре вашего проекта в режиме «Prewie». Смотрите видео по теме или читайте текстовую версию ниже.
Как установить плагин Lottiefiles с GIF анимацией для Figma?
![Установка плагина lottiefiles для figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-01-1024x571.png)
Чтобы установить плагин Lottiefiles с GIF анимацией для figma перейдите по ссылке и нажмите на кнопку «Install» в верхнем правом углу.
Активация плагина Lottiefiles в фигме
![Активация плагина lottiefiles в figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-02-1024x571.png)
Для активации плагина, нажмите на иконку выпадающего меню, затем выберите вкладку «Quick actions…»
![Поиск плагина lottiefiles для его активации в figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-03-1024x571.png)
В поисковой строке введите название плагина «Lottiefiles».
![Регистрация в lottiefiles](https://web-design.center/wp-content/uploads/2022/07/gif-figma-04-1024x571.png)
Чтобы плагин работал нужно зарегистрироваться на сайте. Для этого в появившемся окне нажмите на кнопку «Log In».
![Регистрация в lottiefiles на сайте](https://web-design.center/wp-content/uploads/2022/07/gif-figma-05-1024x571.png)
Затем зарегистрируйтесь удобным для вас способом, например с помощью Google.
![Успешная регистрация в lottiefiles](https://web-design.center/wp-content/uploads/2022/07/gif-figma-07-1024x571.png)
После входа в аккаунт появится надпись, что вход произошел успешно.
Gif анимация: инструкция как вставить в Figma с плагином Lottiefiles.
![Поиск gif изображений в плагине для вставки в figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-08-1024x571.png)
Чтобы вставить гиф анимацию в фигму – активируйте плагин Lottiefiles и найдите подходящее изображение, которое хотите использовать.
Вы можете выбрать анимацию из списка, либо найти её используя поисковую строку. Для примера сделаю поиск по фразе «Social».
![Редактирование стоп кадра. GIF анимация в Figma. Вставка изображений из плагина](https://web-design.center/wp-content/uploads/2022/07/gif-figma-09-1024x571.png)
Кликните правой клавишей мыши на нужное GIF изображение, сделать его просмотр.
![Вставка SVG изображений с плагином lottiefiles в фигме](https://web-design.center/wp-content/uploads/2022/07/gif-figma-10-1024x571.png)
Помимо GIF анимации, вы можете вставить это изображение в формате SVG. Для этого переведите ползунок в нужное положение на линии времени и выберите подходящий вам фрагмент. После этого нажмите на кнопку «Insert as SVG».
![Вставка GIF изображений с плагином lottiefiles в фигме](https://web-design.center/wp-content/uploads/2022/07/gif-figma-11-1024x571.png)
Чтобы вставить GIF анимацию, нажмите на правую кнопку «Convert to GIF».
![Вставка GIF изображений с плагином lottiefiles в фигме](https://web-design.center/wp-content/uploads/2022/07/gif-figma-12-1024x571.png)
После этого появится кнопка «Add to Figma».
![Вставленное изображение GIF в фигме](https://web-design.center/wp-content/uploads/2022/07/gif-figma-13-1024x571.png)
Сначала у вас будет стартовый кадр анимации.
![Редактирование стоп кадра. GIF анимация в Figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-14-1024x571.png)
Чтобы его изменить, выберите изображение и нажмите внизу надписи «Fill» в правой панели на надпись «GIF».
![Gif анимация в Figma (просмотр)](https://web-design.center/wp-content/uploads/2022/07/gif-figma-15-1024x571.png)
Чтобы посмотреть как выглядит анимация, перейдите в режим просмотра нажав на иконку «Play» в правом верхнем углу.
![GIF анимация в Figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-16-1024x571.png)
Анимация в режиме просмотра может тормозить. При вставке на сайт, этого не будет. Давайте разберемся как это сделать.
Как вставить анимацию Lottiefiles на сайт?
![Активация плагина lottiefiles в figma](https://web-design.center/wp-content/uploads/2022/07/gif-figma-17-1024x571.png)
Если вы хотите вставить GIF анимацию из вашего проекта в Figma на сайт, то выберите вставленное ранее изображение из плагина Lottiefiles. Справа появиться иконка плагина, нажмите на неё.
![Переход по ссылке gif анимации](https://web-design.center/wp-content/uploads/2022/07/gif-figma-18-1024x571.png)
Затем нажмите на иконки ссылки в окне плагина.
![Вставка анимации lottiefiles на сайт](https://web-design.center/wp-content/uploads/2022/07/gif-figma-19-1024x571.png)
Ниже на странице вам нужно нажать на кнопку вставки HTML.
![Вставка анимации lottiefiles на сайт (копируем код)](https://web-design.center/wp-content/uploads/2022/07/gif-figma-20-1024x571.png)
На странице вы можете редактировать разные параметры анимации для вставки на сайт (размеры, включение и отключение контроллеров, автовоспроизведение и т.д.). После установки нужных параметров анимации, скопируйте его код и вставьте на сайт.
Как редактировать анимацию Lottiefiles и изменять цвет?
![Редактирование анимации lottiefiles на сайте](https://web-design.center/wp-content/uploads/2022/07/gif-figma-21-1024x571.png)
На странице анимации есть кнопка «Edit Layer Colors», что переводится как «Редактировать цвета слоев».
![Редактирование анимации lottiefiles на сайте (изменяем цвет)](https://web-design.center/wp-content/uploads/2022/07/gif-figma-22-1024x571.png)
Выберите нужный цвет в правой панели и установите нужный вам.
![Редактирование анимации lottiefiles на сайте (изменяем цвет)](https://web-design.center/wp-content/uploads/2022/07/gif-figma-23-1024x571.png)
После этого цвет анимации изменится и вы сможете использовать его в таком виде.
Заключение
GIF анимация в Figma может пригодиться в разных случаях, например если вы хотите использовать её на сайте, либо в мобильном приложении. В этой инструкции, вы узнали как использовать гиф анимацию в фигме и как вставлять её на сайт с помощью плагина Lottiefiles.
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).