Создаем 3D анимацию вращения в Figma

Анимации в дизайне — тема, которая всегда актуальна. Как часто вы гуглите: как сделать ту или иную интерактивность, что сейчас в трендах в плане анимаций и т.д. Ну где найти тот ресурс, в котором расскажут всё пошагово и ещё покажут на реальных примерах?

Эй, вы уже здесь! И сегодня мы в Nexfield Academy покажем как создать эффектную анимацию 3D вращения, которая добавит вашему дизайну больше динамики. Все уже открыли Figma? Тогда, let’s go.

Шаг 1: Подготовка главного изображения

Главным изображение в нашем дизайне будет бутылка вина. Но, вы можете взять не только бутылку, а например алюминиевую банку с газировки. Всё будет работать так же, но есть два важных момента, которые необходимо учитывать во всех случаях: изображение должно быть качественным (без пиксельных областей) и без заднего фона (то есть вырезано, если фон был до).

• Добавляем бутылку вина в наш дизайн проект Figma.
• С помощью инструмента Pen аккуратно обводим края этикетки на бутылке, чтобы создать прямоугольник (пускай и немного не ровный).

Шаг 2: Подготовка компонентов для будущей этикетки

Мы не можем оставить бутылку в таком виде. Нам нужно добавить новые этикетки, которые будут меняться с помощью анимации в дальнейшем. Вы можете их найти на бесплатных фотостоках или создать самостоятельно. Для удобства и быстрой работы советую использовать компоненты.

• Загружаем в Figma две этикетки для бутылки.
• Выделяем их и создаем Component set.
• И чтобы не запутаться дальше в анимации и слоях, даем им названия.

Шаг 3: Создаем маску

Окей, у нас есть бутылка и два фото, самое время их соединить. Как это сделать? Используйте маску, выделив два объекта: этикетку и созданный нами прямоугольник (внимание, не саму бутылку).

• Копируем один из вариантов компонента с этикетками.
• Выделяем его и прямоугольник, который мы создавали на начале.
• Создаем маску и в Blend Mode (смотри в Appearance) выбираем режим Multiply, чтобы наша новая этикетка была как влитая.
• Выделяем все элементы и группируем.

Шаг 4: Создаем фрейм и заливку

Ну а как же мы настроим крутую 3D анимацию без фрейма? И конечно, подобрать цветовую палитру и фон для дизайна.

• Создаем фрейм 1920*1080.
• Добавляем отдельный прямоугольник, размером с наш фрейм. Выбираем цвет заливки и создаем его копию с помощью горячих клавиш Ctrl (Cmd) + D. «Зачем делать копию?», спросите вы. Это будет необходимо для правильной работы анимации. Но не волнуйтесь, это мы не упустим.

Шаг 5: Добавляем контент во фрейм

Его можно заготовить изначально, а можно создать на этом этапе. Для нашего интерфейса нам понадобится кнопка, хедер, заголовок и фото винограда (не забываем у нас бутылка вина и тема соответствует).

• Добавляем в наш фрейм бутылку, заголовок, иллюстрации, хедер с кнопкой.
• Проверяем выравнивания и все расстояния. Мы ведь не просто красивую анимацию создаем, но и как дизайнеры следим за всеми основами UI и UX.

Шаг 6: Группируем элементы

Вот тут важно не ошибиться в слоях после группирования, чтобы все элементы отображались как нужно и не перекрывались другими. Что ж начнем.

• Группируем вместе заголовок, бутылку (которая сама является отдельной группой элементов), иллюстрации позади.
• Но кнопка и хедер должны быть отдельно! В эту группу их включать не нужно.

Шаг 7: Создаем маску для контента

Помните мы писали выше, что из прямокутника, который у нас служит фоном необходимо сделать еще копию? Вот теперь время пришло создать с помощью него маску. Она поможет скрыть в анимации контент слайда.

