Рад снова поделиться с вами навыками анимации в Figma. Не претендую на первооткрывателя, так как все предельно просто и наверняка у многих дизайнеров сие действо крутится на уме.
Как делать?
1. Возьмем простой квадрат (R) и создадим его копию на том же месте. Верхний квадрат отодвигаем 30×30px (с зажатым Shift'ом 3 раза стрелку влево и 3 раза вниз). Получаются вот такие два слоя:
2. Сверху и справа рисуем соединительные грани, представляя, что квадрат выдавился в пространство. Важно, чтобы эти грани сходились с краями квадратов. У верхней грани делаем цвет чуть темнее квадрата. У правой — чуть светлее, будто где-то справа светит лампа:
3. Выделяем две новые грани, объединяем в папку (ctrl+g) для удобства. Создаем копию этой папки на том же месте (ctrl+c\v). Переносим дублер граней вверх вправо 30×30px (shift + стрелочки) так же, как мы перенесли вначале квадрат. Окрашиваем новые грани в цвет фона (i), чтобы их не было видно. Они как бы есть, но их нет.
Важно! Новые грани в цвет фона должны быть в слоях выше, чем грани, которые мы разукрасили.
4. Выделяем квадрат и цветные грани, переносим их 30×30px (shift + стрелки) вверх вправо так, чтобы цветные грани спрятались под невидимыми. Дублируем фрейм, на котором мы разыграли все это действо.
На первом фрейме у нас должен быть квадрат без граней (задвинутый за темные грани).
На втором фрейме квадрат из 2-го пункта.
Главное — не делайте отдельно новые объекты на разных фреймах. Анимация может не сработать, если названия объектов разные.
5. С первого фрейма выбираем квадрат и в режиме Prototype создаем переход на второй фрейм с эффектом mouse enter\smart animate.
ВНИМАНИЕ! У второго фрейма находим наш прямоугольник, который мы «заныкали» в самом начале (самый нижний в слоях должен быть и на месте прямоугольника из первого фрейма), и создаем от него переход назад на первый фрейм с эффектом mouse leave\smart animate. В каком месте у нас срабатывает наведение — в том же месте должно быть убирание мышки, иначе анимация начнет свои свистопляски. Поэтому мы оставили изначально квадрат.
6. Включаем презентацию прототипа и смотрим, что получилось. Если у вас темные грани по бокам создают прозрачность, то попробуйте их объединить в одну фигуру (ctrl+e) или на 1px их расширить в режиме редактирования фигуры.
Ссылка на макет с анимацией здесь.
Спасибо, что посмотрели! Если у вас есть идеи на тему анимации изометрии, пишите в комментарии, с радостью обсудим!