Анимация изометрических фигур

Рад снова поделиться с вами навыками анимации в 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 их расширить в режиме редактирования фигуры.

Ссылка на макет с анимацией здесь.

Спасибо, что посмотрели! Если у вас есть идеи на тему анимации изометрии, пишите в комментарии, с радостью обсудим!