• Выбираем этот прямоугольник и группу элементов (заголовок, бутылка, текст, фото), создаем маску.
• Проверяем всё ли отображается корректно и маска была создана правильно (група в слоях была выше, а прямоугольник ниже).
• Называем нашу маск-группу, чтобы не запутаться в дальнейшем. В моем случае это будет «Champagne».

Шаг 8: Копируем маск-группу

Изначально у нас було две этикетки, а значит для анимации нам нужно два экрана, чтобы показать их смену. Но для этого нам не нужно создавать отдельный фрейм — нам нужно создать копию маски.

• Выделяем нашу маск-группу, которую мы создавали последней (прямоугольник с группой контента) и копируем её с помощью тех же горячих клавиш Ctrl (Cmd) + D.
• Сразу даем группе другое название. Например, я написала «Sparkling». Так мы точно не запутаемся где какая маска и что нужно сейчас там менять.

Шаг 9: Подстраиваем контент под новую маск-группу

Теперь в новой группе над необходимо настроить всё под стиль другой этикетки: прописать названия, тексты, заменить фото и т.д.

• Скрываем верхнюю группу.
• Через компоненты меняем этикетку на бутылке.
• Меняем цвет фона, текст и фото.
• НО, хедер и кнопку оставляем без изменений.

Шаг 10: Подготовка компонентов экрана

Чтобы удобно настроить анимацию нам необходимы опять наши помощники — компоненты.

• Выделяем весь фрейм и создаем с него компонент.
• В этом же компоненте создаем вариант.
• Даем понятные названия вариантам, чтобы не было путаницы.

Шаг 11: Меняем элементы первого экрана

Я бы сказала, что теперь мы перешли к этапу создания логики анимации. Необходимо продумать, что за чем будет появляться и как это будет работать, чтобы ничего не упустить.

• Скрываем верхнюю группу с элементами в первом варианте. Нам пока она не нужна.
• Иллюстрации передвигаем влево максимально близко к краю фрейма.
• Заголовок также двигаем влево полностью за фрейм.

Шаг 12: Прокручиваем этикетку первого экрана

Мы находися всё в той же группе верхнего варианта. Осталось только изменить этикетку.

• Выбираем фото в маск-группе нашей этикетки и прокручиваем её вправо.
• Убираем скрытие верхней маск-группы и переходим ко второму варианту.

Шаг 13: Меняем элементы второго экрана

Теперь нам необходимо изменить второй экран. Но если до этого в первом варианте мы скрывали верхнюю маск-группу и работали с нижней, то тут необходимо работать именно с верхней.

• Передвигаем иллюстрации вправо максимально близко к краю фрейма.
• Заголовок также двигаем вправо полностью за фрейм.

Шаг 14: Прокручиваем этикетку второго экрана

Тут так же осталось изменить только этикетку.

• Выбираем фото в маск-группе нашей этикетки и прокручиваем её влево.
• Выбираем прямоугольник этой маск-группы и двигаем его право. Но тут внимательно: именно двигаем, не сжимаем или уменьшаем, а передвигаем.

Шаг 15: Настраиваем анимацию

Триггером нашей анимации будет кнопка. Именно при нажатии на неё у нас будет происходить смена экранов и мы увидим интерактивные изменения.

• Добавляем на кнопку анимацию: On clik через Smart animate и настраиваем скорость. Я установила 800ms.
• Добавляем анимацию и в обратную сторону со второго экрана через кнопку.

Шаг 16: Создаем новый фрейм

Зачем ещё один? А как ты посмотришь результат своей работы. Если мы всё делали через компоненты, поэтому нам и нужен новый фрейм, чтобы потестить свои решения, а вдруг что-то сломалось.

• Создаем новый фрейм, размером 1920*1080.
• Добавляем в него копию первого варианта.
• И включаем Present.

Наслаждаемся результатом своей работы

Теперь ты можешь добавить эту эффектную анимацию к себе в копилку и применить на одном из проектов.