Как сделать эффект бумаги в фигме

Создание реалистичного эффекта бумаги в Figma — это один из способов добавить в дизайн тактильности, глубины и визуальной привлекательности. Такой приём особенно актуален при проектировании макетов для презентаций, цифровых журналов, портфолио, landing page с минималистичным стилем или интерфейсов, имитирующих бумажные блокноты, скетчи или старинные документы. Эффект достигается за счёт комбинации текстур, теней, цветовых коррекций и настроек прозрачности.

Текстура бумаги: где взять и как использовать

Реальная бумага никогда не бывает абсолютно гладкой. Даже офисная белая бумага имеет микронеровности, которые рассеивают свет и создают ощущение матовости. Чтобы передать этот эффект в Figma, необходимо использовать текстуру. Лучше всего подходят монохромные шумы, сканированные образцы настоящей бумаги или фототекстуры с разрешением 1024×1024 px и выше.

Популярные источники бесплатных текстур:

• Subtle Patterns — коллекция повторяющихся узоров с эффектом пергамента, картона, канвы;
• Polished Textures — высококачественные HD-текстуры бумаги, включая водяные знаки и старинные листы;
• Unsplash и Pexels — поиск по запросу «paper texture close-up» даёт реалистичные фото;
• Textures.com (ныне Cgbookcase) — архив профессиональных текстур с возможностью выбора по типу бумаги (офисная, акварельная, наждачная).

Чтобы применить текстуру в Figma:

1. Загрузите изображение текстуры через File → Place image или перетащите его в рабочую область.
2. Разместите слой поверх фигуры, которая должна имитировать бумагу.
3. Выделите оба слоя (фигуру и изображение), затем нажмите Create Mask (Ctrl+Alt+M / Cmd+Option+M).
4. Настройте прозрачность текстуры от 5% до 15%, чтобы она не перегружала дизайн.

Для повторяющихся элементов (например, сетки карточек) создайте компонент с уже наложенной текстурой. Это ускорит работу и обеспечит единообразие.

Ошибки при работе с текстурой

• Слишком высокая контрастность — делает фон агрессивным и отвлекает внимание от контента.
• Неправильный масштаб — если зёрна слишком крупные, создаётся эффект песка, а не бумаги.
• Отсутствие обрезки — текстура может выходить за края макета; всегда используйте маски или clipping.

Цвет и тонирование: как подобрать правильный оттенок

