Создаем 3D анимацию вращения в Figma
Иногда смотришь на свою работу и понимаешь, что хочется не то что добавить, а именно насыпать изюма в дизайн. Так почему бы не сделать эффектную анимацию вращения?
Анимации в дизайне — тема, которая всегда актуальна. Как часто вы гуглите: как сделать ту или иную интерактивность, что сейчас в трендах в плане анимаций и т.д. Ну где найти тот ресурс, в котором расскажут всё пошагово и ещё покажут на реальных примерах?
Эй, вы уже здесь! И сегодня мы в Пижамной Академии покажем как создать эффектную анимацию 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.
Наслаждаемся результатом своей работы
Теперь ты можешь добавить эту эффектную анимацию к себе в копилку и применить на одном из проектов.
Да, это была не самая простая анимация, которую можно создать в Figma. Но ведь с помощью Пижамной Академии всё оказалось не так сложно. Мы знаем, как это, когда материал подают сверх закручено, без примеров и реальной практики после. Ведь нашу программу обучения Профессия UI/UX дизайнера, мы создавали не один месяц и проанализировали сотню материалом, чтобы понять — как правильно распределить нагрузку и лекции, чтобы изучение был по порядку, от простого к сложному. И самое важное с упором на практику и лучшей обратной связью. Не жди, когда придет то самое время, уже пора становиться Топом в сфере UX/UI и станешь частью большого комьюнити «пижамных дизайнеров».
