Создаем эффект бумаги и анимируем его в Figma

Эффект бумаги добавляет дизайну глубины, делая его более тактильным и как-будто «живым». Это как открыть книгу с настоящими бумажными страницами — вы сразу думаете о тепле, чтении у камина и чашке чая. Эффект бумаги идеально подходит для дизайнов, которые хотят вызывать ассоциации с чем-то персонализированным и естественным. Его используют на сайтах крафтовых брендов и даже можно встретить в интерфейсах обучающих платформ.

Хотите добавить этот прием в свои проекты? Сегодня мы покажем, как в Figma создать эффект, будто ваш дизайн напечатан на настоящей бумаге со слегка рваными краями. Let’s go!

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

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

Найти подходящие изображения. Я выбрал за основу картины Леонардо да Винчи.
Добавить их в Figma.

Шаг 2: Поиск изображения бумаги

В своем дизайн-концепте, я хочу использовать два эффекта: цельную бумагу на всю картину и рваный эффект. Быстро найти их можно так же на фотостоках или сгенерировать в Midjourney. С помощью генерации вы можете указать в промпте все детали бумаги которые важны. А как правильно создавать его и похожие результаты, мы уже подробно разобрали в нашем Instagram.

Найти два эффекта бумаги: цельную и со рваным краем.
Добавить их в Figma.

Шаг 3: Накладываем цельную бумагу на фото

Сначала добавим цельную бумагу на наши изображения, а после со рваными краями.

Делаю скругление углов фото в 24 и создаю его копию, с помощью горячих клавиш Ctrl (Cmd) + D. Копия нам пригодится, чтобы добавить позже рваную бумагу.
Фото цельной бумаги уменьшаю до размеров фото и делаю также скругление на 24. Оно должно быть поверх фото.
Выбираю режим наложения для бумаги Multiply.

А теперь необходимо проделать все эти манипуляции и со вторым фото.

Шаг 4: Дорабатываем рваную бумагу

Я вдохновился идеями на Awwwards и разделе Вдохновения на сайте Академии, и хочу добавить эффект рваной бумаги на часть фото. Но чтобы фото в этом эффекте увеличивалось и работало при ховере. Немного сложно? Сейчас разберем пошагово.

Делаю копию фото рваной бумаги.
Переворачиваю второй фрагмент.
Размещаю их друг возле друга, без отступа между ними. И создаю их копию, которую оставляем рядом. Эта копия будет нужна позже.

А теперь нужно экспортировать созданный нами объект. Но если вы сразу найдете или сгенерируете похожий рванный край (который есть с двух сторон), то этот шаг можно упустить.

Выделяю два фрагмента и добавляю их во фрейм.
Экспортирую его.
Добавляю экспортированный обьект назад в Figma.

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

Шаг 5: Накладываем рваную бумагу

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

Подрезаем края рваной бумаги (нашей экспортированной картинки) под размер фото картины.
Добавляем его на место, где будет видно этот эффект.
Фото-копию картины (которую мы создавали выше) в слоях слева переносим над фото рваной бумаги.
Выделяем фото картины и рваную бумагу и создаем маску.

Нужно доработать детали самого фото. По задумке фото, которое мы создали как рваное (наша групп-маска) должна быть увеличена.

Выделяем фото в групп-маске.
Увеличиваем только фото с зажатым Shift.

Шаг 6: Дорабатываем рваные края

Пока не до конца понятно, что это рваные края бумаги, ведь их плохо видно😀 Давайте исправим это с помощью фрагмента-копии, которую мы оставляли.

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

Теперь нужно правильно создать группы в слоях.

Создаю группу для двух фрагментов рваной бумаги.
Группируем маску и группу с фото рваной бумаги.
Выделяем все элементы и помещаем их во фрейм.

Шаг 7: Повторяем всё со вторым фото

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

Шаг 8: Создаем компонент с вариантом

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

Шаг 9: Настраиваем первый вариант компонента

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

Скрываем группу с рваными краями во втором варианте. Для этого в прозрачности группы устанавливаем значение 0%.
Делаем это со вторым компонентом.

Шаг 10: Добавляем анимацию между вариантами

С первого варианта до второго добавляем анимацию While hovering со Smart animate и скоростью 300ms.
Добавляем такую анимацию и ко второму фото.

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

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

Создаем фрейм 1920*1080.
Выбираем цвет его фона #FFFFFF.
Переносим первые варианты созданных фото в правый край фрейма. Это будет слайдер, который мы тоже будем анимировать.

Шаг 12: Добавляем весь контент

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

Шаг 13: Создаем компонент с фрейма

Чтобы настроить слайдер, нужно создать из нашего фрейма компонент с одним вариантом.

Создаем из фрейма компонент.
Создаем вариант.

Шаг 14: Дорабатываем второй вариант

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

Во втором варианте меняем наши фото местами.
Проверяем в слоях слева, чтобы ничего не передвинулось или изменилось при перемене фото в фрейме. Ведь тогда анимация будет немного «прыгать».

Шаг 15: Добавляем анимацию между вариантами

Чтобы слайдер работал плавно, нужно выбрать Smart Animate с подходящей скоростью.

С иконки стрелки вправо первого варианта выбираем триггер On click, с анимацией Smart Animate и скоростью 400ms.
С иконки стрелки влево второго варианта к первому всё тоже самое, но только к первому варианту.

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

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

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

Вуаля, наш эффект бумаги полность готов

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