Бумага редко бывает идеально белой. Даже свежий лист A4 имеет легкий голубоватый или кремовый оттенок. Использование «мертвенно-белого» (#FFFFFF) делает дизайн плоским и искусственным. Реалистичный эффект достигается за счёт теплых или холодных нюансов.

Лучшие цвета для имитации бумаги:

• #F8F4E9 — кремово-белый, подходит для дизайна с мягким освещением;
• #FAF9F6 — современный «clean white», популярен в UI;
• #F2F0EB — серовато-бежевый, напоминает старые книги;
• #FDFCFB — почти белый, но с минимальным теплом.

Чтобы добавить живость, используйте градиенты с нулевой прозрачностью:

1. Выберите прямоугольник, имитирующий лист.
2. В панели Fills установите градиент (Linear или Radial).
3. Подберите два оттенка одной гаммы — например, #F8F4E9 и #F2F0EB.
4. Настройте угол или радиус так, чтобы переход был едва заметен.

Для проектов с исторической тематикой (например, архивы, музеи) используйте более насыщенные оттенки — #E8DCC5 (пожелтевший пергамент) или #D7CCC8 (состаренная бумага). Но будьте осторожны: слишком тёмный фон ухудшает читаемость.

Как проверить читаемость

• Используйте плагин Contrast Checker для проверки соотношения цветов.
• Текст на бумаге должен соответствовать стандарту WCAG AA (минимум 4.5:1).
• Темный текст на светлом фоне — оптимальный выбор.

Тени и глубина: создание объёма листа

Плоская фигура не воспринимается как лист бумаги. Чтобы добавить объём, нужно использовать тени. Однако стандартные drop shadow в Figma часто слишком жёсткие. Цель — передать лёгкое приподнятие, как у реально лежащего на столе листа.

Рекомендуемые настройки тени:

• Color: rgba(0, 0, 0, 0.1) — мягкое серое;
• Blur: 8–12 px;
• Spread: 0;
• X: 0;
• Y: 2–4 px.

Для усиления эффекта добавьте вторую, более размытую тень:

1. Добавьте второй слой тени с Blur = 20 px и Y = 1 px.
2. Цвет — rgba(0, 0, 0, 0.05).
3. Это создаёт эффект «лёгкого дыма» под листом.

Представьте, что лист лежит на деревянном столе — он не прилегает плотно ко всей поверхности. Поэтому тень не должна быть равномерной. Можно имитировать это с помощью маски:

• Создайте эллипс под углом листа.
• Примените к нему размытие и низкую непрозрачность.
• Расположите его только под одним краем — как будто лист слегка загнут.

Альтернатива теням — inner glow

Метод, заимствованный из Photoshop, — внутреннее свечение. В Figma его нет, но можно имитировать:

1. Создайте прямоугольник на 2 px меньше оригинального.
2. Залейте его цветом фона.
3. Добавьте внешнюю тень с Blur = 1 px и цветом rgba(255, 255, 255, 0.6).
4. Поместите этот слой поверх основного — получится эффект «светлого ободка», как у настоящего листа.

Эффекты состаривания: пожелтение, пятна, выцветание

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

Шаги для состаривания:

1. Добавьте текстуру с пятнами (coffee stains, water marks).
2. Поместите её поверх листа, режим наложения — Color Burn или Multiply.
3. Ограничьте область действия маской — чтобы пятна не закрывали текст.
4. Снизьте прозрачность до 5–10%.

Цветовая коррекция:

• Добавьте прямоугольник поверх всего слоя с заливкой #F5E6C8 (тёплый беж).
• Режим наложения — Color или Hue, прозрачность 8–12%.
• Это придаст общее пожелтение, как у старых документов.

Для максимального реализма:

• Используйте текстуры с волокнами бумаги, видимыми при увеличении.
• Добавьте случайные точки (simulating dust) — мелкие круги 1–2 px, цвет #A0A0A0, прозрачность 20%.
• Разместите их неравномерно, избегая центра.

Как придать листу физический вид: загибы, складки, заломы

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

Создание загнутого угла:

1. Нарисуйте треугольник в углу листа.
2. Залейте его цветом чуть темнее основного фона — например, на 5% темнее.
3. Добавьте градиент от этого цвета к прозрачному, направляя его от угла.
4. Добавьте тень вдоль линии сгиба — маленькую, с Blur = 2 px.

Для эффекта «перевёрнутой страницы»:

• Создайте параллелограмм, имитирующий изгиб.
• Используйте градиент от светлого к тёмному — это покажет объём.
• Добавьте тень между листами — она должна быть тонкой и направленной внутрь.

Складки и морщины

Реалистичные складки сложны для векторного моделирования, но можно использовать текстуры:

• Поискать в Unsplash фото помятой бумаги.
• Обрезать участок и наложить с режимом Overlay.
• Масштабировать так, чтобы складка совпадала с воображаемой линией изгиба.

Автоматизация через плагины: лучшие инструменты

Figma позволяет ускорить процесс с помощью плагинов. Вот топ-5 решений для создания эффекта бумаги:

Как использовать:

1. Откройте панель плагинов (Ctrl+P / Cmd+P).
2. Найдите нужный плагин и установите.
3. Выделите фигуру и запустите плагин.
4. Настройте параметры и примените.

Совет: создайте собственный компонент «Paper Style» с текстурой, тенью и цветом, и сохраните его в библиотеке команды. Это сэкономит часы работы.

Экспертное мнение

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

Вопросы и ответы

Заключение

Эффект бумаги в Figma — это не просто стиль, а инструмент управления восприятием. Он делает интерфейс теплее, понятнее и ближе к пользователю. Главное — не перегружать макет. Достаточно трёх элементов: правильный цвет, лёгкая текстура и мягкая тень.

• Используйте тёплые, неидеальные оттенки вместо чисто белого.
• Добавляйте текстуру с прозрачностью 5–12% через маску или режим наложения.
• Применяйте две тени: одну чёткую (Y=2–4), другую — размытую (Blur=20).
• Для состаривания используйте умеренные цветовые коррекции и единичные пятна.
• Автоматизируйте процесс через плагины и компоненты.