Как мы делаем анимированные иконки SVG с помощью Figma
Начнем с того, что иконка в SVG — это отдельная страница, которую мы встраиваем в другую страницу. Следствием этого является то, что для элементов иконки мы можем использовать самую обычную анимацию CSS с некоторыми небольшими особенностями.
В итоге наш процесс создания анимированной иконки состоит из трех этапов:
- Создаем SVG в Figma
- Дописываем анимацию в блокноте
Создание иконки в Figma
Несколько правил при создании иконки:
- Все подвижные элементы должны быть отдельными. Не объединять их в один вектор
- Убираем всю обводку
Итак, на примере у нас есть вектор стакан, есть вектор крышка и отдельные векторы — пар.

Экспортируем фрейм (не забыв убрать фон) в SVG и открываем файл в блокноте.
Файл открывается и закрывается тегом SVG, в рамках него мы и будем работать.

Перед или после элементов добавляем тег наших стилей <style></style>. Стили обязательно должны быть внутри <SVG></SVG>, иначе вы получите ошибку.
Для элементов, которые мы планируем анимировать, проставляем id или class.
Далее прописываем для нужных нам id и классов стили с указанием имени анимации, например:
#steam6{ animation-name: sA3; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; animation-delay: 0s; opacity: 0; }
И там же пишем скрипт анимации:
@keyframes sA3 { 0% {opacity: 0 ;} 30% {opacity: 0 ;} 36% {opacity:1;} 45% {opacity: .0 ; } 50% {opacity: 0 ; } 100% {opacity: 0 ; } }
Теперь можно вставить наш SVG в любое место как объект:
<object data="/coffee.svg" type="image/svg+xml" width="300" height="150"> </object>
Скачать эту иконку в SVG можно здесь.
То есть нормального инструмента, который бы позволял работать с объектами и анимацией SVG в режиме WYSIWYG — так и не появилось?
Или хотя бы создавал SVG в структурированном по внутренним объектам виде?
Всё через ковыряние кода?….
Причём кода — не в лучшем виде… (((((
Есть Figmotion, там работа с ключевым кадрами. Лично я не видел его довольно давно, тогда там было не так уж много возможностей, но зато можно было экспортировать в JSON. Вообще сейчас есть смысл смотреть в сторону Lottie, конечно, но это уже не про Figma больше, а про AE/Illustrator.