Как мы делаем анимированные иконки 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.